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