Что такое XMLHttpRequest

"XMLHttpRequest". "Что такое XMLHttpRequest"

XMLHttpRequest

1. Что такое XMLHttpRequest?
2. Основные этапы работы XMLHttpRequest:
3. Живой пример XMLHttpRequest.

1. Что такое XMLHttpRequest?

XMLHttpRequest (XHR) — объект/API в JavaScript для отправки HTTP/HTTPS‑запросов к серверу и получения данных без перезагрузки страницы.

Основа технологии AJAX (Asynchronous JavaScript And XML).

Ключевые особенности XMLHttpRequest?

Работает с разными форматами данных (не только XML): JSON, HTML, простой текст, бинарные данные и др.

Поддерживает все HTTP‑методы: GET, POST, PUT, DELETE и т. д.

По умолчанию действует ограничение Same‑Origin Policy (запросы только к тому же домену). Для кросс‑доменных запросов нужен CORS (Cross‑Origin Resource Sharing).

Может выполнять асинхронные (не блокируют интерфейс) и синхронные запросы (редко используются из‑за блокировки интерфейса).

Важно :

XHR vs Fetch API

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

Она предлагает более удобный синтаксис (на основе промисов) и лучшую читаемость кода.

Однако XHR остаётся актуальным благодаря широкой поддержке и гибкости в сложных сценариях.

2. Основные этапы работы XMLHttpRequest:

Создание объекта:

var xhr = new XMLHttpRequest();

Настройка запроса через метод open():

xhr.open(method, URL, async, user, password);

Где:

method — HTTP‑метод (например, 'get' или 'post');

URL — адрес запроса;

async — флаг асинхронности (true по умолчанию);

user, password — учётные данные (опционально).

Отправка запроса методом send():

xhr.send([body]);

body — тело запроса (для GET обычно отсутствует).

Обработка ответа через свойства объекта:

status — HTTP‑статус (например, 200 — OK, 404 — Not Found);

statusText — текстовое описание статуса;

responseText — текст ответа сервера;

responseXML — ответ в формате XML (если сервер вернул корректный XML).

Важные свойства:

readyState — текущее состояние запроса (0–4, где 4 означает завершение);

onreadystatechange — обработчик события изменения состояния.

3. Живой пример XMLHttpRequest.

Внимание!

Для всех функций перечисленных в коде будет один пример.

На странице не представлен код с XMLHttpRequest, чтобы 100 раз не повторять см. здесь.

Пример с XMLHttpRequest см. здесь.

Скачать здесь.

Пошаговое объяснение, что происходит в коде на пример xhr_status, но и участвуют много других функций, в том числе и "XMLHttpRequest"

Всего комментариев : Comments+ 2.0

1000

+ =

Отправить