Лабораторная работа: Создание приложений на AJAX

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

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

Поэтому вам необходимо попытаться сделать ваше приложение с "изящным ухудшением", чтобы остаться функциональным даже в браузерах без поддержки XMLHttpRequest. В примере корзины покупателя лучший способ ухудшить приложение - кнопки Add to Cart, выполняющие обычную роль, обновляя страницу для нового статуса корзины. С помощью Ajax можно добавить в страницу через JavaScript-код, когда страница загружена, прикрепить оператор JavaScript к каждой кнопке Add to Cart, если только доступен XMLHttpRequest. Другой способ - определить XMLHttpRequest, когда пользователь вошел, и затем обеспечить любую Ajax версию приложения или версию, основанную на обычных формах, если понадобится.

Относительно функциональности (usability)

Некоторые из задач функциональности в Ajax - достаточно общие. К примеру, может быть, важно позволить пользователям узнать, что их ввод зарегистрирован, поскольку обычный механизм обратной связи ("песочные часы" курсора и "крутящийся браузер") не применим для XMLHttpRequest. Выход - заменить кнопки Подтвердить сообщением "Обновляется…", чтобы пользователи не нажимали несколько раз на кнопки в ожидании запроса.

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

Перегрузка сервера

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

Разбираясь с асинхронностью

Очень важно понять, что нет гарантии, что XMLHttpRequest закончатся в той самой очередности, в которой они были отправлены. В самом деле, вам необходимо допустить, что они не вернутся так, и разработать ваше приложение с учетом этой поправки. В примере корзины покупателя время отметки последнего обновленного продукта раньше гарантировало, что более новые данные корзины не могут быть переписаны более старыми, (см. листинг 7). Этот недоработанный подход работает для сценария корзины покупателя, но может не выполняться в других сценариях.

Заключение