XMLHttpRequest (XHR)

Введение XMLHttpRequest (XHR) в браузеры в середине 2000-х годов стало огромной победой для веб-платформы. Посмотрим, как это работает.

Вступление

Введение XMLHttpRequest (XHR) в браузеры в середине 2000-х годов стало огромной победой для веб-платформы. Посмотрим, как это работает.

Вещи, которые сейчас выглядят нормально, когда-то выглядели так, как будто пришли из будущего. Я говорю, например, о GMail или Google Maps, которые в значительной степени основаны на XHR.

XHR был изобретен в Microsoft в девяностых годах и стал де-факто стандартом, поскольку все браузеры реализовали его в период 2002-2006 годов. W3C стандартизировал XMLHttpRequest в 2006 году.

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

Такие библиотеки, как jQuery, получили всплеск популярности, предоставив разработчикам простую в использовании абстракцию, что, в свою очередь, помогло распространить использование этой технологии.

Пример запроса XHR

Следующий код создает объект запроса XMLHttpRequest (XHR) и присоединяет функцию обратного вызова, которая отвечает наonreadystatechangeмероприятие.

Соединение xhr настроено для выполнения запроса GET кhttps://yoursite.com, и это началось сsend()метод:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

Дополнительные параметры open ()

В приведенном выше примере мы просто передали метод и URL-адрес в запрос.

Мы также можем указать другие методы HTTP - (get,post,head,put,delete,options).

Другие параметры позволяют указать флаг, чтобы сделать запрос синхронным, если установлено значение false, и набор учетных данных для аутентификации HTTP:

open(method, url, asynchronous, username, password)

onreadystatechange

Вonreadystatechangeвызывается несколько раз во время запроса XHR. Мы явно игнорируем все состояния, кромеreadyState === 4, что означает, что запрос выполнен.

Состояния

  • 1 (ОТКРЫТО): запрос начинается
  • 2 (HEADERS_RECEIVED): заголовки HTTP получены
  • 3 (ЗАГРУЗКА): начинается загрузка ответа
  • 4 (ВЫПОЛНЕНО): ответ был загружен

Отмена запроса XHR

Запрос XHR можно прервать, вызвавabort()метод наxhrобъект.

Сравнение с jQuery

С помощью jQuery эти строки можно перевести на:

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

Сравнение с Fetch

СПолучить APIэто эквивалентный код:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

Междоменные запросы

Обратите внимание, что соединение XMLHttpRequest подлежит определенным ограничениям, которые применяются по соображениям безопасности.

Один из наиболее очевидных - применение одной и той же политики происхождения.

Вы не можете получить доступ к ресурсам на другом сервере,пока несервер явно поддерживает это, используяCORS (совместное использование ресурсов между источниками).

Загрузка файлов с помощью XHR

Посмотрите мой учебник покак загружать файлы с помощью XHR.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: