Привычная модель взаимодействия пользователя с веб-приложением подразумевает несколько неприятных моментов. Любой, кто заполнял формы на сайтах, сталкивался с тем, что после нажатия кнопки "Submit" приходится ждать ответа от сервера. Связано это с тем, что браузер работает по простой схеме запрос-ответ. Причем между запросом и ответом должно пройти время. К этому добавляется тот факт, что страница должна быть перезагружена.

Ajax позволяет избежать перезагрузок страницы. Объясняется это тем, что запросы к серверу производятся на заднем плане с помощью объекта языка Java Script, который называется XMLHTTPRequest. Таким образом, достигается асинхронность ("А" в акрониме) взаимодействия клиента и сервера. Остальные буквы акронима означают "Java Script And XML".

На самом деле этот объект был встроен в браузеры давно, но не использовался широко. После того как разработчики Google Mail применили его для реализации своего проекта, он стал использоваться достаточно широко.

Термин "Ajax" вошел в словарь разработчиков после публикации статьи Джеси Джеймса Гаррета "Ajax: Новый подход к веб-приложениям" (перевод|оригинал). В статье сформулированы не только новые принципы построения веб-интерфейсов, но и дан подробный список технологий, являющихся составными частями архитектуры. Список следующий:

XHTML и CSS
DOM
XML и XSLT
XMLHttpRequest
JavaScript
Рассмотрение основных методов и свойств объекта XMLHTTPRequest можно провести на примере. Рассмотрим следующий код (для удобства разбора строки примера пронумерованы):

index.html
1
2
3
4
26
27
28

Пример Ajax

29

30 onclick = getAjax('http://www.test.ru/test.txt','target')>
31

32
33
Amat victoria curam.


34


35
36


Помимо веб-страницы нам понадобится дополнительный текстовый файл, содержимое которого мы будем асинхронно догружать на тестовую страницу. Содержимое файла (назовем его test.txt) может быть следующим:

Ibi victoria, ubi concordia

Поставленная перед нами задача выглядит следующим образом. На загруженной странице будет находиться кнопка. После нажатия кнопки первоначальное содержимое слоя с именем target меняется на содержимое текстового файла. Читателю, знакомому с веб-технологиями, этот трюк (замена текста в слове) может показаться не очень-то оригинальным. Такое, в конце концов, можно проделать разными способами. Но суть нашего примера состоит в использовании объекта XMLHTTPRequest, что позволяет нам получить информацию с сервера без перезагрузки страницы.

Прежде чем подробно разобрать этот пример, следует обсудить некоторые технические подробности. Дело в том, что, будучи загруженным в браузер с локального диска, этот пример работать не будет. Для того чтобы правильно обработать этот пример, браузер должен получить документ с помощью веб-сервера. Неважно, установлен сервер у вас локально или же вы проверяете данный пример на удаленном сервере, но факт остается фактом, объект XMLHTTPRequest обращается к серверу по протоколу HTTP и привычный способ отладки веб-страниц путем запуска их напрямую (с жесткого диска) работать не будет.

Далее, как уже давно обещано, следует разбор исходного файла. Детально рассмотрены только те строки, которые имеют отношение к рассматриваемой теме.

Строка 5. Инициализация переменной XMLHTTPRequestObject.
В этой переменной будет храниться объект XMLHTTPRequest, который будет полностью инициализирован в следующих строках. Значение false присваивается этой переменной, на случай если браузер не поддерживает этот объект.

Строки 6-10. Создание объекта XMLHTTPRequest.
В этих строках происходит привычная любому веб-разработчику "война браузеров". В случае с браузерами семейства Internet Explorer необходимо создать объект ActiveX. В случае с остальными браузерами можно просто создать соответствующий объект.

Как видно из исходного кода страницы (строка 30), на кнопку формы "повешен" обработчик, который вызывает определенную пользователем функцию getAjax с двумя параметрами. Назначение функции и смысл параметров становятся ясными после разбора исходного текста функции.

Строки 11-24. Основная функция.
После того как объект XMLHTTPRequest создан, разработчик получает доступ к его методам и свойствам. За полным их перечнем, а также за различиями в реализациях для разных браузеров обращайтесь к специальной литературе (ссылки в конце статьи). Наш пример использует минимальный рабочий набор методов и свойств объекта XMLHTTPRequest.

В строке 12 происходит проверка того, был ли создан объект. Если нет (допустим, браузер его не поддерживает), то далее никаких действий не происходит. В случае если условие выполнилось, происходит обработка второго параметра, переданного функции. В нашем случае это инициализация переменной obj и помещение в нее (по имени) нашего рабочего слоя с целью в дальнейшем менять его свойства.

В строке 13 вызывается метод open, который формирует запрос к серверу. На самом деле число параметров этого метода гораздо больше, но мы используем минимальный набор. А именно метод протокола HTTP и URL необходимого нам документа.

В строке 14 используется свойство onreadystatechange, позволяющее следить за изменением статуса объекта, в то время когда он выполняет свою работу. Здесь создается анонимная функция, которая выполняет работу по проверке двух важных свойств объекта (стоки 17 и 18). Первое (readyState) может по результатам работы объекта содержать значения от 0 до 4 (4 означает, что запрос закончен). Второе(status) содержит код ответа сервера (200 означает, что документ существует). Подробности о возможных значениях этих свойств можно узнать в документации.

Если оба условия выполнены (строка 19), то значение свойства innerHTML, ранее определенного объекта obj, заменяется на значение, полученное с сервера (свойство responseText).

В строке 22 происходит собственно запрос. Значение передаваемого параметра null определено методом GET (строка 13). В случае использования метода, отличного от GET, вместо null следует использовать что-нибудь другое.

Надеюсь, читателю понятно, что этот простой пример вполне возможно расширить до работающего скрипта. Получать с сервера можно не только статические документы (это, на самом-то деле, не совсем интересно), но и результаты обработки какого-либо запроса. Или же (что является, собственно, основной целью работы объекта) получать данные в формате XML для дальнейшей обработки.



Карасев Сергей
Источник - http://www.datasvyazi.ru/stuff/articles/?rid=4&p=2