API XMLHttpRequest

API XMLHttpRequest позволяет веб-приложениям отправлять HTTP-запросы веб-серверам и получать ответы программно с помощью JavaScript. Это, в свою очередь, позволяет обновлять только часть страницы данными с сервера, а не переходить на совершенно новую страницу. Этот подход также иногда называют AJAX.

API Fetch — это более гибкое и мощное решение, заменяющее API XMLHttpRequest. Fetch API использует объекты Promise вместо событий для обработки асинхронных ответов, хорошо интегрируется с сервисными рабочими процессами и поддерживает расширенные аспекты HTTP, такие как CORS. По этим причинам API Fetch обычно используется в современных веб-приложениях вместо XMLHttpRequest.

Основной интерфейс в API XMLHttpRequest — XMLHttpRequest. Для отправки HTTP-запроса:

1. Создайте новый экземпляр XMLHttpRequest вызвав его конструктор.
2. Инициализируйте его, вызвав XMLHttpRequest.open(). На этом этапе вы предоставляете URL для запроса, HTTP-метод, а также необязательно имя пользователя и пароль.
3. Прикрепите обработчики событий для получения результата запроса. Например, событие load срабатывает при успешном завершении запроса, а событие error срабатывает при различных ошибках.
4. Отправьте запрос, вызвав XMLHttpRequest.send().

Более подробное руководство по API XMLHttpRequest см. в разделе Использование XMLHttpRequest.

FormData

Объект, представляющий поля <form> и их значения, которые можно отправлять на сервер с помощью XMLHttpRequest или fetch().

ProgressEvent

Подкласс Event, который передается в progress и содержит информацию о том, какая часть запроса была выполнена.

XMLHttpRequest

Представляет один HTTP-запрос.

XMLHttpRequestEventTarget

Базовый класс как для XMLHttpRequest, так и для XMLHttpRequestUpload, определяющий доступные события в обоих интерфейсах.

XMLHttpRequestUpload

Представляет процесс загрузки для HTTP-загрузки. Предоставляет события, позволяющие отслеживать процесс загрузки.

В этом примере мы получаем файл JSON с https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json, добавляя обработчики событий для отображения прогресса.

HTML

<div class="controls">
  <button class="xhr" type="button">Click to start XHR</button>
</div>

<textarea readonly class="event-log"></textarea>

JavaScript

const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});

Результат

• API Fetch