JavaScript интерфейс XMLHttpRequest

Описание интерфейса

Интерфейс XMLHttpRequest это интерфейс, который предоставляет функциональность для обмена данными между клиентом и сервером, он дает возможность получения данных по URL без необходимости полного обновления страницы. Интерфейс XMLHttpRequest широко используется в асинхронных запросах AJAX (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML»), что позволяет конкретной странице обновлять только её часть, не нарушая при этом работу пользователя. Кроме того, XMLHttpRequest имеет широкое использование при разработке одностраничных приложений (англ. single page application, SPA).

Несмотря на название, XMLHttpRequest работает с текстом, JSON и двоичными данными. Доступ к ресурсам подчиняется правилам источника и CORS; поддержку FTP современный браузер не предоставляет. Для новых задач чаще используют метод fetch(), который возвращает Promise; XMLHttpRequest остаётся полезен для отслеживания прогресса выгрузки и поддержки существующего кода.

Синтаксис

const request = new XMLHttpRequest();

При вызове конструктора возвращается новый объект XMLHttpRequest. Объект должен быть подготовлен по крайней мере вызовом метода open(), чтобы инициализировать его перед вызовом send() для отправки запроса на сервер.

Константы

Следующие константы определяют возможные значения свойства readyState. Они доступны как статические свойства конструктора (XMLHttpRequest.DONE) и через экземпляр (xhr.DONE).

Свойства интерфейса

Методы интерфейса

События

Собственное событие XMLHttpRequest — readystatechange; его обрабатывает свойство onreadystatechange. Остальные обработчики событий ниже — свойства экземпляра, унаследованные от XMLHttpRequestEventTarget; они принимают функцию или null. Отдельных статей о них пока нет.

Методы addEventListener(), removeEventListener() и dispatchEvent() наследуются от EventTarget.

На прототипе интерфейса определено символьное свойство Symbol.toStringTag со строковым значением "XMLHttpRequest"; оно используется при строковом представлении через Object.prototype.toString.

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

XMLHttpRequest Standard.

<button id="load" type="button">Загрузить профиль</button>
<button id="cancel" type="button">Отменить запрос</button>
<pre id="result" aria-live="polite"></pre>

const result = document.querySelector('#result')
const loadButton = document.querySelector('#load')
let request
loadButton.addEventListener('click', () => {
    const xhr = new XMLHttpRequest()
    request = xhr
    loadButton.disabled = true
    result.textContent = 'Загрузка…'
    xhr.open('GET', 'user-profile.json')
    xhr.timeout = 5000
    xhr.responseType = 'json'
    xhr.onload = () => {
        if (xhr.status < 200 || xhr.status >= 300) {
            result.textContent = 'Ошибка HTTP: ' + xhr.status
        } else if (!xhr.response || typeof xhr.response.phone !== 'string') {
            result.textContent = 'Ожидался JSON-объект со строковым полем phone'
        } else {
            result.textContent = 'Телефон: ' + xhr.response.phone
        }
    }
    xhr.onerror = () => {
        result.textContent = 'Сетевая ошибка или запрет CORS'
    }
    xhr.ontimeout = () => {
        result.textContent = 'Превышено время ожидания'
    }
    xhr.onabort = () => {
        result.textContent = 'Запрос отменён'
    }
    xhr.onloadend = () => {
        loadButton.disabled = false
        request = null
    }
    xhr.send()
})
document.querySelector('#cancel').addEventListener('click', () => request?.abort())