Це два роки тому AJAX був у дивину (та й самого
слова AJAX тоді ще не вигадали). Тепер веб-приложения, сторінки яких
оновлювалися на льоту, в порядку речей. Навіть навпаки: без AJAX важко
уявити собі деякі сервіси.
Як працювали звичайні веб-додатки? Як правило, на
подія (клік по посиланню або натискання на кнопку) браузер реагував відправленням
запиту серверу. Коли із сервера приходив відповідь, весь вміст сторінки
повністю оновлювалися.
Одна з проблем полягала в тому, що при оновленні
вмісту сторінки веб-додаток переходить в новий стан. З інформації
про попередньому стані зберігаються лише дані, передані в запиті. Чим
більш точна інформація про колишньому стані системи потрібно, тим більше
даних необхідно пересилати у запиті.
Іншим недоліком є необхідність пересилати
повторювані масиви даних клієнтові після кожної події. Наприклад, якщо
користувач помилився при заповненні форми, то замість короткого повідомлення про
помилку доводиться знову завантажувати і форму, і всю введену раніше інформації.
Браузери, що підтримують стандарти W3C
DOM, дозволяють вивести веб-додаток на новий рівень.
Схема взаємодії залишається майже такою ж. Ось
тільки відправляє запит і отримує відповідь з сервера тепер скрипт на стороні
клієнта, а замість оновлення всієї сторінки - оновлюється лише її частина
(замість оновлення можуть робитися інші дії, наприклад, відправлятися
наступний запит).
Веб-додаток виходить розподіленим, і частина
логіки знаходиться на стороні клієнта, а частина - на стороні сервера. Такі
програми і називають терміном "AJAX Applications" (абревіатура
розшифровується як Asynchronous Javascript And Xml Applications).
Докладніше про AJAX можна прочитати тут
AJAX programming (Wikipedia)
Технологія, яка переверне веб
Об'єкт XMLHTTPRequest
Для асинхронних запитів від клієнта до сервера на
стороні браузера служить спеціальний об'єкт під назвою XMLHTTPRequest.
Перерахуємо методи і властивості об'єкта, які будуть
використані далі:
LHTTPRequest.open ( "method", "URL",
async, "uname", "pswd") - створює запит до сервера.
method - тип запиту, наприклад, GET
URL - URL запиту, наприклад http://localhost/file.xml
async - якщо True, то буде використовуватися асинхронний
запит, тобто виконання скрипта продовжиться після відправлення запиту. У
противному випадку скрипт буде чекати відповіді від сервера, заморозивши UI.
uname, pswd - логін та пароль для простої
веб-авторизації.
XMLHTTPRequest.send ( "content") - відправляє
запит на сервер. Значним content можуть бути дані для POST-запиту або
порожній рядок.
XMLHTTPRequest.onreadystatechange - оброблювач подій
спрацьовує на кожну зміну стану об'єкта. Стану об'єкта можуть
бути наступними:
0 - до того, як запит надіслано (uninitialized)
1 - об'єкт ініціалізований (loading)
2 - отримано відповіді від сервера (loaded)
3 - з'єднання з сервером активно (interactive)
4 - об'єкт завершив роботу (complete)
XMLHTTPRequest.responseText - повертає отримані від
сервера дані у вигляді рядка.
XMLHTTPRequest.responseXML - якщо відповідь сервера прийшов
у вигляді правильного XML, повертає XML DOM об'єкт.
XMLHTTPRequest.status - повертає статус HTTP-відповіді
у вигляді числа. Наприклад, 404 якщо запитувана сторінка не була знайдена на
сервер.
Розглянемо застосування об'єкта на прикладі простого
AJAX-додатки.
Поле SELECT з пошуком
Припустимо у нас є таблиця, в якій порядку
мільйона записів. Користувачеві необхідно вибрати лише одну запис з таблиці
(реалізація відносини "один до багатьох"). Вибір користувача є
всього лише одним з етапів заповнення великий веб-форми.
Природно, для того, щоб користувач міг вибрати
потрібний запис з мільйона, потрібні якісь кошти пошуку цієї самої запису.
Наприклад, простий текстовий пошук по найменуванню.
У традиційному веб-додатку для цієї мети довелося
б використовувати окрему сторінку і зберігати інші дані форми у сесії
користувача, або розбивати процес заповнення форми на кілька етапів. У
AJAX-додатку додаткова сторінка не потрібна.
Вибір запису буде реалізований з допомогою двох елементів
веб-форми. Перший елемент - це текстове поле, де користувач вводить
ключове слово. Воно надсилається на сервер, а той повертає лише ті рядки з
таблиці, які задовольняють умові пошуку. Відповідь сервера (у вигляді списку)
поміщається в поле SELECT, в якому користувач і зробить остаточний вибір.
Таким чином, при відправленні всієї форми на сервер потрапить вибране у полі
SELECT значення у вигляді ID записи з великої таблиці.
