XHR: технология для асинхронных запросов к серверу

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

XHR используется, когда есть необходимость отправить или получить данные с сервера без перезагрузки всей страницы. Это особенно полезно в случаях, когда необходимо загружать дополнительные данные, отправлять данные для обработки на сервере или обновлять только определенные части страницы.

Для использования XHR сначала необходимо создать новый экземпляр объекта XMLHttpRequest. Для этого можно использовать код:

var xhr = new XMLHttpRequest();

Затем необходимо настроить запрос с помощью методов объекта XMLHttpRequest. Например, чтобы отправить GET-запрос к серверу, можно использовать следующий код:

xhr.open('GET', 'https://example.com/data', true);

Где первый аргумент - метод запроса (GET, POST, PUT, DELETE и т. д.), второй аргумент - URL сервера, а третий аргумент - флаг асинхронности (true - асинхронный, false - синхронный).

После настройки запроса необходимо определить обработчик события для получения ответа от сервера. Это делается с помощью метода onreadystatechange, который вызывается каждый раз, когда изменяется состояние запроса. Пример кода:

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // обработка полученного ответа
  }
};

В данном примере обработчик события проверяет, когда состояние запроса будет равно 4 (завершено) и статус запроса будет равен 200 (OK). Внутри блока условия можно выполнять необходимые операции над полученными данными.

Для отправки запроса на сервер используется метод send(). Например, чтобы отправить POST-запрос с данными в формате JSON, можно использовать такой код:

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

Где первый метод указывает тип содержимого запроса, а второй отправляет данные на сервер в виде строки JSON.

XHR API также предоставляет другие методы, такие как setRequestHeader() для установки заголовков запроса, getAllResponseHeaders() для получения всех заголовков ответа и другие, которые позволяют более тонко настроить взаимодействие с сервером.

Хотя XHR является удобным способом взаимодействия с сервером, стоит отметить, что он является устаревшим API и вместо него рекомендуется использовать более современные подходы, такие как Fetch API или библиотеки, такие как Axios или jQuery.ajax(). Они предлагают более удобные и современные интерфейсы для работы с сервером.