Технология AJAX

Лабораторная работа №8. Технология AJAX
(4 часа)

Цель работы:

Получить практические навыки в использовании технологии AJAX.

Задание (типовое):

Во всех вариантах заданий необходимо разработать скрипт, использующий возможности технологии AJAX.

Создать документ с двумя раскрывающимися списками. Перечень вариантов в первом раскрывающемся списке разметить с помощью языка разметки гипертекста HTML. Выбор варианта в первом раскрывающемся списке определяет тот или иной набор вариантов для выбора во втором раскрывающемся списке. Варианты для выбора во втором раскрывающемся списке должны быть сформированы с использованием технологии AJAX. Итоговые результаты выбора в обоих раскрывающихся списках обрабатываются серверным скриптом и отображаются на клиентской стороне.

При выполнении лабораторной работы возможно применение функций библиотеки jQuery для использования возможностей технологии AJAX.

Порядок выполнения лабораторной работы:

1.        Разметить html-документ.

2.        Написать скрипт с использованием технологии AJAX.

3.        Протестировать созданный скрипт.

Содержание отчета (отчет в электронном виде):

-       отчет сохранить в файле с именем АВТ-000 Иванов (лр8).doc;

-       титульный лист (образец можно скачать по адресу http://ermak.cs.nstu.ru/webprog/wp_labwork_title_page.doc);

-       цель работы;

-       задание;

-       порядок выполнения лабораторной работы

-       исходный код скрипта;

-       выводы по работе.

Теоретические сведения

AJAX (Asynchronous JavaScript and XML) — новый подход к построению интерактивных пользовательских интерфейсов web-приложений, заключающийся в «фоновом» обмене данными браузера с web-сервером

В результате при обновлении данных документ не перезагружается полностью и web-приложения могут быть сделаны более быстрыми и удобными.

AJAX не самостоятельная технология, а концепция использования нескольких смежных технологий: технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью и DHTML для динамического изменения содержимого документа.

AJAX — аббревиатура, обозначающая подход к созданию web-приложений с помощью следующих технологий: стандартизированное представление силами HTML и CSS, динамическое отображение и взаимодействие с пользователем с помощью DOM, обмен и обработка данных в виде XML, асинхронные запросы с помощью объекта XMLHttpRequest, использование JavaScript.

Впервые термин AJAX появился в феврале 2005 года, когда пришлось как-то назвать новый набор технологий, предлагаемый клиенту.

Плюсы технологии: экономия трафика (использование AJAX позволяет значительно сократить трафик при работе с web-приложением, благодаря тому, что часто вместо загрузки всей страницы достаточно загрузить только небольшую изменившуюся часть), уменьшение нагрузки на сервер (AJAX позволяет несколько снизить нагрузку на сервер, к примеру, в Gmail, когда помечаются прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции, вместо необходимости повторно создавать страницу и отсылать ее клиенту), увеличение реакции интерфейса (поскольку нужно загрузить только изменившуюся часть, то пользователь видит результат своих действий быстрее).

Минусы технологии: интеграция со стандартными инструментами браузера (динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам), другой недостаток изменения контента страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры, динамически загружаемое содержание недоступно поисковикам (поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта), старые методы учета статистики сайтов становятся неактуальными (многие сервисы статистики ведут учет просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность).

В стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML

В AJAX-приложении между пользователем и сервером появляется еще один посредник — движок AJAX. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер.

Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает лишь те данные, которые нужны клиенту, а HTML-разметку из них прямо в браузере формирует движок AJAX.

Асинхронность проявляется в том, что далеко не каждый щелчок пользователя доходит до сервера, причем обратное тоже справедливо —  далеко не каждая реакция сервера обусловлена запросом пользователя.

Большую часть запросов формирует движок AJAX, причем его можно написать так, что он будет загружать информацию превентивно, предугадывая действия пользователя.

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

Классическое web-приложение

Web-приложение, использующее технологию AJAX

Скачано с www.znanio.ru