Полное руководство по XHR (XMLHttpRequest) для асинхронных HTTP-запросов в JavaScript

XHR означает «XMLHttpRequest». Это API JavaScript, который позволяет веб-браузерам отправлять асинхронные HTTP-запросы к серверу без необходимости перезагрузки всей страницы. XHR обычно используется для получения данных с сервера и динамического обновления частей веб-страницы, обеспечивая более плавный и быстрый отклик пользователей.

Раньше XHR, как следует из названия, в основном использовался для обработки XML-данных. Однако современное использование XHR расширилось и теперь поддерживает различные форматы данных, такие как JSON, HTML и обычный текст.

Вот несколько методов, обычно используемых с XHR, а также примеры кода:

  1. Создание объекта XHR:
    Чтобы создать объект XHR, вы можете использовать конструктор XMLHttpRequest:
var xhr = new XMLHttpRequest();

<ол старт="2">

  • Выполнение запроса GET.
    Чтобы выполнить запрос GET с использованием XHR, вам необходимо открыть соединение и указать метод запроса и URL-адрес. Затем вы можете отправить запрос и обработать ответ:
  • xhr.open('GET', 'https://api.example.com/data', true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // Process the response data
      }
    };
    1. Выполнение запроса POST.
      Чтобы выполнить запрос POST с использованием XHR, вы можете установить метод запроса 'POST'и включить все необходимые заголовки и данные запроса:
    xhr.open('POST', 'https://api.example.com/data', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ key: 'value' }));
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // Process the response data
      }
    };
    1. Обработка ошибок.
      Запросы XHR могут содержать ошибки. Вы можете справиться с ними, прослушав событие onerror:
    xhr.onerror = function () {
      // Handle the error
    };
    1. Отмена запроса.
      Чтобы прервать текущий запрос XHR, вы можете вызвать метод abort():
    xhr.abort();

    Это всего лишь несколько примеров того, как XHR можно использовать для выполнения HTTP-запросов в JavaScript. Также доступны альтернативные методы и библиотеки, такие как Fetch API и Axios, которые предоставляют аналогичную функциональность с более современным синтаксисом.