Что такое XMLHttpRequest и как сделать AJAX-запрос?
Встречаю в коде XMLHttpRequest и слово AJAX. Что это, зачем нужно и как отправить простой запрос на сервер без перезагрузки страницы?
2 ответа
XMLHttpRequest (XHR) — это встроенный в браузер объект для отправки HTTP-запросов из JavaScript без перезагрузки страницы. Именно на нём исторически строился AJAX (Asynchronous JavaScript And XML), хотя сегодня данные чаще гоняют в JSON, а не XML.
Простой GET-запрос:
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Ошибка', xhr.status);
}
};
xhr.onerror = function () {
console.error('Сбой сети');
};
xhr.send();
Логика: open() настраивает метод и URL, вешаем обработчики onload/onerror, затем send() отправляет. Ответ лежит в responseText.
Смысл AJAX в том, что страница остаётся на месте, а в фоне подгружаются данные — так работают ленты, автодополнение, подгрузка комментариев и т. д.
Сейчас в новом коде XMLHttpRequest почти не пишут руками — вместо него современный fetch, он короче и работает на промисах:
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Или с async/await:
const res = await fetch('/api/users');
const data = await res.json();
XHR полезно понимать (легаси-код, прогресс загрузки файлов), но для новых проектов бери fetch.
