JavaScript свойство XMLHttpRequest.readyState

Определение и применение

JavaScript свойство readyState объекта XMLHttpRequest возвращает состояние объекта XMLHttpRequest. Объект может находиться в следующих состояниях:

Значение Состояние Описание — XMLHttpRequest.readyState
Значение Состояние Описание
0 UNSENT Объект XMLHttpRequest был создан, метод open() объекта не вызывался.
1 OPENED Метод open() объекта был вызван. Во время этого состояния заголовки запросов могут быть установлены с помощью метода setRequestHeader() и метод send() может быть вызван, который инициирует отправку запроса.
2 HEADERS_RECEIVED Метод send() объекта был вызван, заголовки и статус доступны.
3 LOADING Происходит загрузка тела ответа сервера. Если значение свойства responseType соответствует значению "text" или пустой строке, то значение свойства responseText будет содержать частичные данные.
4 DONE Операция завершена. Это может означать, что передача данных была завершена успешно или не удалась.

Поддержка браузерами

Спецификация: xhr.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.XMLHttpRequest.readyState
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
readyState✓1✓12✓1✓8✓1.2✓18✓4✓10.1✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
xhr.readyState;

Спецификация

XMLHttpRequest Standard.

Пример использования

GET-запрос JSON-файла и вывод телефона пользователя

Пример запрашивает user-profile.json у сервера. Для запуска сохраните полный HTML-документ, разместите рядом JSON-файл с полем phone и откройте страницу через HTTP-сервер. Здесь показан код; изображение ниже иллюстрирует ответ.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<button data-migration-click-0="">Запросить телефон</button>
<div id="demo"></div>
main.js
JavaScript
const getPhone = function () {
    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'user-profile.json')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            const data = JSON.parse(this.responseText)
            document.getElementById('demo').innerHTML = 'Телефон пользователя: ' + data.phone
        }
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    getPhone()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

Результат нашего примера:

Результат запроса: на странице выведен телефон пользователя
Результат GET-запроса JSON-файла

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию getPhone, которая:

  • Вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
  • С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса - указываем, что HTTP запрос будет осуществлен методом "GET", а в качестве URL адреса, на который будет отправлен запрос, мы задаем файл формата JSON. Файл размещен на том же сервере и в том же каталоге, что и документ, с которого выполняется скрипт. Файл имеет следующий вид:
    JSON
    {
   "firstName": "Василий",
   "lastName": "Джейсонов",
   "age": 25,
   "phone": 88005553535
}
  • С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер.
  • С использованием обработчика событий onreadystatechange, вызываемого при запуске события readystatechange, то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа (свойство status) должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с использованием метода JSON.parse() анализируем строку в формате JSON и инициализируем переменную значением, полученным в ходе анализа. После этого с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением ключа объекта, содержащегося в инициализированной ранее переменной.