Что такое XHR?

Что такое XHR (XMLHttpRequest)?

XHR (XMLHttpRequest) — это API, предоставляемый браузерами, который позволяет клиентскому JavaScript-коду отправлять HTTP- или HTTPS-запросы к веб-серверам и асинхронно получать ответы без необходимости перезагрузки страницы. Это фундаментальная технология, лежащая в основе AJAX (Asynchronous JavaScript and XML), которая произвела революцию в веб-разработке в середине 2000-х годов, позволив создавать более динамичные и интерактивные веб-приложения.

Основные характеристики и принцип работы

XHR работает по модели запроса-ответа. Разработчик создает экземпляр объекта XMLHttpRequest, настраивает его (указывает метод, URL, заголовки), назначает обработчики событий для отслеживания прогресса и завершения запроса, а затем отправляет его. Ключевая особенность — асинхронность: код не блокируется в ожидании ответа от сервера.

// Классический пример использования XHR
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // true = асинхронный запрос

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // Запрос завершен
        if (xhr.status === 200) { // Успешный HTTP-статус
            console.log('Успех:', xhr.responseText);
        } else {
            console.error('Ошибка:', xhr.status);
        }
    }
};

xhr.onerror = function() {
    console.error('Произошла сетевая ошибка.');
};

xhr.send(); // Отправка запроса

Ключевые свойства и события объекта XHR

• readyState: Текущее состояние запроса (от 0 UNSENT до 4 DONE).
• status: HTTP-статус код ответа сервера (200, 404, 500 и т.д.).
• responseText / responseXML: Данные ответа в виде текста или разобранного XML-документа.
• responseType: Позволяет указать ожидаемый тип ответа ('json', 'blob', 'arraybuffer').
• События: load, error, progress, readystatechange. Современный подход использует onload и onerror.

Преимущества и историческое значение

• Асинхронность: Позволила обновлять части страницы, не прерывая работу пользователя.
• Формирование парадигмы SPA: Стал краеугольным камнем для Single Page Applications, где навигация и взаимодействие происходят без полных перезагрузок.
• Широкая поддержка: Долгое время был единственным стандартным способом делать асинхронные запросы в браузере.

Недостатки и ограничения XHR

• Громоздкий API: Многословный и основанный на событиях/колбэках, что может приводить к "аду колбэков".
• Отсутствие поддержки промисов: Нативно не возвращает Promise, что усложняет современный асинхронный код.
• Проблемы с CORS: Для кросс-доменных запросов требует правильной настройки заголовков сервером (как и Fetch).
• Ограниченная семантика HTTP: По сравнению с Fetch API, менее удобен для работы со специфичными возможностями HTTP.

Сравнение с современным Fetch API

С появлением Fetch API (на основе Promise) XHR отошел на второй план, но все еще используется в легаси-коде.

// Тот же запрос с использованием Fetch API
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        return response.json();
    })
    .then(data => console.log('Успех:', data))
    .catch(error => console.error('Ошибка:', error));

Ключевые отличия Fetch от XHR:

• Promise-based API: Удобнее для цепочек и async/await.
• Более богатая семантика: Объект Response дает детальный контроль над ответом.
• Интеграция с Streams API: Позволяет работать с данными по частям.
• Нет встроенной отправки прогресса загрузки: Для отслеживания прогресса отправки данных XHR до сих пор предпочтительнее.

Заключение

XMLHttpRequest — это исторически важный, но морально устаревающий API. Он сыграл ключевую роль в переходе веба от статических страниц к динамическим приложениям. Сегодня для новых проектов абсолютно предпочтительным является использование Fetch API или библиотек-оберток (например, axios), которые предоставляют более чистый, современный и мощный интерфейс. Однако понимание XHR критически важно для поддержки старого кода, для решения специфичных задач (отслеживание прогресса отправки файла) и для глубокого понимания эволюции веб-технологий. В интервью знание XHR показывает, что разработчик понимает основы асинхронных операций в браузере и исторический контекст современных инструментов.