XMLHttpRequest

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

История

Предпосылки появления

До появления XMLHttpRequest взаимодействие веб-страницы с сервером было возможно только путём отправки HTML-форм, что приводило к полной перезагрузке страницы. Это делало веб-приложения медленными и неудобными для пользователя. Разработчики искали способы обновлять только часть содержимого страницы, не прерывая работу пользователя.

Создание и внедрение

Технология, ставшая прообразом XMLHttpRequest, была впервые разработана инженерами компании Microsoft для браузера Internet Explorer 5.0, выпущенного в марте 1999 года. Она была реализована в виде ActiveX-объекта XMLHTTP. В 2000 году Mozilla реализовала собственную версию этого объекта, а затем, в 2002 году, в браузере Safari от Apple появилась нативная реализация. Стандартизация началась в 2006 году, когда Консорциум Всемирной паутины (W3C) опубликовал первую рабочую версию спецификации XMLHttpRequest.

Популяризация и стандартизация

Широкую известность технология получила в 2005 году, когда в статье Джесси Джеймса Гарретта «Ajax: A New Approach to Web Applications» был введён термин AJAX. Гарретт описал XMLHttpRequest как ключевой компонент нового подхода к созданию веб-приложений. После этого технология была реализована во всех современных браузерах, а в 2014 году W3C опубликовал рекомендацию «XMLHttpRequest Level 2», которая расширила возможности объекта, добавив поддержку кросс-доменных запросов (CORS), прогресс-баров загрузки и бинарных данных.

Принцип работы

Объект и его методы

XMLHttpRequest — это объект JavaScript, который создаётся с помощью конструктора new XMLHttpRequest(). Основные методы, используемые для выполнения запроса:

• open(method, url, async, user, password) — инициализирует запрос. Параметр method задаёт HTTP-метод (GET, POST, PUT, DELETE и т.д.), url — адрес сервера, async — флаг асинхронности (обычно true).
• send(body) — отправляет запрос на сервер. Параметр body может содержать данные (например, строку, объект FormData, Blob или ArrayBuffer).
• setRequestHeader(header, value) — устанавливает значение HTTP-заголовка запроса.
• abort() — отменяет текущий запрос.

Свойства и события

Объект XHR имеет ряд свойств, которые отражают состояние запроса и полученные данные:

• readyState — числовое значение, отражающее текущее состояние запроса (0 — не инициализирован, 1 — открыт, 2 — отправлен, 3 — получение данных, 4 — завершён).
• status — HTTP-код статуса ответа (например, 200, 404, 500).
• statusText — текстовое описание статуса ответа (например, «OK», «Not Found»).
• responseText — тело ответа в виде текстовой строки.
• responseXML — тело ответа, интерпретированное как XML-документ.
• responseType — тип ожидаемого ответа (пустая строка, text, document, json, blob, arraybuffer).

Основное событие — readystatechange, которое срабатывает при каждом изменении свойства readyState. Также существуют события load, error, progress и timeout.

Пример выполнения запроса

Типичный код для выполнения GET-запроса с использованием XMLHttpRequest выглядит следующим образом: ``javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status === 200) { console.log('Ответ сервера:', xhr.responseText); } else { console.error('Ошибка:', xhr.status); } }; xhr.onerror = function() { console.error('Сетевая ошибка'); }; xhr.send(); ``

Классификация и виды

Синхронные и асинхронные запросы

XMLHttpRequest может работать как в асинхронном, так и в синхронном режиме. В асинхронном режиме (параметр async = true) выполнение JavaScript-кода не блокируется, и запрос обрабатывается в фоновом режиме. В синхронном режиме (async = false) выполнение кода приостанавливается до получения ответа от сервера. Синхронные запросы считаются устаревшей практикой, так как они блокируют интерфейс пользователя и могут вызывать проблемы с производительностью. Начиная с определённых версий браузеров, синхронные запросы в основном потоке (main thread) были ограничены или запрещены.

Кросс-доменные запросы (CORS)

По умолчанию XMLHttpRequest может отправлять запросы только на тот же домен, с которого была загружена веб-страница (политика одинакового происхождения). Для отправки запросов на другие домены (кросс-доменные запросы) необходимо, чтобы сервер поддерживал механизм CORS (Cross-Origin Resource Sharing) и отправлял соответствующие HTTP-заголовки, например Access-Control-Allow-Origin.

Применение

AJAX-приложения

Основное применение XMLHttpRequest — создание AJAX-приложений. С его помощью разработчики могут:

• Динамически загружать данные — обновлять содержимое страницы (например, ленту новостей, список товаров) без перезагрузки.
• Отправлять формы — отправлять данные формы на сервер в фоновом режиме, не прерывая работу пользователя.
• Автозаполнение и подсказки — реализовывать функционал автодополнения в поисковых строках и полях ввода.
• Чат и уведомления — реализовывать механизмы push-уведомлений и обновления сообщений в реальном времени (с использованием периодических опросов).

Взаимодействие с API

XMLHttpRequest широко используется для взаимодействия с веб-API (REST, SOAP и другими). Клиентские приложения (веб-страницы, одностраничные приложения) отправляют запросы к серверным API для получения, создания, обновления или удаления данных.

Сравнение с современными альтернативами

Fetch API

Современным стандартом для выполнения HTTP-запросов в JavaScript является Fetch API, который предоставляет более простой и гибкий интерфейс, основанный на промисах (Promise). Fetch API имеет ряд преимуществ перед XMLHttpRequest:

• Более читаемый и лаконичный код — использование цепочек .then() и async/await.
• Встроенная поддержка JSON — метод response.json().
• Лучшая поддержка современных протоколов — например, Service Workers и Streams API.

Однако XMLHttpRequest остаётся актуальным в некоторых сценариях, например, для отслеживания прогресса загрузки файлов (событие progress) или для работы с устаревшими браузерами, не поддерживающими Fetch API.

Другие библиотеки

Существуют также библиотеки, упрощающие работу с HTTP-запросами, такие как jQuery.ajax, Axios и SuperAgent. Они, как правило, используют XMLHttpRequest под капотом, но предоставляют более удобный интерфейс и дополнительные возможности (например, автоматическую трансформацию данных, отмену запросов, перехватчики).

Критика и ограничения

Сложность использования

Код на XMLHttpRequest часто считается более громоздким и сложным для чтения по сравнению с Fetch API. Необходимость ручной обработки событий и проверки состояния readyState может приводить к ошибкам.

Отсутствие встроенной поддержки промисов

XMLHttpRequest не поддерживает промисы, что усложняет написание асинхронного кода и его композицию. Для использования промисов с XHR требуется оборачивать его в функцию-обёртку.

Ограниченная поддержка потоков

XMLHttpRequest не поддерживает потоковую обработку данных (Streams API), что может быть проблемой при работе с большими объёмами данных или при необходимости обработки данных по мере их поступления.

Проблемы с бинарными данными

В ранних версиях спецификации работа с бинарными данными была затруднена, хотя в XMLHttpRequest Level 2 эта проблема была решена с помощью свойства responseType.

Интересные факты

• Несмотря на название, XMLHttpRequest не ограничивается работой с XML-данными. Он может запрашивать любые типы данных: текст, JSON, HTML, бинарные файлы и т.д.
• Название «XMLHttpRequest» было выбрано разработчиками Microsoft, когда они создавали первый прототип для работы с XML-данными в Outlook Web Access.
• Технология XMLHttpRequest была одной из ключевых, позволивших создать такие веб-приложения, как Gmail (запущен в 2004 году) и Google Maps (запущен в 2005 году), которые стали эталонами интерактивности и удобства для своего времени.
• В 2006 году W3C начал работу над стандартизацией XMLHttpRequest, а в 2014 году была принята рекомендация XMLHttpRequest Level 2, добавившая поддержку кросс-доменных запросов и прогресс-баров.

Источники

• Спецификация W3C: XMLHttpRequest Level 1 (W3C Recommendation, 2014)
• Спецификация W3C: XMLHttpRequest Level 2 (W3C Working Draft, 2014)
• Статья Джесси Джеймса Гарретта «Ajax: A New Approach to Web Applications» (2005)
• Документация MDN Web Docs: XMLHttpRequest
• Книга «JavaScript: The Good Parts» Дугласа Крокфорда (2008)
• Книга «Eloquent JavaScript» Марейна Хавербеке (3-е издание, 2018)