Запрос, обрабатывающийся с помощью JavaScript

readyState свойство XMLHttpRequest - числовое значение, которое определяет статус цикла запроса. Оно изменяется от 0 для "неопределенного" и до 4 для "завершенного". Каждый раз, когда меняется readyState, появляется событие readystatechange и вызывается с помощью onreadystatechange свойства оператор.

В листинге 3 вы увидели, как вызывалась функция getReadyStateHandler() для создания оператора. Этот оператор затем приписывается свойству onreadystatechange. getReadyStateHandler() использовал тот факт, что функции - объекты первого класса в JavaScript. Это обозначает, что функции могут быть параметрами к другим функциям и могут также создавать и возвращать значения других функций. Обязанности getReadyStateHandler() - возвращать значение функции, которая проверяет, завершился ли XMLHttpRequest и был отослан ли ответ в XML-формате в оператор, определенный вызовом. Листинг 6 - код для getReadyStateHandler().

Листинг 6. Функция getReadyStateHandler(). /*

* Возвращает функцию, которая ожидает, чтобы закончился

* определенный XMLHttpRequest, затем передает его ответ в XML-формате

|-------10--------20--------30--------40--------50--------60--------70--------80--------9|

|------ - XML error: The previous line is longer than the max of 90 characters - --------|

* заданному оператору * req - это XMLHttpRequest, чье состояние изменяется

|-------10--------20--------30--------40--------50--------60--------70--------80--------9|

|------ - XML error: The previous line is longer than the max of 90 characters - --------|

* responseXmlHandler - функция, передаваемая запрос XML

*/

function getReadyStateHandler(req, responseXmlHandler) {

// Возвращает неопределенную функцию, которая считывает

// данные XMLHttpRequest return function () {

// Если требуется статус "закончен"

if (req. readyState == 4) {

// Проверяем, пришел ли успешный ответ сервера

if (req. status == 200) {

// Передает XML оператору

responseXmlHandler(req. responseXML);

} else {

// Возникла ошибка HTTP

alert("HTTP error: "+req. status);

}

}

}

}

О getReadyStateHandler()

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

В листинге 3 вы видели getReadyStateHandler(), вызванный так: handlerFunction = getReadyStateHandler(req, updateCart). Функция, возвращаемая с помощью getReadyStateHandler(), в этом случае проверит, выполнен ли XMLHttpRequest в переменной req и затем вызовет функцию, называющуюся updateCart, с помощью запроса в формате XML.

Данные корзины

Листинг 7 - собственно сам код updateCart(). Функция запрашивает XML-документ корзины покупателя, используя DOM-вызовы и обновляя Web-страницу (см. листинг 1) для того, чтобы показать новые элементы содержимого новой корзины. Обратите здесь внимание на вызовы, использованные для того, чтобы достать данные из XML DOM. Атрибут generated элемента cart, созданный, когда Cart был сериализован в формате XML, проверяется, чтобы удостовериться, что более новые данные корзины не перезаписаны более старыми данными. Ajax-запросы по своей сути асинхронны, поэтому эта проверка предохраняет против ответов сервера, которые прибывают в беспорядке.

Листинг 7. Обновление страницы с отображением XML документа корзины

function updateCart(cartXML) {

// Получить корневой " cart" элемент из документа

var cart = cartXML. getElementsByTagName("cart") [0] ;

// Проверим, что более ранний документ корзины не был обработан еще

var generated = cart. getAttribute("generated");

if (generated > lastCartUpdate) {

lastCartUpdate = generated;

// Очистим список HTML, необходимый для отображения содержимого корзины

var contents = document. getElementById("cart-contents");

contents. innerHTML = "";

// Соединяем продукты в корзине

var items = cart. getElementsByTagName("item");

for (var I = 0; I < items. length; I++) {

var item = items [I] ;

// Достаем ключевые понятия из имени и элементов количества

var name = item. getElementsByTagName("name") [0]

. firstChild. nodeValue;

var quantity = item. getElementsByTagName("quantity") [0]

. firstChild. nodeValue;

// Создаем и добавляем список продуктов, HTML элемент для этого продукта

var li = document. createElement("li");

li. appendChild(document. createTextNode(name+" x "+quantity));

contents. appendChild(li);

}

}

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

document. getElementById("total"). innerHTML =

cart. getAttribute("total");

}

После того, что мы проделали, путешествие в Ajax закончено, хотя вы могли бы захотеть получить Web-приложения и увидеть их в действии (смотрите секцию Загрузка). Пример очень прост, многие строки в нем еще можно улучшить. К примеру, я включил код сервера, чтобы убрать продукты из корзины, но не сделал доступ к ним из интерфейса. Для вас будет хорошим упражнением попытаться построить в приложении существующего JavaScript-кода данную функциональность.