AJAX — технологія асинхронного оновлення Веб-сторінок

Технологія Ajax і сайти в концепції Web 2.0

Додати до моєї бази знань

AJAX  Веб-програмування  RIA  JavaScript  Мережа Internet Компетенція Використання AJAX

Вступ

AJAX (Asynchronous JavaScript And XML) — підхід до побудови користувацьких інтерфейсів веб-застосунків, де веб-сторінка не перезавантажується, а у фоновому режимі відправляє запити на сервер і довантажує необхідні користувачу дані.

Про AJAX заговорили після появи в лютому 2005-го року статті Джесі Джеймса Гарретта (Jesse James Garrett) «Новий підхід до веб-застосунків». AJAX — не самостійна технологія. Це ідея.

1. Історія

Вперше термін AJAX був публічно використаний 18 лютого 2005 у статті Джесі Джеймса Гарретта (Jesse James Garrett) «Новий підхід до веб-застосувань». Гарретт придумав термін, коли йому довелося якось назвати новий набір технологій, пропонований ним клієнту.

Проте в тій чи іншій формі багато технології були доступні і використовувалися набагато раніше, наприклад в підході «Remote Scripting», запропонованим компанією Microsoft в 1998, або з використанням HTML елемента IFRAME, що з'явився в Internet Explorer 3 в 1996.

AJAX став особливо популярним після використання його компанією Google в сервісах Gmail, Google Maps і Google Suggest. Однак патентну заявку, що охоплюють цей тип користувальницького інтерфейсу, було подано 3 вересня 2003, таким чином, що передували сам термін на два роки. Ця заява в США патент № 7523401 видається на Greg Олдрідж з Кокомо, В [8].

На 5 квітня 2006 World Wide Web Consortium (W3C) опублікував першу чернетку специфікації для об'єкта, в спробі створити офіційний стандарт мережі [7].

2. Ідеологія

Проблема синхронності Web 1.0.

Асинхронність Web 2.0.

Приклади Ajax-застосунків

Google Suggest – підказки в рядку пошукового запиту.  Яндекс повторив досвід. Google Maps – інтерактивні карти. А особливо Gmail – інтерактивний інтерфейс для пошти. Facebook, VKontakte і т.п. активно використовують Ajax.

3. Технології

Термін Ajax представляє широку групу веб-технологій, які можуть бути використані для реалізації веб-додатків, які взаємодіють із сервером у фоновому режимі, не заважаючи поточному стану на цій сторінці. У статті Джессі Джеймса Гарретта, винахідника терміну Ajax, зазначено, що для реалізації необхідні наступні технології:

• HTML або XHTML і CSS для представлення об'єктної моделі документа для динамічного відображення і взаємодії з даними на сторінці
• XML для обміну даними, і XSLT для маніпуляцій з ними (на справді не обов’язково; часто використовуються: звичайний текст, HTML-текст, JSON та JavaScript-код )
• XMLHttpRequest –об'єкт для асинхронного зв'язку (або IFRAME чи динамічний тег <script>)
• JavaScript, щоб звести ці технології разом

4. Переваги технології

Ключовою перевагою є інтерактивність веб-інтерфейсу. Інші переваги, такі як зменшення трафіку, навантаження на сервер будуть залежати від безпосередньої реалізації проекту. 

5. Проблеми технології Ajax

• Відсутність інтеграції із стандартними користувацькими інструментами браузера
  • Кнопка “Назад”
  • Закладки
  • Вирішується за рахунок міток # в URL
• Проблема індексації пошуковими системами
• Ускладнення проекту

6. Ajax на практиці: об’єкт XMLHttpRequestі його використання

XMLHttpRequest— API запиту веб-клієнта (браузера) до веб-сервера за протоколом HTTP у фоновому режимі, для мовипрограмування JavaScript і подібних. Використовується для синхронного або асинхронного обміну інформацією в довільному текстовому форматі, зокрема в форматах XML або JSON. Дозволяє здійснювати HTTP-запити до віддаленого сервера без потреби перезавантажувати сторінку. Застосування XMLHttpRequest справляє враження «миттєвої» відповіді сервера, у порівнянні з класичними методом перезавантаження всієї сторінки для оновлення представленої на ній інформації.

Історія

Вперше був реалізований компанією Microsoft, з'явившись в Internet Explorer 5.0 у вигляді об'єкту ActiveX, доступного через JavaScript, JScript, VBScript — скриптові мови, що підтримуються браузером. Програмісти проекту Mozilla потім розробили сумісну версію, під назвою XMLHttpRequest, в Mozilla 1.0. XMLHttpRequest є повноцінним об'єктом JavaScript. Надалі ця можливість також була реалізована компаніями Apple починаючи з Safari 1.2, спорідненим браузером Konqueror, компанією Opera Software починаючи з Opera 8.01, і ймовірно іншими.

Оригінальний XMLHttpRequest в IE5 та IE6 є об'єктом ActiveX, а не звичайним JavaScript-об’єктом. Починаючи з IE7 Microsoft теж почав дотримуватися рекомендованої W3C реалізації об’єкта.

Ключові методи класу XMLHttpRequest

Властивості класу XMLHttpRequest

Використання XMLHttpRequest

План роботи з об'єктом XMLHttpRequest можна представити наступним чином:

1. Створення екземпляра об'єкту XMLHttpRequest
2. Установка для нього обробника події onreadystatechange
3. Відкриття з'єднання з вказівкою типу запиту, URL і інших параметрів.
4. Безпосередньо відправка запиту.

JavaScript-код. Спрощений код створення об’єкта:

functiongetXhr(){      

var xhr = newXMLHttpRequest();

return xhr;

} 

Установка обробника зміни стану

 xhr.onreadystatechange= processReqChange; 

Або через замикання:

 xhr.onreadystatechange= function(){
   if(xhr.readyState== 4)
   …
} 

Зауважте, тут в тілі функції використовується ім’я відповідного об’єкта. Область видимості функції за рахунок замикання збереже правильну вказівку на даний об’єкт xhr. 

Формування та відправка запиту

 xhr.open("GET", "handler.php?arg=Test",true);

xhr.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");// засіб від кешу

xhr.send(null);  

Посилання запитів через GET і POST:

GET:

 xhr.onreadystatechange = processReqChange;

xhr.open("GET", url+"?param1=value1&param2=value2", true);

// втсановлення HTTP-заголовку для заборони кешування GET-запиту

xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

xhr.send(null);
 

POST:

xhr.onreadystatechange = processReqChange;

xhr.open("POST", url, true);

//втсановлення HTTP-заголовку для відсилання даних через POST

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   

xhr.send("param1="+encodeURIComponent(str1)+"&param2="+encodeURIComponent(str2));
 

Обробник зміни стану об’єкта:

 functionprocessReqChange()

{

    // Тільки в стані "complete"

    if(xhr.readyState== 4){

        // для статуса "OK"

        if(xhr.status== 200){

            // Якщо 200 - робимо потрібні дії        

           … //!!! Основне

           el=document.getElementById('answer');

           el.innerHTML=xhr.responseText;

        }else{

     //(404 - не знайдено)

            alert("Не вдалось одержати дані:\n"+

                xhr.statusText);

        }

    }

}

HTML-файл:

… <html>

<head> …

<script>

function getXhr(){

….

}

var xhr=getXhr();

function doReq1(){

…

}

function onReq1(){

…

}

</script>

</head>

<body>

<button onClick=”doReq1()”>Go!</button>

…

</body></html>

Серверна частина (PHP-файл):

 //handler.php

     // …

echo "<p>Ajax argument:<strong>"._REQUEST["arg"]."!</strong></p>";

     // …

Додаток

Функція для кросбраузерного створення об’єкта XMLHttpRequest

 function getXHR()

{

  // will store the reference to the XMLHttpRequest object

  var xmlHttp;

  // this should work for all browsers except IE6 and older

  try

  {

    // try to create XMLHttpRequest object

    xmlHttp = new XMLHttpRequest();

  }

  catch(e)

  {

    // assume IE6 or older

    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",

                                    "MSXML2.XMLHTTP.5.0",

                                    "MSXML2.XMLHTTP.4.0",

                                    "MSXML2.XMLHTTP.3.0",

                                    "MSXML2.XMLHTTP",

                                    "Microsoft.XMLHTTP");

    // try every prog id until one works

    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)

    {

      try

      {

        // try to create XMLHttpRequest object

        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);

      }

      catch (e) {}

    }

  }

  // return the created object or display an error message

  if (!xmlHttp)

    alert("Error creating the XMLHttpRequest object.");

  else

    return xmlHttp;

}

Прпктичне завдання на використання Ajax:

•   Простий приклад: Обробка події – клік… - підвантаження простої фрази з деякого файлу – через GET і через POST.
• Застосувати кросбраузерне створення XMLHttpRequest
• Реалізувати прототип чату: через певний проміжок (setInterval) часу відвантажувати деякий ТХТ з серверу. (файл можемо змінювати і дивитись результат роботи). (Завантажувати можна в PRE …)
• Реалізувати асинхронне завантаження контенту – клікаєте на елемент меню – без перевантаження змінюється контент.
• …Інші варіанти на видумку.

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

AJAX

Веб-програмування

RIA

JavaScript

Мережа Internet

Головний розділ

AJAX — технологія асинхронного оновлення Веб-сторінок