1 Лекція 10. AJAX Куссуль Н.М., Шелестов А.Ю.

1 Лекція 10. AJAX Куссуль Н.М., Шелестов А.Ю.

История Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям» для обозначения нового набора технологий, предлагаемый им клиенту. AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

AJAX в дії

Означення AJAX (Asynchronous JavaScript And XML) — підхід до побудови користувацьких інтерфейсів Web-додатків, за яких Web-сторінка, не перезавантажуючись, у фоновому режимі відправляє запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX — один з компонентів концепції DHTML.

Сравнение классического подхода и AJAX Классическая модель веб-приложения: Пользователь заходит на web-страницу и нажимает на елемент управления Браузер отправляет запрос серверу В ответ сервер генерирует польностью новую web-страницу и отправляет браузеру и т. д. Модель AJAX: Пользователь заходит на web-страницу и нажимает на елемент управления Браузер отправляет соответсвующий запрос на сервер. Сервер возвращает только ту часть документа, которая изменилась Web-приложения становятся более быстрыми и удобными

Загальна схема роботи

Обработка данных в AJAX

AJAX — не самостоятельная технология а концепция использования нескольких смежных технологий. AJAX — простая технология, поддерживаемая всеми основными браузерами. Единственным условием для внедрения AJAX является знание JavaScript.

HTML используется для создания Web-форм и указания полей в приложении. JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями DHTML (Dynamic HTML, CSS), помогает динамически обновлять формы. Для разметки HTML используются динамические HTML-элементы div, span и другие. DOM (Document Object Model) используется (через код JavaScript) для работы и со структурой HTML, и (в некоторых случаях) с XML, полученного от сервера. AJAX — не самостоятельная технология

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) " src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_10.jpg" alt=">Приклад

Приклад – контент сторінки Додаток AJAX містить один розділ div і одну кнопку. Розділ div використовується для відображення інформації з сервера Натиснення кнопки викликає функцію loadXMLDoc() :

Розділ сценарію - loadXMLDoc() Додамо сценарій Javascript у розділ заголовка – Сценарій AJAX виконується у функції loadXMLDoc():

function loadXMLDoc() { var xmlhttp; if" src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_13.jpg" alt=">Приклад – сценарій AJAX

AJAX – об’єкт XMLHttpRequest XMLHttpRequest — АРІ (об’єкт), доступний в мовах сценаріїв браузерів, таких як JavaScript. Використовує запити HTTP или HTTPS напряму до веб-сервера і завантажує дані відгука сервера напряму в сценарій. Інформація може передаватись в будь-якому текстовому форматі, наприклад в XML, HTML або JSON. Об’єкт XMLHttpRequest Всі сучасні браузери підтримують об’єкт XMLHttpRequest (IE5 та IE6 використовують ActiveXObject). Об’єкт XMLHttpRequest використовується для обміну даними з сервером у фоновому режимі. Значить, можна оновлювати частини документа HTML без перезавантаження цілої сторінки. Всі сучасні браузери (IE7+, Firefox, Chrome, Safari, and Opera) забезпечують вбудовану підтримку об’єкта XMLHttpRequest.

AJAX – створення об’єкта XMLHttpRequest Синтаксис для створення об’єкта XMLHttpRequest: variable=new XMLHttpRequest(); Для об’єкта ActiveXObject в старих (IE5 and IE6): variable=new ActiveXObject("Microsoft.XMLHTTP"); Для робастності сценарія в усіх браузерах, включаючи IE5 and IE6, потрібно перевірити, чи підтримується XMLHttpRequest. Якщо так, створюємо XMLHttpRequest, якщо ні - ActiveXObject:

var xmlhttp; if (window.XMLHttpRequest) {// код для IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// код для IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } Приклад створення об’єкта XMLHttpRequest

function loadXMLDoc() { var xmlhttp;" src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_17.jpg" alt=">Приклад – створення об’єкта XMLHttpRequest

AJAX – відправка запита на сервер Для відправки запита на сервер використовуються методи open() та send() об’єкта XMLHttpRequest: xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); open(method, url, async) – визначає метод запита, URL, тип (синхронний чи асинхронний). method – тип запита: GET чи POST url – місце файла на сервері (текстовий файл, xml, або сценарій) аsync – true (асинхронний) or false (синхронний) send(string) – відсилає запит на сервер. string – використовується лише в запитах POST

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) " src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_19.jpg" alt=">Приклад

Параметри функції open: GET чи POST? GET простіше та швидше, ніж POST, і може використовуватись у багатьох випадках Використовуйте запит POST якщо: Не підходить кешований файл (необхідно оновити файл або базу даних на сервері) На сервер відсилається великий об’єм даних (POST не має обмежень за об’ємом даних) При відправці даних, введених користувачем (де можуть міститись невідомі символи), POST більш робастний і безпечний, ніж GET

аsync = false - cинхронная модель взаимодействия с сервером В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию отображения. Все процессы выполняются последовательно. Во время ожидания, обозначенное на схеме серым цветом, браузер недоступен. Пользователь не может заниматься чем-то другим на этой же странице, пока происходит синхронный обмен данными.

Сервер сразу уведомляет браузер о том, что запрос принят в обработку и освобождает его для дальнейшей работы. Когда ответ будет готов - сервер перешлет его, и в браузере будет вызвана соответствующая функция отображения. Пока ответ формируется и пересылается - браузер свободен. Пользователь может выполнять новые асинхронные запросы. Почти мгновенная реакцией на действия пользователя Из-за разрыва между действием и реальным результатом приложение становится гораздо более чувствительно к ошибкам. аsync = true - асинхронная модель запроса AJAX

Параметри функції open: aсинхронний чи синхронний запит? AJAX означає Asynchronous JavaScript and XML, тому при використанні об’єкта XMLHttpRequest в AJAX, параметр async parameter метода open() рівний true: xmlhttp.open("GET","ajax_test.asp",true); Асинхронні запити – велика перевага для web-розробників. Багато серверних задач ресурсоємні. Без AJAX запит до сервера зупиняє роботу в браузері. З AJAX, сценарій JavaScript не чекає відповіді з сервера, а: Виконує інші операції Обробляє відповіді по мірі готовності

Приклад: обробка результатів асинхронного запиту Якщо аsync=true, визначаємо обробник події onreadystatechange – функцію, яка буде виконуватись, коли запит на сервері оброблений Приклад xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML= xmlhttp.responseText; //модифікація myDiv } }

function loadXMLDoc() { var xmlhttp;" src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_25.jpg" alt=">Приклад – обробка асинхронного запиту

AJAX – відгук сервера Для отримання відгука сервера використовують властивості responseText або responseXML об’єкта XMLHttpRequest. responseText – дані відгука у вигляді рядка responseXML – дані відгука у вигляді XML Властивість responseText повертає відгук сервера у вигляді рядка : document.getElementById("myDiv").innerHTML= xmlhttp.responseText;

Властивість responseXML Якщо сервер повертає об’єкт XML, використовується властивість responseXML: Приклад синтаксичного аналізу XML xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i"; } document.getElementById("myDiv").innerHTML=txt;

function loadXMLDoc() { var xmlhttp; if" src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_28.jpg" alt=">Приклад - подія onreadystatechange

AJAX - подія onreadystatechange Після відправки запита на сервер, на основі відгука сервера виконуються певні дії. Подія onreadystatechange запускається кожний раз при зміні властивості readyState. Властивість readyState містить статус запиту XMLHttpRequest. Об’єкт XMLHttpRequest має 3 важливі властивості: onreadystatechange, readyState, status

Властивості XMLHttpRequest Onreadystatechange – визначає функцію (ідентифікатор), яка автоматично викликається при зміні властивості readyState; readyState – визначає статус запита XMLHttpRequest. Можливі значення: 0: запит не ініціалізовано 1: встановлено з’єднання з сервером 2: запит отримано 3: запит обробляється 4: запит оброблено і відгук готовий Status - 200: "OK" 404: Page not found

Приклад onreadystatechange Подія onreadystatechange визначає дії, які виконуються, коли сервер обробив запит. Якщо readyState = 4, а status = 200, відгук готовий. Приклад xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML= xmlhttp.responseText; } }

function loadXMLDoc() { var xmlhttp; if" src="https://present5.com/presentacii-2/20171213\35770-lecture_ajax.ppt\35770-lecture_ajax_32.jpg" alt=">Приклад - подія onreadystatechange

Результат http://www.w3schools.com/ajax/ajax_intro.asp - інтерактивний посібник При натисканні кнопки міняється текст

Пример. Gmail (http://gmail.com) На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для: "Мгновенная" загрузка Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс Автоматическая "доставка" писем в открытую папку Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере. Автодополнение Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически. Результат: высокая популярность, высокий спрос на учетные записи с момента открытия.

Висновки Смысл AJAX - в интерактивности и быстром времени отклика. В первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, выдать подсказку и т.п.