Кафедра: АСОИиУ

Лабораторная работа

На тему: AJAX

Душанбе, 2009

Введение

Ajax - технология разработки Web-приложений, который использует код на машине клиента для изменения данных на Web-сервере. В результате Web-страницы динамически обновляются без перезагрузки полной страницы, прерывающей обмен данными. С помощью Ajax вы можете создавать более богатые, более динамические пользовательские интерфейсы для Web-приложений, которые приближаются по скорости и гибкости к приложениям, выполняющимся в клиентской части вашего кода.

Это два года назад AJAX был в диковинку (да и самого слова AJAX тогда ещё не выдумали). Теперь веб-приложения, страницы которых обновляются "на лету", в порядке вещей. Даже наоборот, без AJAX трудно и представить себе некоторые сервисы.

Как работали обычные веб-приложения? Как правило, на событие (клик по ссылке или нажатие на кнопку) браузер реагировал отправкой запроса серверу. Когда с сервера приходил ответ, всё содержимое страницы полностью обновлялось.

Одна из проблем состояла в том, что при обновлении содержимого страницы веб-приложение переходит в новое состояние. Из информации о предыдущем состоянии сохраняются только данные, переданные в запросе. Чем более точная информация о прежнем состоянии системы требуется, тем больше данных необходимо пересылать в запросе.

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

Современные браузеры, поддерживающие стандарты W3C DOM, позволяют вывести веб-приложение на новый уровень.

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

Веб-приложение получается распределенным, и часть логики находится на стороне клиента, а часть - на стороне сервера. Такие приложения и называют термином "AJAX Applications" (аббревиатура расшифровывается как Asynchronous Javascript And Xml Applications).

Объект XMLHTTPRequest

Для асинхронных запросов от клиента к серверу на стороне браузера служит специальный объект под названием XMLHTTPRequest.

Перечислим методы и свойства объекта, которые будут использованы далее:

XMLHTTPRequest. 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. ............