XMLHttpRequest є об'єктом ECMAScript HTTP API для відправки запитів на сервер.
Назва XMLHttpRequest може здаватися дещо застарілою і вводити в оману.
- Розшифровка назви XMLHttpRequest:
- XML - задум XMLHttpRequest полягав у роботі з даними в форматі XML. Коли XMLHttpRequest створювали то XML був популярним форматом для обміну даними через Інтернет. Назва XMLHttpRequest відображає цю початкову мету — обробку XML даних.
- HTTP - вказує що цей об'єкт використовується для здійснення HTTP-запитів, що є основним протоколом для взаємодії між веб-браузерам та сервером.
- Request - означає запит. Вказує що об'єкт XMLHttpRequest дозволяє створювати і відправляти HTTP-запити до сервера.
Історія створення
XMLHttpRequest був розроблений Microsoft на початку 2000-х років для браузера Internet Explorer. Цей API дозволяв виконувати асинхронні HTTP-запити без перезавантаження сторінки, що стало революційним для веб-розробки. Пізніше ця технологія перейшла до W3C у 2006 році, та була адаптована для інших браузерів і стала стандартом для здійснення асинхронних запитів у веб-додатках.
XMLHttpRequest2 або "XMLHttpRequest Level 2" був розроблений у 2011 році і представляє собою розширену версію API, яка включає нові можливості і вдосконалення. Він був частиною специфікації HTML5 і був впроваджений для покращення функціональності та забезпечення більшої гнучкості при роботі з HTTP-запитами.
Різниці і можливості
Ось основні відмінності між XMLHttpRequest і XMLHttpRequest2:
| Характеристика | XMLHttpRequest | XMLHttpRequest2 |
|---|---|---|
| Асинхронні запити | Так | Так |
| Події прогресу | Ні | Так |
| Формати даних (BLOB, ArrayBuffer) | Ні | Так |
| FormData | Ні | Так |
| Крос-доменні запити (CORS) | Обмежена підтримка | Покращена підтримка |
| Тайм-аути | Ні | Так |
- Нові можливості XMLHttpRequest2:
- Прогресивні події: дозволяють відстежувати процес відправлення та отримання даних.
- Крос-доменні запити: підтримка CORS (Cross-Origin Resource Sharing), що дозволяє здійснювати запити до інших доменів.
- Передача бінарних даних: можливість надсилати та отримувати Blob та ArrayBuffer.
- Тайм-аути: можливість встановлювати час очікування для запитів.
| Властивості/Методи | XMLHttpRequest | XMLHttpRequest2 |
|---|---|---|
| open() | ✓ | ✓ |
| send() | ✓ | ✓ |
| abort() | ✓ | ✓ |
| setRequestHeader() | ✓ | ✓ |
| getResponseHeader() | ✓ | ✓ |
| getAllResponseHeaders() | ✓ | ✓ |
| responseText | ✓ | ✓ |
| responseXML | ✓ | ✓ |
| status | ✓ | ✓ |
| statusText | ✓ | ✓ |
| onreadystatechange | ✓ | ✓ |
| readyState | ✓ | ✓ |
| timeout | ✗ | ✓ |
| ontimeout | ✗ | ✓ |
| onprogress | ✗ | ✓ |
| responseType | ✗ | ✓ |
| response | ✗ | ✓ |
| withCredentials | ✗ | ✓ |
| overrideMimeType() | ✗ | ✓ |
| onload | ✗ | ✓ |
| onerror | ✗ | ✓ |
| onabort | ✗ | ✓ |
| onloadstart | ✗ | ✓ |
| onloadend | ✗ | ✓ |
Зверніть увагу що всі сучасні браузери підтримують XMLHttpRequest2. Спосіб створення об'єкта XMLHttpRequest і XMLHttpRequest2 є однакомив. Тому немає змоги вибирати між версіями при створенні об'єкта XMLHttpRequest.
new XMLHttpRequest();
- При роботі з XMLHttpRequest для відправлення запиту на сервер потрібно виконати такі основні пункту:
- Створити об'єкт XMLHttpRequest.
var ajax = new XMLHttpRequest(); - Ініціалізувати (налаштувати) запит за допомогою open().
ajax.open('get','/ajax.php',true); - Відправити запит на сервер за допомогою send().
ajax.send();
Для отримання даних які відправив сервер (відповідь від сервера) є події: XMLHttpRequest - onreadystatechange, XMLHttpRequest2 - onload.
Приклади використання
Приклад простого GET-запиту за допомогою XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/ajax.php?act=test_info', true);
xhr.onreadystatechange=function(){
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
console.log('Response:', xhr.responseText);
}else{
console.log('HTTP Error:', xhr.status);
}
}
};
xhr.send();
Приклад використання нових можливостей у XMLHttpRequest2, таких як обробка подій прогресу і тайм-аутів:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/ajax.php?act=test_info', true);
xhr.timeout = 10000; // 10 секунд тайм-аут
xhr.onprogress = function(event){
if(event.lengthComputable){
var percentComplete = (event.loaded / event.total) * 100;
console.log('Progress:', percentComplete.toFixed(2) + '%');
}
};
xhr.ontimeout = function(){
console.log('Request timed out.');
};
xhr.onload = function(){
if(xhr.status >= 200 && xhr.status < 300){
console.log('Response:', xhr.responseText);
}else{
console.log('HTTP Error:', xhr.status);
}
};
xhr.onerror = function(){
console.log('Request failed.');
};
xhr.send();
var obj = {
name : "JS",
title : "JavaScript"
}
var data=JSON.stringify(obj);
var ajax = new XMLHttpRequest();
ajax.onload=function(){
console.log(ajax.responseText);
};
ajax.open("POST", "/ajax.php?act=info", true);
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
ajax.send(data);
XMLHttpRequest (XMLHttpRequest2) потужний і зручний інструмент для виконання AJAX запитів на сервер. Проте нові стандарти, такі як fetch API пропонують ще більше можливостей і простоти у використанні, що робить XMLHttpRequest менш популярним у використані.