Асинхронная связь — фундаментальный аспект веб-разработки, а объект XMLHttpRequest (XHR) — мощный инструмент для ее достижения. Свойство xhr.readyStateиграет решающую роль в отслеживании статуса запроса XHR. В этой статье мы углубимся в различные значения состояния готовности XHR и рассмотрим различные методы их обработки, подкрепленные примерами кода.

Понимание состояния готовности XHR.
Свойство xhr.readyStateпредставляет текущее состояние запроса XHR. Он может принимать разные значения от 0 до 4, каждое из которых указывает на определенный этап жизненного цикла запроса-ответа. Давайте подробнее рассмотрим каждое из этих состояний и связанные с ними методы.

1. xhr.readyState = 0(UNSENT):
   Это состояние указывает на то, что объект XHR создан, но еще не инициализирован. На данном этапе никаких запросов не поступало. Чтобы обработать это состояние, вы можете использовать метод xhr.open(), чтобы указать метод HTTP и URL-адрес серверного ресурса.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

<старый старт="2">

xhr.readyState = 1(ОТКРЫТО):
Объект XHR инициализирован и вызван метод open(). Однако запрос еще не отправлен. Это состояние обычно используется для настройки дополнительных заголовков запроса.

xhr.setRequestHeader('Content-Type', 'application/json');

3. xhr.readyState = 2(HEADERS_RECEIVED):
   Объект XHR получил заголовки ответа от сервера. Доступ к заголовкам ответов можно получить с помощью метода xhr.getAllResponseHeaders().

const headers = xhr.getAllResponseHeaders();
console.log(headers);

4. xhr.readyState = 3(ЗАГРУЗКА):
   Объект XHR находится в процессе получения данных ответа. Вы можете отслеживать ход выполнения запроса с помощью события xhr.onprogress.

xhr.onprogress = function(event) {
  const loadedPercentage = (event.loaded / event.total) * 100;
  console.log(`Progress: ${loadedPercentage}%`);
};

5. xhr.readyState = 4(ГОТОВО):
   Запрос XHR выполнен, данные ответа доступны. Доступ к данным ответа можно получить с помощью свойства xhr.responseText.

console.log(xhr.responseText);

Понимание различных значений состояния готовности XHR имеет решающее значение для эффективной обработки асинхронных запросов. Используя методы, связанные с каждым готовым состоянием, вы можете создавать надежные и быстро реагирующие веб-приложения. Поэкспериментируйте с предоставленными примерами кода и изучите дополнительные возможности объекта XHR.

Внедрение этих готовых методов XHR в ваши проекты веб-разработки расширит ваши возможности обработки асинхронных запросов и создания динамического пользовательского интерфейса.