XMLHttpRequest — это API, предоставляемое браузерами для отправки HTTP-запросов и получения ответов от сервера без перезагрузки страницы. Используя этот мощный инструмент, разработчики могут создавать динамические веб-приложения, которые общаются с сервером асинхронно.
Однако иногда возникает необходимость перехватить ответ на запрос и выполнить определенные действия на основе полученных данных. В этой статье мы рассмотрим, как сделать это с помощью JavaScript.
Для перехвата ответа XMLHttpRequest запроса мы можем использовать событие readystatechange. Это событие срабатывает каждый раз, когда свойство readyState объекта XMLHttpRequest изменяется. При достижении определенного значения readyState, мы можем проверить статус запроса и получить данные ответа.
Чтобы перехватить ответ, мы должны создать функцию-обработчик события readystatechange и привязать ее к объекту XMLHttpRequest запроса. Внутри этой функции мы можем проверить, является ли текущее значение readyState равным 4 (завершено), а также проверить код состояния статуса ответа. Если все условия выполняются, мы можем получить данные ответа с помощью свойства responseText или responseXML и выполнить необходимые действия.
Пример перехвата ответа XMLHttpRequest запроса:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// выполнение действий с данными ответа
}
};
xhr.send();
В этом примере мы создаем новый объект XMLHttpRequest и отправляем GET-запрос на сервер. Затем мы привязываем функцию-обработчик к событию readystatechange и проверяем значение readyState (4) и код состояния статуса (200). Если все условия выполняются, мы разбираем JSON-ответ и выполняем необходимые действия с данными.
Перехват ответа XMLHttpRequest запроса
Для перехвата ответа XMLHttpRequest запроса необходимо использовать событие onreadystatechange. Это событие срабатывает каждый раз, когда изменяется состояние запроса. Значение свойства readyState задает текущее состояние запроса. Например:
| readyState | Описание |
|---|---|
| 0 | UNSENT — объект был создан. Метод open() еще не вызван. |
| 1 | OPENED — метод open() был вызван. Ожидается вызов метода send(). |
| 2 | HEADERS_RECEIVED — вызов метода send() был выполнен, и заголовки ответа были получены. |
| 3 | LOADING — загрузка данных. В ответном теле (responseText) уже часть данных. |
| 4 | DONE — операция полностью завершена. |
Чтобы перехватить ответ, мы используем условие if (xhr.readyState === 4 && xhr.status === 200). Здесь мы проверяем, что состояние запроса равно 4 (DONE — операция завершена) и статус ответа равен 200 (успешный запрос). Если условие выполняется, то мы можем получить ответ с помощью свойства responseText и выполнить необходимые действия.
Пример кода для перехвата ответа XMLHttpRequest запроса:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// Действия с полученным ответом
}
};
xhr.send();В данном примере мы создаем новый объект XMLHttpRequest с помощью конструктора new XMLHttpRequest(). Затем мы вызываем метод open() для указания метода и URL запроса. При изменении состояния запроса, происходит вызов функции, которая проверяет состояние запроса и статус ответа и выполняет необходимые действия.
Перехват ответа XMLHttpRequest запроса позволяет динамически обрабатывать полученные данные и взаимодействовать с сервером без перезагрузки страницы.