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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17 Алгоритм создания объекта 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; }

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

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

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

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

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

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

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

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

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