Crmgo Блог

AJAX. Основы.

← Блог

renisans

AJAX. Основы.

AJAX (аякс) - это web технология, позволяющая взаимодействовать с сервером без перезагрузки страницы. Примерами применения служат проверка имени пользователя на занятость при регистрации, отправка товара в корзину без перезагрузки, google suggest и т.д. AJAX базируется на объекте XMLHttpRequest. Как видно…

AJAX. Основы.

AJAX (аякс) - это web технология, позволяющая взаимодействовать с сервером без перезагрузки страницы. Примерами применения служат проверка имени пользователя на занятость при регистрации, отправка товара в корзину без перезагрузки, google suggest и т.д. AJAX базируется на объекте XMLHttpRequest. Как видно из названия он задумывался для работы с XML, что, впрочем, не мешает использовать его и в других целях.

Принцип работы следующий:
скрипт состоит из двух частей

  1. клиентская часть: исполняется на стороне клиента, пишется на JavaScript
  2. серверная часть: исполняется на сервере, может быть написана на любом языке программирования, понимающем GET/POST запросы

Этапы написания клиентской части:

  1. сбор и подготовка информации для отправки запроса на сервер;
  2. создание экземпляра объекта XMLHttpRequest;
  3. установка для него функции обработчика события onreadystatechange. Это событие наступает при каждой смене состояния объекта XMLHttpRequest (см. таблицу внизу). Данная функция по сути является основной частью скрипта, поскольку именно в ней происходит обработка ответа сервера;
  4. открытие соединения с указанием типа запроса (GET или POST), URL серверной части, флага асинхронного режима и имени и пароля пользователя (если необходимо);
  5. непосредственно отправка запроса;
  6. обработка ответа серверной части.

Создание объекта XMLHttpRequest отличается для Internet Explorer и других обозревателей, поэтому для совместимости эту операцию приходиться дублировать разными способами:

01var req;
02
03if (window.XMLHttpRequest)  // normal browser
04req = new XMLHttpRequest();  
05else if (window.ActiveXObject) {    //IE
06try {
07req = new ActiveXObject('Msxml2.XMLHTTP');  // IE разных версий
08} catch (e){}                                   // может создавать
09try {                                           // объект по разному
10req = new ActiveXObject('Microsoft.XMLHTTP');
11} catch (e){}
12}

Использование метода GET, установка обработчика события onreadystatechange и отправка запроса:

1req.open("GET", url, true);
2req.onreadystatechange = function() {
3if (req.readyState == 4)  { обработка результатов }       
4}; 
5req.send(null); //отправка запроса без параметров, т.к. они установлены в url     

В обработчике события onreadystatechange необходимо обязательно проверить условие req.readyState == 4, которое говорит о том, что данные загружены. Дополнительно можно также проверять req.status == 200. См. таблицы ниже.

При использование объекта XMLHttpRequest с методом POST требуется дополнительно отправлять header:

1req.open("POST", url, true);
2req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3req.onreadystatechange = function() {
4if (req.readyState == 4)  { обработка результатов }       
5};     
6req.send('param1=1¶m2=0'); //теперь параметры передаются здесь

Несколько параметров разделяются амперсандами.

Полный пример:

01var req;
02
03if (window.XMLHttpRequest) req = new XMLHttpRequest();
04else if (window.ActiveXObject) {
05try {
06req = new ActiveXObject('Msxml2.XMLHTTP');
07} catch (e){}
08try {
09req = new ActiveXObject('Microsoft.XMLHTTP');
10} catch (e){}
11}
12
13if (req) {
14req.onreadystatechange = function() {
15if (req.readyState == 4 && req.status == 200)  { alert(req.responseText); }       
16}; 
17req.open("POST", 'xmlhttp.php', true);
18req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
19req.send('param=1&ajax=1');
20}
21else alert("Браузер не поддерживает AJAX");

Серверная часть (url в req.open) может быть написана на чем угодно, лишь бы понимала запросы GET/POST. Возращаемое значение (req.responseText) формируется стандартным выводом. Пример серверной части на php:

1if(isset($_POST['param']))
2echo ($_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» и т. д.)

Примечание: материал мог быть создан с помощью ИИ и затем отредактирован человеком. Ответственный: Dmytro Lomaka, Kaltenkirchen.

Рубрики: AJAX