JavaScript XMLHttpRequest — запит до сервера (застарілий)

XMLHttpRequest (скорочено XHR) — історичний спосіб надіслати запит на сервер без перезавантаження сторінки. Саме з нього почався AJAX.

правити

Загальний опис

Це той об'єкт, який у 2005-му змінив вебсайти на вебзастосунки. Ім'я його вже тоді було неточним: XML він не вимагає, а HTTP-запит — це не про XML.

Сьогодні його замінив fetch: той повертає проміс, працює з async/await і читається як звичайний код, тоді як XHR — це купка обробників подій навколо об'єкта зі станами.

Але одна річ у XHR досі є, а у fetch — ні: поступ вивантаження. Подія upload.onprogress дає відсоток надісланого, і саме тому смуги завантаження великих файлів досі часто пишуть на XHR.

правити

Порада

Новий код пиши на fetch. XHR бери свідомо й лише заради поступу вивантаження — це єдине, чого fetch дотепер не вміє.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const xhr = new XMLHttpRequest();\nxhr.open("GET", url);\nxhr.send();

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
XMLHttpRequest	1+	1+	1.2+	8+	12+	7+

Підтримка: мобільні переглядачі

Переглядач
XMLHttpRequest	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<form id="upload-form">
    <input type="file" name="photo">
</form>
<progress id="progressBar" max="100" value="0"></progress>

const form = document.getElementById('upload-form');
const progressBar = document.getElementById('progressBar');

const xhr = new XMLHttpRequest();

xhr.open('POST', '/upload');

// заради ЦЬОГО XHR і лишився: fetch так не вміє
xhr.upload.onprogress = event => {
    if (event.lengthComputable) {
        progressBar.value = Math.round(event.loaded / event.total * 100);
    }
};

xhr.onload = () => console.log('Готово:', xhr.status);
xhr.onerror = () => console.log('Помилка мережі (у пісочниці сервера немає)');

xhr.send(new FormData(form));

// звичайний GET сьогодні пишуть інакше:
// const data = await (await fetch('/api')).json();