XMLHttpRequest.open: примеры (JAVASCRIPT)

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

Базовый асинхронный GET-запрос:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

// Запрос инициализирован и отправлен.

Синхронный POST-запрос с данными формы:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', false); // Синхронный режим
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');

// Скрипт остановится здесь, пока не придет ответ.
// После send() можно сразу читать xhr.responseText.

Запрос с аутентификацией:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/protected', true, 'admin', 'secret123');
xhr.send();

// Будет отправлен запрос с заголовком Authorization: Basic YWRtaW46c2VjcmV0MTIz

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

Fetch API — современный промис-ориентированный интерфейс для HTTP-запросов. Предоставляет более гибкий и мощный API.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Когда использовать: для новых проектов, когда нужна работа с промисами, потоковое чтение тела ответа или более чистый синтаксис. XMLHttpRequest может быть предпочтительнее для отслеживания прогресса загрузки или в legacy-коде.

Сторонние библиотеки (Axios, jQuery.ajax) — предоставляют упрощенный API, кросс-браузерную совместимость и дополнительные возможности.

Аналоги функции в других языках

Python (requests): Библиотека предоставляет синхронный и асинхронный API, более высокоуровневый, чем низкоуровневые сокеты.

import requests
response = requests.get('https://api.example.com/data')
print(response.json())

{'key': 'value'}

PHP (cURL): Расширение позволяет выполнять HTTP-запросы с сервера.

$ch = curl_init('https://api.example.com/data');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;

C (libcurl): Низкоуровневая библиотека для языков C/C++.

// Пример опущен для краткости, требует инициализации, установки опций и выполнения.

Ключевое отличие: в JavaScript XMLHttpRequest выполняется в браузере и управляется его политиками безопасности (CORS), тогда как серверные решения обычно имеют прямой доступ к сети.

Распространенные ошибки

Вызов send() до обработчиков событий: Установка обработчиков после send() может привести к их пропуску.

const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.send(); // Слишком рано!
xhr.onload = () => console.log(xhr.response); // Может не сработать

Решение: Назначать обработчики до send().

Использование синхронного режима в основном потоке: Вызов open с async=false в браузере блокирует интерфейс.

xhr.open('GET', '/large-data', false); // Может "заморозить" страницу
xhr.send();

Решение: Всегда использовать асинхронный режим, кроме особых случаев в Web Workers.

Отсутствие обработки ошибок: Сетевые сбои не обрабатываются событием onload.

xhr.onload = () => console.log('Успех');
// При ошибке сети (например, отключен интернет) onload не вызовется.

// Запрос завершится неудачно без видимого сообщения.

Решение: Добавлять обработчики onerror и ontimeout.

История изменений

Спецификация XMLHttpRequest развивалась через уровни:

• XMLHttpRequest Level 1: Базовая функциональность, асинхронные запросы.
• XMLHttpRequest Level 2: Добавлена поддержка CORS, событий прогресса загрузки/выгрузки, FormData, timeout, responseType.

Современные браузеры реализуют смесь возможностей этих уровней. Новые функции, такие как responseType='blob' или withCredentials, стали доступны после Level 2.

Сейчас стандарт XMLHttpRequest поддерживается, но развитие сосредоточено на Fetch API. Критических изменений в синтаксисе метода open() не было, но изменилась среда выполнения (например, обязательность HTTPS для некоторых контекстов).

Расширенные примеры

Загрузка бинарных данных (изображения) с указанием responseType:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/image.png');
xhr.responseType = 'blob'; // Указываем тип ответа
xhr.onload = function() {
  if (this.status === 200) {
    const blob = this.response;
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
};
xhr.send();

Отправка данных FormData с отслеживанием прогресса выгрузки:

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('comment', 'Тестовый файл');

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');

xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Загружено: ${percentComplete.toFixed(2)}%`);
  }
};

xhr.onload = function() {
  console.log(`Загрузка завершена со статусом: ${xhr.status}`);
};

xhr.send(formData);

Отмена запроса с использованием abort():

const xhr = new XMLHttpRequest();
xhr.open('GET', '/large-resource');
xhr.send();

// Отмена через 2 секунды
setTimeout(() => {
  if (xhr.readyState !== XMLHttpRequest.DONE) {
    xhr.abort();
    console.log('Запрос отменен');
  }
}, 2000);

Запрос с кастомными заголовками и обработкой таймаута:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.setRequestHeader('X-Custom-Header', 'MyValue');
xhr.timeout = 5000; // 5 секунд
xhr.ontimeout = () => console.error('Запрос превысил время ожидания');
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Данные:', JSON.parse(xhr.responseText));
  } else {
    console.warn('Ошибка сервера:', xhr.status);
  }
};
xhr.send();