В начало. Обработка запроса сервлета

Обзор 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). Как показано в листинге 3, первое, что необходимо сделать addToCart(), - получить данные XMLHttpRequest с помощью вызова функции newXMLHttpRequest() из листинга 2. Следующим шагом он регистрирует функцию обратного вызова для получения ответа сервера, (я объясню это подробно позже, смотрите листинг 6).

Поскольку запрос изменит состояние на сервере, я буду пользоваться методом HTTP POST, чтобы это выполнить. Отправка данных методом POST выполняется в три шага. Во-первых, мне необходимо открыть соединение с источником сервера, с которым я соединяюсь, что в данном случае является сервлетом, занесенным в cart. do страницы. Далее я устанавливаю заголовок в XMLHttpRequest, говорящий о том, что содержимое запроса - закодированные данные. И, наконец, я посылаю запрос с закодированными данными в теле содержимого.

Листинг 3 показывает все эти шаги вместе.

Листинг 3. Посылаем XMLHttpRequest для кнопки Add to Cart

 

/*

* Добавляет продукт, определенный его кодом,

* в корзину покупателя

* itemCode - код продукта для добавления.

*/

function addToCart(itemCode) {

// Возвращает содержимое XMLHttpRequest

var req = newXMLHttpRequest();

// Оператор для получения сообщения обратного вызова

// из объекта запроса

var handlerFunction = getReadyStateHandler(req, updateCart);

req. onreadystatechange = handlerFunction;

// Открываем HTTP-соединение с помощью POST-метода к сервлету корзины покупателя.

// Третий параметр определяет, что запрос асинхронный.

req. open("POST", "cart. do", true);

// Определяет, что в содержимом запроса есть данные

req. setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

// Посылаем закодированные данные, говорящие о том, что я хочу добавить

// определенный продукт в корзину.

req. send("action=add&item="+itemCode);

}

 

После всего этого вы поняли первую часть в механизме Ajax - собственно создание и передача HTTP-запроса от клиента. Следующим шагом будет код сервлета на языке Java для обработки запроса.

 

В начало. Обработка запроса сервлета

 

Обработка XMLHttpRequest с помощью сервлета такая же, как и обработка обычного HTTP-запроса из браузера. Закодированные данные, отсылаемые в содержимом запроса POST, могут быть получены с помощью вызовов HttpServletRequest. getParameter(). Ajax запрашивает участие в HttpSession, такой же, как и в регулярных Web запросах из приложения. Это полезно для примера сценария корзины покупателя, поскольку позволяет мне заключить состояние пользовательской корзины покупателя в JavaBeans и удерживать это состояние во время сессии между двумя запросами.

Листинг 4 - часть простого сервлета, который обрабатывает Ajax запросы, чтобы обновить корзину покупателя. Cart получается из сессии пользователя и его состояние обновляется в соответствии с параметрами запроса. Cart затем сериализуется в XML-формате, а XML образуется в ServletResponse. Важно установить тип содержимого запроса в application/xml, в противном случае XMLHttpRequest не будет анализировать содержимое ответа.

Листинг 4. Код сервлета для обработки Ajax-запросов

 

public void doPost(HttpServletRequest req,

HttpServletResponse res)

throws java. io. IOException {

Cart cart = getCartFromSession(req);

String action = req. getParameter("action");

String item = req. getParameter("item");

if ((action! = null) &&(item! = null)) {

// Добавить или удалить продукт из Cart

if ("add". equals(action)) {

cart. addItem(item);

} else if ("remove". equals(action)) {

cart. removeItems(item);

}

}

// Сериализуем состояние Cart в XML-формате

String cartXml = cart. toXml();

// Записываем полученный XML в запрос.

res. setContentType("application/xml");

res. getWriter(). write(cartXml);

}

 

Листинг 5 показывает пример XML-кода, полученный с помощью метода Cart. toXml(). Сделать это достаточно просто. Запомните атрибут generated в cart элементе, который является временной меткой, полученной с помощью System. currentTimeMillis().

Листинг 5. Пример сериализации в XML-формате объекта Cart

 

<? xml version="1.0"? >

<cart generated="1123969988414" total="$171.95">

<item code="hat001">

<name>Hat</name>

<quantity>2</quantity>

</item>

<item code="cha001">

<name>Chair</name>

<quantity>1</quantity>

</item>

<item code="dog001">

<name>Dog</name>

<quantity>1</quantity>

</item>

</cart>

 

Если вы взглянете на Cart. java в источнике приложения, доступном в секции Загрузка, вы увидите, что XML получается просто с помощью соединения строк вместе. Примененный в примере, этот способ - зачастую самый худший способ получить XML из кода на языке Java. Я предложу приемы интереснее и лучше в следующей части этой серии.

Теперь вы знаете, что CartServlet запрашивается с помощью XMLHttpRequest. Следующим шагом будет возвращение к коду клиента, где вы можете увидеть, как ответ в XML-формате будет использоваться для обновления состояния страницы.