AJAX - Об’єкт XMLHttpRequest
Ключовим каменем AJAX є об’єкт XMLHttpRequest.
- Створити об’єкт XMLHttpRequest
- Визначити функцію зворотного виклику
- Відкрити об’єкт XMLHttpRequest
- Надіслати запит на сервер
Об’єкт XMLHttpRequest
Усі сучасні браузери підтримують об’єкт XMLHttpRequest.
Об’єкт XMLHttpRequest можна використовувати для негласного обміну даними з вебсервером. Це означає, що можна оновлювати частини вебсторінки, не перезавантажуючи всю сторінку.
Створити об’єкт XMLHttpRequest
Усі сучасні браузери (Chrome, Firefox, IE, Edge, Safari, Opera) мають вбудований об’єкт XMLHttpRequest.
Синтаксис для створення об’єкта XMLHttpRequest:
variable = new XMLHttpRequest();
Визначити функцію зворотного виклику
Функція зворотного виклику – це функція, яка передається як параметр іншій функції.
У цьому випадку функція зворотного виклику має містити код, який буде виконано, коли відповідь буде готова.
xhttp.onload = function() {
// Що робити, коли відповідь готова
}
Надіслати запит
Щоб надіслати запит на сервер, можна використати методи open() і send() об’єкта XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Приклад
// Створити об’єкт XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Визначити функцію зворотного виклику
xhttp.onload = function() {
// Тут ви можете використовувати дані
}
// Відправити запит
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Спробуйте самі »
Доступ між доменами
З міркувань безпеки сучасні браузери не дозволяють доступ між доменами.
Це означає, що і вебсторінка, і файл XML, який вона намагається завантажити, мають бути розташовані на одному сервері.
У прикладах W3Schools усі відкриті XML-файли, розташовані в домені W3Schools.
Якщо ви хочете використати наведений вище приклад на одній зі своїх власних вебсторінок, XML-файли, які ви завантажуєте, мають бути розташовані на вашому власному сервері.
Методи об’єкту XMLHttpRequest
| Метод | Опис |
|---|---|
| new XMLHttpRequest() | Створює новий об’єкт XMLHttpRequest |
| abort() | Скасовує поточний запит |
| getAllResponseHeaders() | Повертає інформацію заголовка |
| getResponseHeader() | Повертає специфічну інформацію заголовка |
| open(method, url, async, user, psw) | Визначає метод запиту: тип запиту GET або POST url: розташування файлу async: true (асинхронний) або false (синхронний) user: необов’язкове ім’я користувача psw: необов’язковий пароль |
| send() | Надсилає запит на сервер Використовується для запитів GET |
| send(string) | Надсилає запит на сервер. Використовується для запитів POST |
| setRequestHeader() | Додає пару мітка/значення до заголовка для надсилання |
Властивості об’єкта XMLHttpRequest
| Властивість | Опис |
|---|---|
| onload | Визначає функцію, яку потрібно викликати, коли запит отримано (завантажено) |
| onreadystatechange | Визначає функцію, яку потрібно викликати, коли змінюється властивість readyState |
| readyState | Зберігає статус XMLHttpRequest. 0: запит не ініціалізовано 1: підключення до сервера встановлено 2: запит отримано 3: обробка запиту 4: запит завершено, відповідь готова |
| responseText | Повертає дані відповіді у вигляді рядка |
| responseXML | Повертає дані відповіді як дані XML |
| status | Повертає номер статусу запиту 200: "OK" 403: "Заборонено" 404: "Не знайдено" Щоб отримати повний список, перейдіть до Довідника по повідомленням Http |
| statusText | Повертає текст стану (наприклад, "OK" або "Not Found") |
Властивість onload
За допомогою об’єкта XMLHttpRequest ви можете визначити функцію зворотного виклику, яка буде виконуватись, коли запит отримає відповідь.
Функція визначена у властивості onload об’єкта XMLHttpRequest:
Приклад
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Спробуйте самі »
Кілька функцій зворотного виклику
Якщо на вебсайті є кілька завдань AJAX, вам слід створити одну функцію для виконання об’єкта XMLHttpRequest і одну функцію зворотного виклику для кожного завдання AJAX.
Виклик функції має містити URL-адресу та функцію, яку потрібно викликати, коли відповідь буде готова.
Приклад
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// дія відбувається тут
}
function myFunction2(xhttp) {
// дія відбувається тут
}
Властивість onreadystatechange
Властивість readyState містить статус XMLHttpRequest.
Властивість onreadystatechange визначає функцію зворотного виклику, яка буде виконуватися, коли змінюється readyState.
Властивості status і властивості statusText містять статус об’єкта XMLHttpRequest.
| Властивість | Опис |
|---|---|
| onreadystatechange | Визначає функцію, яку потрібно викликати, коли змінюється властивість readyState |
| readyState | Зберігає статус XMLHttpRequest. 0: запит не ініціалізовано 1: підключення до сервера встановлено 2: запит отримано 3: запит оброблено 4: запит завершено, відповідь готова |
| status | 200: "OK" 403: "Заборонено" 404: "Сторінку не знайдено" Щоб отримати повний список, перейдіть до Довідника по повідомленням Http |
| statusText | Повертає текст статусу (наприклад "OK" або "Not Found") |
Функція onreadystatechange викликається щоразу, коли змінюється readyState.
Коли readyState має значення 4 і статус 200, відповідь готова:
Приклад
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Спробуйте самі »
Подія onreadystatechange запускається чотири рази (1-4), один раз для кожної зміни в readyState.
