Введение в AJAX Информационные технологии

Введение в Ajax AJAX [Asynchronous Javascript And Xml] – технология для взаимодействия с сервером без перезагрузки страниц.

История 18 февраля 2005 г. – первое публичное использование термина в статье Джесси Джеймса Гарретта « Новый подход к веб - приложениям » для обозначения нового набора технологий. Однако многие технологии были доступны и использовались и раньше, например, в подходе «Remote Scripting», предложенным Microsoft в 1998 г. Стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Синхронная модель обмена данными Все процессы выполняются последовательно, один за другим : браузер отправляет запрос на сервер и ждет, пока тот совершит всю необходимую работу ; сервер выполняет запросы к базе данных, представляет ответ в необходимом формате и выводит его ; браузер, получив ответ, вызывает функцию показа. Сетевые задержки включены во время ожидания. Пока происходит синхронный обмен данными, пользователь не может совершать на странице других действий.

Асинхронная модель обмена данными Браузер отправляет запрос на сервер, сервер уведомляет браузер о том, что запрос принят на обработку, и освобождает его для дальнейшей работы. После пересылки сервером подготовленного ответа на браузере запускается заранее подготовленная функция показа сообщения. Пока ответ формируется и пересылается – браузер свободен : пользователь может добавлять комментарии, заполнять формы, посылать новые асинхронные запросы.

Асинхронная модель обмена данными Синхронная модель обмена данными

Особенности асинхронной модели обмена данными: Сложность в реализации и отладке : заранее должно быть задано то, что сработает после ; недостаточные возможности браузеров. Неопределена последовательность выполнения запросов : поскольку можно одновременно делать несколько задач, задача, начатая первой, может окончиться последней. Разрыв по времени между действием и реальным результатом, приложение становится более чувствительным к ошибкам, как пользовательским ( нехватка привилегий ), так и ошибкам коммуникации ( разрыв связи и т. п.). Контроль целостности. Интерактивность. Быстрый интерфейс : мгновенная реакция на действия пользователя.

AJAX – интеграция технологий (X)HTML, CSS для представления и стилизации информации. JavaScript производит операции над DOM- моделью на стороне клиента для обеспечения динамического отображения информации и интерактивности. XMLHttpRequest для асинхронного обмена данными с веб - сервером. XML и XSLT, HTML, JSON для формирования данных. JavaScript объединяет все перечисленное в единую технологию. AJAX HTML CSS DOM JavaScript XmlHttpRequest XML AJAX

Типичное AJAX–приложение состоит их двух частей: БраузерJavaScriptСервер Java, PHP XMLHttpRequest

Применение Небольшие элементы управления, связанные с элементарными действиями : добавить в корзину, подписаться на рассылку и т. п. Динамическая подгрузка данных с сервера, например, построение оглавления в виде дерева, узлы которого подгружаются по мере раскрытия. Незаметные для пользователя действия, например, автосохранение результатов на сервере при редактировании статьи. Непрерывная подгрузка данных с сервера, например, чат или отображение биржевых котировок в реальном времени.

Примеры: Google suggest Google - одна из первых систем, предложившая " живой " поиск (live search). Пользователь печатает поисковую фразу, а система автодополняет ее, получая список самых вероятных дополнений с сервера.

Примеры: Google suggest Принцип реализации : Активируется примерно при каждом нажатии клавиши : система отслеживает время посылки последнего запроса, при " обычной " скорости печати запрос отсылается при каждом нажатии, при " программисткой " скорости – каждые несколько нажатий. Создается скрытый, который показывается при начале печати. заполняется ответом сервера : текущий результат подсвечивается. Результаты кэшируются : при нажатии на " удалить ", обращения к серверу не происходит. Для управления частотой запросов отслеживается время на осуществление запроса : при подключении по выделенной линии запросы идут чаще, чем при подключении через модем.

Примеры: Gmail На момент появления являлся единственным открытым почтовым сервисом, использующим AJAX. Проверка ошибок ввода формы ДО Submit : на сервер передается имя пользователя, результат проверки возвращается на страницу. Быстрая загрузка : браузер обращается к серверу только за данными, а не обновляет весь интерфейс. Автоматическая " доставка " писем в открытую папку : на сервер периодически отправляется запрос и, если пришли новые письма, они появляются в браузере. Автодополнение : достаточно ввести первые буквы имени адресата, остальные дополняются автоматически.

Преимущества Экономия трафика при работе веб - приложением : вместо загрузки всей страницы достаточно загрузить только изменившуюся часть. Уменьшение нагрузки на сервер : например, на странице работы с почтой при отметке прочитанных писем серверу достаточно внести изменения в базу данных и отправить на клиент сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту. Ускорение реакции интерфейса : поскольку загружается только изменившаяся часть, пользователь видит результат своих действий быстрее.

Недостатки Отсутствие интеграции со стандартными инструментами браузера : динамически создаваемые страницы не регистрируются браузером в истории посещения страниц ; не функционирует кнопка « Назад »; невозможно сохранить закладки на желаемый материал. Динамически загружаемое содержимое недоступно поисковикам, поэтому необходимо предусматривать альтернативные способы доступа к содержимому сайта. Становятся неактуальными старые методы учёта статистики сайтов, т. к. многие статистические сервисы ведут учет просмотра новых страниц. Кроссбраузерность : разные браузеры поддерживают стандарты неодинаково.

Объект XMLHTTPRequest Низкоуровневая основа большинства AJAX- приложений. Представляет собой набор API для пересылки различных данных (XML, XHTML, JSON и т. д.) по HTTP- протоколу между браузером и веб - сервером. Позволяет осуществлять HTTP- запросы к удаленному серверу без необходимости перезагружать страницу. Ограничений на формат передаваемых данных нет : данные можно пересылать в виде XML, JSON, HTML или простого текста.

Алгоритм создания объекта XMLHTTPRequest function createHttpRequest() { var httpRequest; var browser = navigator.appName; if (browser == "Microsoft Internet Explorer") { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else { httpRequest = new XMLHttpRequest(); } return httpRequest; }

Методы класса XMLHTTPRequest abort() отменяет текущий запрос ( обрыв соединения ) getAllResponseHeaders() возвращает полный список HTTP- заголовков в виде строки getResponseHeader( headerName ) возвращает значение указанного заголовка open(method, URL, async, userName, password) определяет метод, URL и другие опциональные параметры запроса ; параметр async определяет, происходит ли работа в асинхронном режиме send(data) отправляет запрос на сервер setRequestHeader(label, value) добавляет HTTP- заголовок к запросу

Свойства класса XMLHTTPRequest onreadystatechange обработчик события, которое происходит при каждой смене состояния объекта readyState возвращает текущее состояние объекта : 0 - неинициализирован, 1 - открыт, 2 – отправка данных, 3 – получение данных, 4 – данные загружены responseText текст ответа на запрос responseXML текст ответа на запрос в виде XML status возвращает HTTP- статус в виде числа : 404 – «Not Found», 200 – «OK» и т. д. statusText возвращает статус в виде строки : «Not Found», «OK» и т. д.

Пример реализации метода отправки запроса function sendRequest(file, _resultId, getRequestProc) { resultId = _resultId; document.getElementById(resultId).innerHTML = 'Подождите, идет загрузка...'; // определяем параметры соединения httpRequest.open('get', file); // устанавливаем обработчик httpRequest.onreadystatechange = getRequestProc; // посылаем запрос с пустым телом на сервер httpRequest.send(null); }

Обработчик ответа function getRequest() { // проверка, полностью ли передан ответ на запрос if (httpRequest.readyState == 4) { // вывод полученного ответа в элемент с идентификатором _resultId document.getElementById(resultId).innerHTML = httpRequest.responseText; } }

Пример Привет, мир AJAX'a Кликни, чтобы отправить запрос. Здесь будет результат запроса

Пример : страница с несколькими вкладками Вкладка 1 Вкладка 2 Вкладка 3

Пример : адресация запроса на скрипт Кликни, чтобы отправить запрос. Здесь будет результат запроса PHP- файл :

Пример : Сверхдинамичный поиск Привет, мир AJAX'a function sendSearchRequest() { sendRequest('search.php?q=' + document.getElementById('searchQuery').value, 'result', getRequest); } Введите текст для поиска: Здесь будет результат запроса

Пример : Сверхдинамичный поиск ". str_replace($query, " $query ", $page). " "; if (!empty($result)) echo " $result "; else echo "По запросу \"$query\" ничего найдено!"; } else echo "Введите запрос для поиска"; ?>