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

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

На тему: Создание приложений на AJAX

Душанбе, 2009

Обзор Ajax

Использование Ajax начинается с JavaScript-объекта, называемого XMLHttpRequest. Как и предполагает имя, он позволяет в клиентской части вашего кода выполнять HTTP-запросы и анализирует ответ XML-сервера. Первый шаг в изучении Ajax - создание данных объекта XMLHttpRequest. Метод протокола HTTP при использовании для запроса (GET или POST) и пути затем устанавливаются в объекте XMLHttpRequest.

Теперь вспомните, почему "а" в слове Ajax обозначает "асинхронный"? Когда вы посылаете HTTP-запрос, вы не хотите, чтобы браузер повис, ожидая ответа сервера. Вместо этого вы хотите также реагировать на действие пользователя на странице и работать с ответом сервера, когда тот в конечном итоге придет. Чтобы выполнить это, вам нужно зарегистрировать функцию обратного вызова с помощью XMLHttpRequest и послать асинхронно запрос XMLHttpRequest. Контроль останется за браузером, а функция обратного вызова будет вызвана, когда придет ответ сервера.

На Web-сервере запрос придет так же, как и любой другой HttpServletRequest. После анализа параметров запроса, сервлет выполнит все необходимые действия для приложения, сериализует его запрос в формате XML и вписывает его в HttpServletResponse.

Возвращаясь к клиенту, функция обратного вызова, зарегистрированная в XMLHttpRequest, теперь выполняется для того, чтобы обработать XML-документ, возвращаемый сервером. Наконец, пользовательский интерфейс обновляется в соответствии с данными сервера, используя JavaScript-код для преобразования страницы. Рисунок 1 - диаграмма последовательности изучения Ajax.

Рисунок 1. Обзор Ajax

Я начну с самого начала: создание XMLHttpRequest и отправка его из браузера. К сожалению, метод создания XMLHttpRequest отличается от браузера к браузеру. Функция в JavaScript в листинге 2 сглаживает эти трудности разных браузеров, определяя корректный подход для данного браузера и возвращая XMLHttpRequest готовым к использованию. Лучше всего думать об этом как о коде-шаблоне: простое копирование его в вашу библиотеку JavaScript и его использование, когда вам понадобится XMLHttpRequest.

Листинг 2. Создание XMLHttpRequest для разных браузеров

/*

* Возвращает новый XMLHttpRequest объект или false, если браузер его не поддерживает

*/

function newXMLHttpRequest() {

var xmlreq = false;

if (window. XMLHttpRequest) {

// Создадим XMLHttpRequest объект для не-Microsoft браузеров

xmlreq = new XMLHttpRequest();

} else if (window. ActiveXObject) {

// Создадим XMLHttpRequest с помощью MS ActiveX

try {

// Попробуем создать XMLHttpRequest для поздних версий

// Internet Explorer

xmlreq = new ActiveXObject("Msxml2. XMLHTTP");

} catch (e1) {

// Не удалось создать требуемый ActiveXObject

try {

// Пробуем вариант, который поддержат более старые версии

// Internet Explorer

xmlreq = new ActiveXObject("Microsoft. XMLHTTP");

} catch (e2) {

// Не в состоянии создать XMLHttpRequest с помощью ActiveX

}

}

}

return xmlreq;

}

Позже мы обсудим технические приемы для браузеров, которые не поддерживают XMLHttpRequest. А сейчас примеры предполагают, что функция newXMLHttpRequest из листинга 2 всегда возвращает значение XMLHttpRequest.

Возвращаясь обратно к сценарию примера корзины покупателя, я бы хотел воспользоваться Ajax для случаев, когда пользователь нажимает Add to Cart кнопку для каталога продуктов. Оператор onclick, вызванный addToCart(), ответственен за обновление состояния корзины в Ajax-вызове (см. листинг 1). ............