Что такое XHR

Вопрос

Что такое XHR

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает базовые принципы работы с асинхронными запросами в JavaScript и знает, как использовать XHR для взаимодействия с сервером. Также важно показать осведомленность о современных альтернативах, таких как Fetch API.

Ключевые тезисы

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

Подробный ответ

XHR (XMLHttpRequest) — это API, предоставляемое браузером, которое позволяет отправлять HTTP-запросы к серверу и получать от него ответы. Оно было разработано Microsoft и позже стандартизировано W3C. Основное назначение XHR — выполнение асинхронных запросов без перезагрузки страницы, что делает веб-приложения более динамичными и отзывчивыми. XHR поддерживает различные форматы данных, такие как XML, JSON, HTML и текстовые файлы, что делает его универсальным инструментом для взаимодействия с сервером. Несмотря на то, что современные разработчики часто используют Fetch API или библиотеки типа Axios, понимание XHR важно для работы с legacy-кодом и глубокого понимания принципов работы веба. XHR активно использовался в AJAX (Asynchronous JavaScript and XML), который стал основой для многих современных веб-технологий. Однако у XHR есть недостатки, например, сложный API и необходимость ручного преобразования данных из JSON.

Практические примеры

Пример 1

Пример отправки GET-запроса с помощью XHR:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Пример 2

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

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 201) {
    console.log('Data successfully sent');
  }
};
xhr.send(JSON.stringify({ key: 'value' }));

Пример 3

Пример отмены XHR-запроса:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/large-data', true);
xhr.onload = function() {
  // обработка ответа
};
xhr.send();

// Отмена запроса через 2 секунды

setTimeout(() => {
  xhr.abort();
  console.log('Request aborted');
}, 2000);

Частые ошибки

• Забывают проверять статус ответа (xhr.status) перед обработкой данных, что может привести к ошибкам при неудачных запросах.
• Не устанавливают заголовок Content-Type при отправке JSON-данных, из-за чего сервер может не распознать формат данных.
• Используют синхронные запросы (третий параметр в xhr.open() равен false), что блокирует интерфейс браузера до получения ответа.

Связанные темы

• Fetch API — современная альтернатива XHR с более удобным API и поддержкой Promise.
• AJAX — подход к созданию динамических веб-приложений с использованием XHR.
• CORS (Cross-Origin Resource Sharing) — механизм, регулирующий кросс-доменные запросы, важный при работе с XHR.
• Promise — объект, представляющий результат асинхронной операции, используемый в современных подходах вместо callback-ов XHR.

Follow-up вопросы

Какие основные методы XHR вы знаете?

Уровень: basic

Основные методы: open() (инициализация запроса), send() (отправка запроса), abort() (отмена запроса). Также важны события: onload, onerror, onprogress для обработки ответа.

В чем разница между XHR и Fetch API?

Уровень: intermediate

Fetch API современнее, использует промисы, имеет более чистый синтаксис и лучше обрабатывает ошибки. XHR — старый подход, но до сих пор поддерживается для обратной совместимости.

Как обрабатывать CORS в XHR?

Уровень: intermediate

CORS (Cross-Origin Resource Sharing) обрабатывается через заголовки HTTP. Сервер должен отправить Access-Control-Allow-Origin. В XHR можно использовать withCredentials для работы с куками при кросс-доменных запросах.

Какие есть ограничения у XHR?

Уровень: advanced

Ограничения: сложный API на основе событий, нет поддержки промисов «из коробки», менее удобная обработка ошибок по сравнению с Fetch API. Также XHR не поддерживает стриминг данных.

Как можно отменить XHR-запрос?

Уровень: basic

Через метод abort(). После отмены срабатывает событие onabort. Важно: отмена не гарантирует мгновенную остановку запроса, так как сервер может продолжить обработку.