AJAX - XMLHttpRequest
Об’єкт XMLHttpRequest використовується для запиту даних із сервера.
Надіслати запит на сервер
Щоб надіслати запит на сервер, ми використовуємо методи open() і send() об’єкта XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Метод | Опис |
|---|---|
| open(method, url, async) | Визначає тип запиту метод: тип запиту: GET або POST url: розташування сервера (файлу) async: true (асинхронний) або false (синхронний) |
| send() | Надсилає запит на сервер (використовується для GET) |
| send(string) | Надсилає запит на сервер (використовується для POST) |
URL-адреса – файл на сервері
Параметр url методу open() є адресою файлу на сервері:
xhttp.open("GET", "ajax_test.asp", true);
Файл може бути будь-яким типом, як-от .txt та .xml, або файлами серверних скриптів, як-от .asp та .html (які можуть виконувати дії на сервері перед надсиланням відповіді).
Асинхронний – true або false?
Запити до сервера мають надсилатися асинхронно.
Асинхронний параметр методу open() повинен мати значення true:
xhttp.open("GET", "ajax_test.asp", true);
Надсилаючи асинхронно, JavaScript не повинен чекати відповіді сервера, натомість може:
- виконувати інші скрипти під час очікування відповіді сервера
- працювати з відповіддю після того, як відповідь буде готова
Значенням за замовчуванням для параметра async є async = true.
Ви можете безпечно видалити третій параметр зі свого коду.
Синхронний XMLHttpRequest (async = false) не рекомендується, оскільки JavaScript припинить виконання, доки відповідь сервера не буде готова. Якщо сервер зайнятий або повільний, програма зависне або зупиниться.
GET або POST?
GET є простішим і швидшим, ніж POST, і його можна використовувати в більшості випадків.
Однак завжди використовуйте запити POST, коли:
- Кешований файл не є варіантом (оновіть файл або базу даних на сервері).
- Надсилання великого обсягу даних на сервер (POST не має обмежень щодо розміру).
- Надсилаючи дані користувача (які можуть містити невідомі символи), POST надійніший і безпечніший, ніж GET.
GET Запити
Простий GET запит:
У прикладі вище ви можете отримати кешований результат. Щоб уникнути цього, додайте унікальний ідентифікатор до URL-адреси:
Якщо ви хочете надіслати інформацію за допомогою методу GET, додайте інформацію до URL-адреси:
Як сервер використовує вхідні дані та як сервер відповідає на запит, пояснюється в наступному розділі.
POST Запити
Простий POST запит:
Щоб дані POST були, як форма HTML, додайте заголовок HTTP за допомогою setRequestHeader(). Укажіть дані, які потрібно надіслати, у методі send():
Приклад
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Спробуйте самі »
| Метод | Опис |
|---|---|
| setRequestHeader(header, value) | Додає HTTP-заголовки до запиту header: визначає назву заголовка value: визначає значення заголовка |
Синхронний запит
Щоб виконати синхронний запит, змініть третій параметр у методі open() на false:
xhttp.open("GET", "ajax_info.txt", false);
Іноді async = false використовується для швидкого тестування. Ви також знайдете синхронні запити в старішому коді JavaScript.
Оскільки код чекатиме на завершення роботи сервера, немає потреби у функції onreadystatechange:
Приклад
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Спробуйте самі »
Синхронний XMLHttpRequest (async = false) не рекомендується, оскільки JavaScript припинить виконання, доки відповідь сервера не буде готова. Якщо сервер зайнятий або повільний, програма зависне або зупиниться.
Рекомендується, щоб сучасні інструменти розробника попереджали про використання синхронних запитів і можуть створювати виняток InvalidAccessError, коли це відбувається.
