Что такое XHR (XMLHttpRequest) в веб-разработке?

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

Ключевые возможности:

• Асинхронные запросы: Основной режим работы, не блокирующий интерфейс пользователя.
• Поддержка различных протоколов: HTTP, HTTPS, FTP, file.
• Разные HTTP-методы: GET, POST, PUT, DELETE, HEAD, OPTIONS.
• Работа с различными форматами данных: XML (исторически), JSON, HTML, plain text.
• Отслеживание прогресса: События progress, load, error для мониторинга загрузки/выгрузки (полезно для файлов).

Базовый пример использования XHR для GET-запроса:

// 1. Создание объекта XHR
const xhr = new XMLHttpRequest();

// 2. Настройка запроса: метод GET, URL, асинхронный режим (true)
xhr.open('GET', 'https://api.example.com/users', true);

// 3. Установка обработчиков событий
xhr.onload = function() {
  // Проверка успешного статуса ответа (2xx)
  if (xhr.status >= 200 && xhr.status < 300) {
    // Парсинг JSON-ответа
    const users = JSON.parse(xhr.responseText);
    console.log('Данные получены:', users);
  } else {
    console.error('Ошибка запроса. Статус:', xhr.status);
  }
};

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

// 4. Отправка запроса (для GET тело не требуется)
xhr.send();

Пример POST-запроса с отправкой JSON:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/login', true);

// Указание типа контента в заголовке
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Успешный вход:', xhr.responseText);
  }
};

const data = JSON.stringify({ username: 'john', password: 'secret' });
xhr.send(data); // Отправка строки JSON

Современная альтернатива — Fetch API: XHR считается устаревшим (legacy) API. Современная замена — более мощный и удобный Fetch API, основанный на Promise.

Сравнение XHR и Fetch:

// Один и тот же GET-запрос, реализованный двумя способами:

// 1. С помощью XHR (старый способ)
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => console.log(xhr.response);
xhr.send();

// 2. С помощью Fetch API (современный способ)
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Значение для тестирования: Понимание XHR важно для:

1. Тестирования API: Анализ сетевых запросов в DevTools (вкладка Network).
2. Отладки: Проверка корректности отправляемых данных и получаемых ответов.
3. Написания E2E-тестов: Инструменты вроде Selenium могут перехватывать и валидировать XHR-запросы.