Пример простого Ajax запроса с его обработкой.

Код Ajax запроса

Нужно создать новый объект XMLHttpRequest и добавить две функции. Функция для создания запроса и передачи его на сервер (этим занимается функция getCustomerInfo()), и для обработки ответа сервера (функция updatePage())

<script language="javascript" type="text/javascript">
 var request = false;
 try {
   request = new XMLHttpRequest();  
 } catch (trymicrosoft) {
   try {
     request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (othermicrosoft) {
     try {
       request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (failed) {
       request = false;
     }
   }
 }
 
 if (!request)
   alert("Error initializing XMLHttpRequest!");
 
 function getCustomerInfo() {
   var text = "test text";                                                           //Передаваемая переменная
   var url = "<?php print base_path() . path_to_theme(); ?>/ajax.php?text=" + text;  // Адрес до файла ajax.php
   request.open("GET", url, true);    // Создание запроса
   request.onreadystatechange = updatePage;                                          // Устанавливается метод обратного вызова
   request.send(null);                                                               // Передача запроса
 }
 
 function updatePage() {
   if (request.readyState == 4) {
     if (request.status == 200) {
       var response = request.responseText.split("|");              // Обработка полученной строки
       document.getElementById("ajax-box").innerHTML = response[0]; // Вывод результата в контейнер с id=ajax-box       
   } else
       alert("status is " + request.status);
   }
 }
</script>

Для формирования ajax запроса, используется метод open() объекта XMLHttpRequest. Он может принимать 5 параметров open(request-type, url, asynch, username, password)

request-type тип передаваемого запрова (GET или POST)
url адрес файла с которым будет происходить соединение
asynch тип запроса (синхронный или асинхронный)
username логин (если нужна аутентификация)
password парось (если нужна аутентификация)

Передача запроса серверу осуществляется методом send(). Этот метод имеет один параметр - содержимое для передачи. Т.к. в этом примере все содержимое передается в url через get параметр, то в качестве параметра метода send передается null.

После того, как сервер выполнит запрос, он начинает искать свойство onreadystatechange объекта XMLHttpRequest. Данное свойство указывает метод обратного вызова. Т.е. указывает call-back функцию, которая будет выполнена после того, как сервер обработает запрос.

Функция updatePage() обрабатывает ответ сервера и работает с ним. Проверка if (request.readyState == 4) информирует о том, что сервер завершил свой ответ. Проверка if (request.status == 200) информирует о http состоянии (был указан корректный url, такой документ был на сервере, сервер его обработал и отослал данные, ожидаемые клиентом).

html

<div id="ajax-box" onClick="getCustomerInfo();">Submit</div>

php

Файл для обработки запроса на сервере ajax.php

В этом файле происходит получение ajax запроса, его обработка и формирование результата, который будет передан сервером браузеру клиента.

В данном примере к полученному запросу просто приписывается небольшая текстовая строка.

<?php
if ($_GET){
 echo ("Get param - " . $_GET[text]);
}
?>