AJAX. XMLHttpRequest

1. AJAX

2. AJAX (Asynchronous Javascript And Xml) –
технологія взаємодії з сервером, яка не
потребує перезавантаження всієї сторінки
Докладніше. AJAX:
•Вміє читати дані з сервера навіть після того, як
сторінка вже завантажена
•Оновлює дані на сторінці без
перезавантаження сторінки
•Надсилає дані на сервер у фоновому режимі

3. Механізм роботи AJAX
1. На сторінці відбувається подія
(завантажується сторінка, натискається
кнопка тощо)
2. JavaScript створює об’єкт XMLHttpRequest
3. Об’єкт XMLHttpRequest надсилає запит на
сервер
4. Сервер обробляє запит
5. Сарвер надсилає на сторінку відповідь
6. JavaScript читає відповідь
7. JavaScript виконує відповідну дію (наприклад,
оновлення інформації на сторінці)

4. Об’єкт XMLHttpRequest
Об’єкт XMLHttpRequest можна використовувати
для обміну даними з сервером “за сценою”.
Об’єкт XMLHttpRequest вбудований у сучасні
браузери.
Синтаксис:
variable = new XMLHttpRequest();
Приклад:
var xhttp = new XMLHttpRequest();

5. З міркувань безпеки веб-сторіка і XML-файл,
який сторінка намагається завантажити,
повинні знаходитись на тому самому
сервері.
Щоб надіслати запит серверу,
використовуються методи об’єкта
XMLHttpRequest open() і send():
xhttp.open("GET", "demo.txt", true);
xhttp.send();

6. Метод open():
open(method, url, async)
•method: тип запиту: GET або POST
•url: адреса сервера чи файла
•async: true (асинронно) or false (синхронно)
Метод send():
send() – надсилає запит серверу GET-
методом
send(string) – надсилає запит серверу POST-
методом
GET- і POST-методи – ознайомитись самостійно.

7. Простий приклад GET-запиту
xhttp.open("GET", "data/demo.txt",
true);
xhttp.send();
Щоб уникнути кешування, можна писати так:
xhttp.open("GET",
"data/demo.txt?t=" + Math.random(),
true);
xhttp.send();

8. Передавати інформацію у GET-запиті можна
за таким зразком:
xhttp.open("GET",
"data/demo.txt?user=Ivan&age=28",
true);
xhttp.send();

9. Простий приклад POST-запиту
xhttp.open("POST", "demo.txt", true);
xhttp.send();
Щоб передати POST-методом дані,
наприклад, з HTML-форми, треба додати
HTTP-заголовок методом setRequestHeader
(). Дані надсилаються методом send():
xhttp.open("POST", "test.asp", true);
xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhttp.send("user=Ivan&age=28");

10. url – файл на сервері
xhttp.open("GET", "test.asp", true);
xhttp.send();
Файл може бути будь-якого типу: .txt, .xml,
або серверні програмні скрипти .asp, .php.
При асинхронному запиті
xhttp.open("GET", "ajax_test.asp", true);
JavaScript не зобов’язаний чекати відповіді
сервера. Натомість в процесі очікування він
може виконувати інші скрипти чи опрацювати
відповідь при її надходженні.

11. Властивість onreadystatechange:
З об’єктом XMLHttpRequest можна визначити
функцію, яка буде виконуватись, коли запит
отримає відповідь. Ця функція визначається
у властивості onreadystatechange об’єкта
XMLHttpResponse:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status
== 200) {
document.getElementById("demo").innerHT
ML = this.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();

12. Відгук сервера
Властивості об’єкта XMLHttpRequest:
onreadystatechange – визначає функцію, яка викликається, коли
властивість readyState змінюється
readyState – показує стан об’єкта XMLHttpRequest.
0: запит не ініціалізовано
1: встановлено з’єднання з сервером
2: запит отримано
3: запит обробляється
4: запит завершено і відповідь готова
status – основні значення:
200: "OK"
403: "Forbidden"
404: "Page not found"
statusText – повертає status-text (наприклад, "OK" або "Not
Found")

13. Функція onreadystatechange викликається кожного
разу, коли змінюється readyState.
Коли readyState стає рівним 4, а status – 200,
відгук готовий:
<button type="button"
onclick="loadDoc()">Click</button>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();
}

14. Задача 83.0
Створіть файл anekdot.txt, в який
помістіть 5-7 анекдотів, розділивши їх
символами “*****”. Збережіть у кодуванні
utf-8.
Створіть html-сторінку з кнопкою “Читати
анекдот” і DIV’ом.
Натискання на кнопку повинно
завантажувати у DIV вміст файлу
anekdot.txt. Подбайте про естетику.

15. Розв’язок
<button type="button" onclick="loadDoc()">Читати
анекдот</button>
<div id="demo"></div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
demo.innerHTML = this.responseText;
}
};
xhttp.open("POST", "data/anekdot.txt", true);
xhttp.send();
}
</script>

16. Задача 83.1
Змініть код так, щоб у DIV виводився
тільки один з цих анекдотів, по порядку,
щоразу новий.

17. Розв’язок
<script>
var counter = 0;
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var allText = this.responseText;
var arr = allText.split('*****');
demo.innerHTML = arr[counter%arr.length];
counter++;
}
};
xhttp.open("POST", "data/anekdot.txt", true);
xhttp.send();
}
</script>

18. Задача 83.2
Домашнє завдання:
Передбачте дві кнопки, які дозволять
“гортати” анекдоти в прямому і
зворотному напрямках.

19. Callback Function
Callback-функція – це функція, яка передається як
параметр іншій функції.
Якщо ви на сайті маєте більше ніж одне AJAX-завдання,
треба створити одну функцію для виконання об’єкту
XMLHttpRequest і по одній функції для кожного AJAX-
завдання. Виклик функції повинен містити URL і ім’я
функції, яка має викликатись, коли відповідь з сервера
готова.
Приклад (HTML-частина сторінки):
<button type="button" onclick="loadDoc('data/demo1.txt',
myFunction)">Запит1</button>
<button type="button" onclick="loadDoc('data/demo2.txt',
myFunction)">Запит2</button>
<p id="demo"></p>

20. JavaScript-частина:
<script>
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
demo.innerHTML = xhttp.responseText;
}
</script>

21. Властивості Server Response
responseText – отримує дані як рядок
responseXML – отримує дані у XML-форматі
Приклади:
demo.innerHTML = xhttp.responseText; //
див. попередні приклади
xmlDoc = xhttp.responseXML;
Об’єкт XML HttpRequest містить вбудований
XML-парсер.
Властивість responseXML повертає з
сервера відповідь у вигляді XML DOM
об’єкта.

22. Приклад:
<p id="demo"></p>
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("AUTHOR");
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "data/books2.xml", true);
xhttp.send();
</script>

23. Приклад 2. HTML-частина:
<button type="button" id="btn_autor"
onclick="loadXML(event)">Автори</button>
<button type="button" id="btn_title"
onclick="loadXML(event)">Книжки</button>
<p id="demo"></p>

24. Приклад 2. JavaScript-частина:
<script>
function loadXML(event) {
var xhttp, xmlDoc, txt, x, i, tagName;
if (event.target.id == "btn_autor") tagName = "AUTHOR";
if (event.target.id == "btn_title") tagName = "TITLE";
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName(tagName);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "data/books2.xml", true);
xhttp.send();
}
</script>

25. Приклад 3. Навігація по книжках
<div id='showBook'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">
<script>
var i = 0;
displayBook(i);
function next() {
if (i < x.length-1) {
i++;
displayBook(i);
}
}
function previous() {
if (i > 0) {
i--;
displayBook(i);
}
} // див наступну сторінку

26. Приклад 3 (продовження)
function displayBook(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "data/books2.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("BOOK");
showBook.innerHTML = "Автор: " +
x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue
+ "<br>Назва: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Сторінок: " +
x[i].getElementsByTagName("PAGES")[0].childNodes[0].nodeValue;
}
</script>

27. Задача 84
• Завантажте файл goo.gl/KQwAqs
• Виправте помилки, щоб зробити
додаток працездатним.
• Додайте у XML-файл дані про рік
видання книги (придумайте самі).
• Внесіть зміни у HTML-файл, щоб
додана інформація відображалась