В листинге 3 вы видели getReadyStateHandler(), вызванный так: handlerFunction = getReadyStateHandler(req, updateCart). Функция, возвращаемая с помощью getReadyStateHandler(), в этом случае проверит, выполнен ли XMLHttpRequest в переменной req и затем вызовет функцию, называющуюся updateCart, с помощью запроса в формате XML.
Листинг 7 - собственно сам код updateCart(). Функция запрашивает XML-документ корзины покупателя, используя DOM-вызовы и обновляя Web-страницу (см. листинг 1) для того, чтобы показать новые элементы содержимого новой корзины. Обратите здесь внимание на вызовы, использованные для того, чтобы достать данные из XMLDOM. Атрибут generated элемента cart, созданный, когда Cart был сериализован в формате XML, проверяется, чтобы удостовериться, что более новые данные корзины не перезаписаны более старыми данными. Ajax-запросы по своей сути асинхронны, поэтому эта проверка предохраняет против ответов сервера, которые прибывают в беспорядке.
Листинг 7. Обновление страницы с отображением XML документа корзины
functionupdateCart(cartXML) {
// Получить корневой " cart" элемент из документа
varcart = 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++) {
varitem = 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-кода данную функциональность.
Как и во многих других технологиях, в Ajax есть множество способов сделать ошибки. Некоторые из проблем, которые я обсуждаю здесь, в данный момент имеют удачные и легкие решения, но могут быть улучшены в качестве Ajax-продуктов. Поскольку сообщество разработчиков дает опыт в разработке Ajax-приложений, лучшие практики и справочники будут записаны.
Одной из важных задач, встающих перед лицом Ajax-разработчиков, является вопрос, как ответить, когда XMLHttpRequest недоступен. В то время как большинство современных браузеров поддерживают XMLHttpRequest, всегда есть пользователи, у которых XMLHttpRequest не поддерживается или чья безопасность браузера не дала выполниться XMLHttpRequest. Если вы разрабатываете Web-приложение, которое применимо в корпоративной сети, вероятно, у вас есть преимущество в определении, какие браузеры поддерживаются и когда XMLHttpRequest всегда доступен. Если вы разрабатываете для публичной сети, то вы должны знать, что, предполагая, что XMLHttpRequest доступен, вы отрекаетесь от пользователей более старых браузеров, браузеров людей с закрытым доступом или легковесных браузеров с сервисом против выполнения вашего приложения.
Поэтому вам необходимо попытаться сделать ваше приложение с "изящным ухудшением", чтобы остаться функциональным даже в браузерах без поддержки XMLHttpRequest. В примере корзины покупателя лучший способ ухудшить приложение - кнопки Add to Cart, выполняющие обычную роль, обновляя страницу для нового статуса корзины. С помощью Ajax можно добавить в страницу через JavaScript-код, когда страница загружена, прикрепить оператор JavaScript к каждой кнопке Add to Cart, если только доступен XMLHttpRequest. Другой способ - определить XMLHttpRequest, когда пользователь вошел, и затем обеспечить любую Ajax версию приложения или версию, основанную на обычных формах, если понадобится.
Некоторые из задач функциональности в Ajax - достаточно общие. К примеру, может быть, важно позволить пользователям узнать, что их ввод зарегистрирован, поскольку обычный механизм обратной связи ("песочные часы" курсора и "крутящийся браузер") не применим для XMLHttpRequest. Выход - заменить кнопки Подтвердить сообщением "Обновляется…", чтобы пользователи не нажимали несколько раз на кнопки в ожидании запроса.
Другая задача состоит в том, что пользователи могут не заметить, что части страницы, которые они видят, уже обновлены. Вы можете решить эту проблему, используя множество визуальных техник и приемов, например, нарисовать глаз пользователя к обновленным местам страницы. Другие задачи, вызванные обновлением страницы при Ajax, включают в себя нерабочую кнопку возвращения обратно, некорректное отображение адреса или невозможность добавить в избранное. Смотрите секцию Ресурсы для статей, которые специализируются на задачах функциональности в Ajax-приложениях.
Выполнение Ajax-интерфейса в месте, где действуют обычные формы, может привести к тому, что неожиданно возрастет количество запросов к серверу. К примеру, обычный Google Web-поиск вызывает один запрос на сервер, когда пользователь нажимает кнопку поиска. Однако, Google Suggest, который пытается автоматически закончить ваше действие поиска, посылает несколько запросов к серверу, пока пользователь печатает. Когда вы разрабатываете Ajax-приложение, помните, сколько запросов вы отошлете серверу, и возникнет ли из-за этого перегрузка сервера. Вы можете уменьшить перегрузку сервера, храня запросы на стороне клиента и пряча запросы в клиенте, если это возможно. Вы можете также попытаться разработать Ajax-приложения так, чтобы большая часть действия могла быть выполнена в клиентской части вашего кода без необходимости соединения с сервером.
Очень важно понять, что нет гарантии, что XMLHttpRequest закончатся в той самой очередности, в которой они были отправлены. В самом деле, вам необходимо допустить, что они не вернутся так, и разработать ваше приложение с учетом этой поправки. В примере корзины покупателя время отметки последнего обновленного продукта раньше гарантировало, что более новые данные корзины не могут быть переписаны более старыми, (см. листинг 7). Этот недоработанный подход работает для сценария корзины покупателя, но может не выполняться в других сценариях.
Вы, должно быть, сейчас хорошо понимаете основные принципы программирования в Ajax и особенности компонент сервера и клиента, которые имеют место в Ajax. Это фундамент Ajax-приложения на языке Java. В добавление к сказанному вам следует понимать некоторые из задач разработки более высокого абстрактного уровня, которые появляются с техническими приемами в Ajax. Создание успешного Ajax-приложения потребует общего подхода, начиная с разработки интерфейсов с помощью JavaScript-кода и заканчивая архитектурой сервера, но вы теперь вооружены основными принципами программирования в Ajax, необходимыми для рассмотрения всех этих аспектов.
Очень хорошо, если вы чувствуете уныние из-за сложности написания больших Ajax-приложений с использованием приемов, продемонстрированных здесь. Такие структуры, как Struts, Spring и Hibernate, развиваются, разрабатывая мелкие детали Servlet API и JDBC, поэтому появляются средства для облегчения Ajax-разработки. Некоторые из них сфокусированы исключительно на проблемах клиентской стороны кода, находя легкие пути для добавления визуальных эффектов к вашим страницам или тщательно анализируя использование XMLHttpRequest. Некоторые идут дальше, разрабатывая средства для автоматической генерации Ajax-интерфейсов со стороны сервера. Эти структуры выполняют тяжелую работу за нас, поэтому вы можете сконцентрироваться на подходах более высокого уровня. Я рассмотрю некоторые из них в этой серии.
Сообщество Ajax быстро развивается, и здесь есть большое количество важной информации. Перед тем как читать следующую часть этой серии статей, я бы рекомендовал вам ознакомиться со статьями в секции Ресурсы, особенно если вы - "новичок" в Ajax или в разработке клиентской части кода. Также вам понадобится время разобраться с примером кода и подумать о способах его улучшения.
В следующей статье этой серии я рассмотрю XMLHttpRequest более детально и предложу способы создания XML сразу из вашего JavaBeans. Я также покажу вам альтернативы к XML для передачи Ajax-данных, такие как нотация JSON.