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

Базовые примеры отправки запросов

Пример GET-запроса без тела:

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send(); // body не указан

// Запрос отправлен. Ответ обрабатывается в xhr.onload.

Пример POST-запроса с JSON:

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user');
xhr.setRequestHeader('Content-Type', 'application/json');
let data = JSON.stringify({ name: "Иван", age: 30 });
xhr.send(data);

// На сервер отправлена строка: {"name":"Иван","age":30}

Пример отправки данных формы:

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/form');
let formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('comment', 'Текст');
// Заголовок Content-Type устанавливать не нужно, FormData сделает это сам.
xhr.send(formData);

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

Fetch API: Современный интерфейс для работы с HTTP-запросами, основанный на промисах. Имеет более чистый синтаксис и лучше интегрирован с современными стандартами (Streams, Service Workers).

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

Axios: Популярная сторонняя библиотека, предоставляющая удобный API для HTTP-запросов с поддержкой промисов, перехватчиков и автоматической трансформации данных JSON.

axios.post('/api/user', { name: "Иван" })
  .then(response => console.log(response.data));

Выбор зависит от задач. Fetch — нативный и современный стандарт. Axios удобен в больших проектах. XMLHttpRequest необходим для поддержки старых браузеров или при работе с событиями прогресса загрузки/выгрузки.

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

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

import requests
response = requests.post('https://api.example.com/data', json={'key': 'value'})
print(response.json())

PHP (cURL): Низкоуровневый расширенный клиент. Требует больше шагов для настройки.

$ch = curl_init('https://api.example.com/data');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['key' => 'value']));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;

C (библиотека libcurl): Еще более низкоуровневый вариант, требующий ручного управления памятью и структурой запроса.

// Упрощенный псевдокод
CURL *curl = curl_easy_init();
curl_easy_setopt(curl, CURLOPT_URL, "https://api.example.com");
curl_easy_setopt(curl, CURLOPT_POSTFIELDS, "data=test");
CURLcode res = curl_easy_perform(curl); // Аналог send()
curl_easy_cleanup(curl);

Ключевое отличие JavaScript-функции send() — ее асинхронная природа в браузере, управляемая событиями, в то время как во многих серверных языках аналоги часто блокируют выполнение до получения ответа (если не используются специальные асинхронные механизмы).

Распространенные ошибки при использовании

1. Вызов send() до установки обработчиков для асинхронного запроса. Если обработчик onload или onreadystatechange установлен после send(), он может не сработать.

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send(); // Запрос отправлен
xhr.onload = function() { // Обработчик установлен ПОСЛЕ send
  console.log(this.responseText); // Может не выполниться
};

// Решение: всегда настраивать обработчики до вызова send().

2. Отправка данных для GET-запроса. Согласно спецификации, тело запроса игнорируется в GET и HEAD запросах.

xhr.open('GET', '/api/data?q=test');
xhr.send(JSON.stringify({extra: "data"})); // Данные в body не будут отправлены

3. Неправильный заголовок Content-Type для JSON. Без правильного заголовка сервер может не распознать данные.

xhr.open('POST', '/api/user');
// Заголовок Content-Type не установлен
xhr.send(JSON.stringify({name: "Иван"})); // Сервер может принять данные как текст

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

Метод XMLHttpRequest.send() был впервые реализован Microsoft в Internet Explorer 5 как часть ActiveX объекта. Позже он был стандартизирован консорциумом W3C, а затем — рабочей группой WHATWG в спецификации XMLHttpRequest Living Standard.

Сам метод send() существенно не менялся. Основные изменения касались всей спецификации XMLHttpRequest:

• Поддержка кросс-доменных запросов (CORS) через механизм withCredentials.
• Расширение типов данных для аргумента body (добавлены FormData, Blob, ArrayBuffer).
• События прогресса загрузки и выгрузки (upload.onprogress, onprogress).
• Более строгие правила безопасности (например, запрет синхронных запросов в основном потоке браузера в большинстве контекстов).

С появлением Fetch API развитие XMLHttpRequest замедлилось, но он остается полностью поддерживаемым для обратной совместимости.

Расширенные и специальные примеры

Пример с отслеживанием прогресса загрузки файла:

let xhr = new XMLHttpRequest();
let file = input.files[0];
xhr.open('POST', '/upload');
// Отслеживание прогресса отправки (upload)
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Отправлено: ${percentComplete}%`);
  }
};
xhr.send(file);

Пример синхронного запроса (использовать не рекомендуется):

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // false - синхронный режим
xhr.send(); // Браузер "зависнет" до получения ответа
if (xhr.status === 200) {
  console.log(xhr.responseText);
}

Пример отправки ArrayBuffer (например, бинарных данных):

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/binary');
xhr.responseType = 'arraybuffer'; // Ожидаем бинарный ответ
let buffer = new ArrayBuffer(16);
let view = new Int32Array(buffer);
view[0] = 42;
xhr.send(buffer); // Отправляем бинарные данные

Пример отмены запроса с помощью abort():

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/large-data');
xhr.send();
// Через 2 секунды отменяем запрос
setTimeout(() => {
  if (xhr.readyState !== XMLHttpRequest.DONE) {
    xhr.abort();
    console.log('Запрос отменен');
  }
}, 2000);

Пример обработки различных типов ответов (responseType):

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/config');
xhr.responseType = 'json'; // Парсинг JSON автоматически
xhr.onload = function() {
  // xhr.response уже является JavaScript-объектом
  console.log(xhr.response.version);
};
xhr.send();