AJAX (аякс) - это web технология, позволяющая взаимодействовать с сервером без перезагрузки страницы. Примерами применения служат проверка имени пользователя на занятость при регистрации, отправка товара в корзину без перезагрузки, google suggest и т.д. AJAX базируется на объекте XMLHttpRequest. Как видно из названия он задумывался для работы с XML, что, впрочем, не мешает использовать его и в других целях.
Принцип работы следующий:
скрипт состоит из двух частей
клиентская часть: исполняется на стороне клиента, пишется на JavaScript
серверная часть: исполняется на сервере, может быть написана на любом языке программирования, понимающем GET/POST запросы
Этапы написания клиентской части:
сбор и подготовка информации для отправки запроса на сервер;
создание экземпляра объекта XMLHttpRequest;
установка для него функции обработчика события onreadystatechange. Это событие наступает при каждой смене состояния объекта XMLHttpRequest (см. таблицу внизу). Данная функция по сути является основной частью скрипта, поскольку именно в ней происходит обработка ответа сервера;
открытие соединения с указанием типа запроса (GET или POST), URL серверной части, флага асинхронного режима и имени и пароля пользователя (если необходимо);
непосредственно отправка запроса;
обработка ответа серверной части.
Создание объекта XMLHttpRequest отличается для Internet Explorer и других обозревателей, поэтому для совместимости эту операцию приходиться дублировать разными способами:
var req;
if (window.XMLHttpRequest) // normal browser
req = new XMLHttpRequest();
else if (window.ActiveXObject) { //IE
try {
req = new ActiveXObject('Msxml2.XMLHTTP'); // IE разных версий
} catch (e){} // может создавать
try { // объект по разному
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
Использование метода GET, установка обработчика события onreadystatechange и отправка запроса:
req.open("GET", url, true);
req.onreadystatechange = function() {
if (req.readyState == 4) { обработка результатов }
};
req.send(null); //отправка запроса без параметров, т.к. они установлены в url
В обработчике события onreadystatechange необходимо обязательно проверить условие req.readyState == 4, которое говорит о том, что данные загружены. Дополнительно можно также проверять req.status == 200. См. таблицы ниже.
При использование объекта XMLHttpRequest с методом POST требуется дополнительно отправлять header:
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if (req.readyState == 4) { обработка результатов }
};
req.send('param1=1¶m2=0'); //теперь параметры передаются здесь
Несколько параметров разделяются амперсандами.
Полный пример:
var req;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){}
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) { alert(req.responseText); }
};
req.open("POST", 'xmlhttp.php', true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send('param=1&ajax=1');
}
else alert("Браузер не поддерживает AJAX");
Серверная часть (url в req.open) может быть написана на чем угодно, лишь бы понимала запросы GET/POST. Возращаемое значение (req.responseText) формируется стандартным выводом. Пример серверной части на php:
if(isset($_POST['param']))
echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";
Немного справочных материалов:
Методы класса XMLHttpRequest
abort() отменяет текущий запрос
getAllResponseHeaders() возвращает полный список HTTP-заголовков в виде строки
getResponseHeader(headerName) возвращает значение указанного заголовка
open(method, URL, async, userName, password) определяет метод, URL и другие опциональные параметры запроса;
параметр async определяет, происходит ли работа в асинхронном режиме
send(content) отправляет запрос на сервер
setRequestHeader(label, value) добавляет HTTP-заголовок к запросу
overrideMimeType(mimeType) позволяет указать mime-type документа, если сервер его не передал или передал неправильно.
Внимание: метод отсутствует в Internet Explorer!
Свойства класса XMLHttpRequest
onreadystatechange обработчик события, которое происходит при каждой смене состояния объекта
readyState возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
responseText текст ответа на запрос
responseXML текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM
status возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusText возвращает статус в виде строки («Not Found», «OK» и т. д.)