XMLHttpRequest

XMLHttpRequest ( XHR ) — это API в форме JavaScript объекта которого , методы передают HTTP- запросы от веб-браузера к веб-серверу . Эти методы позволяют браузерному приложению выполнять детальный вызов сервера и сохранять результаты в XMLHttpRequest. responseText атрибут . XMLHttpRequest — это компонент Ajax-программирования . До появления Ajax гиперссылки и отправка форм были основными механизмами взаимодействия с сервером, часто заменяя текущую страницу другой.

История

Концепция XMLHttpRequest была задумана в 2000 году разработчиками Microsoft Outlook . Затем эта концепция была реализована в браузере Internet Explorer 5 (2001 г.). Однако исходный синтаксис не использовал XMLHttpRequest идентификатор . Вместо этого разработчики использовали идентификаторы ActiveXObject("Msxml2.XMLHTTP") и ActiveXObject("Microsoft.XMLHTTP"). Начиная с Internet Explorer 7 (2006 г.), все браузеры поддерживают XMLHttpRequest идентификатор.

The XMLHttpRequest идентификатор теперь является де-факто стандартом во всех основных браузерах, включая Mozilla механизм компоновки Gecko (2002 г.), Сафари 1.2 (2004 г.) и Опера 8.0 (2005 г.).

Стандарты

Консорциум Всемирной паутины (W3C) опубликовал рабочий проект спецификации объекта XMLHttpRequest 5 апреля 2006 года. 25 февраля 2008 г. W3C опубликовал рабочий проект спецификации уровня 2 . На уровне 2 добавлены методы для отслеживания хода событий, разрешения межсайтовых запросов и обработки потоков байтов. В конце 2011 года спецификация уровня 2 была включена в исходную спецификацию.

В конце 2012 года WHATWG взяла на себя разработку и поддерживает живой документ с помощью Web IDL .

Использование

Обычно отправка запроса с помощью XMLHttpRequest состоит из нескольких этапов программирования.

1. Создайте объект XMLHttpRequest, вызвав конструктор :

   var request = new XMLHttpRequest();
   

2. Вызовите метод «open», чтобы указать тип запроса, идентифицировать соответствующий ресурс и выбрать синхронную или асинхронную операцию:

   request.open('GET', '/api/message', true /* asynchronous */);
   

3. Установите прослушиватель событий, который будет уведомляться при изменении состояния запроса:

   request.onreadystatechange = listener;
   

4. Инициируйте запрос, вызвав метод send:

   request.send();
   

5. Реагировать на изменения состояния в прослушивателе событий. Если сервер отправляет данные ответа, по умолчанию они фиксируются в свойстве «responseText». Когда объект перестает обрабатывать ответ, он переходит в состояние 4, состояние «готово».

   function listener() {
     // Check whether the request is done and successful.
     if (request.readyState == 4 && request.status == 200)
       console.log(request.responseText); // Display the text.
   }
   

Помимо этих общих шагов, XMLHttpRequest имеет множество опций для управления отправкой запроса и обработкой ответа. К запросу можно добавить пользовательские поля заголовка, чтобы указать, как сервер должен его выполнить. и данные можно загрузить на сервер, предоставив их в вызове «отправить». Ответ можно преобразовать из формата JSON в удобный для использования объект JavaScript или обрабатывать постепенно по мере его поступления, а не ждать всего текста. Запрос может быть прерван преждевременно или настроен на провал, если не завершен в течение определенного периода времени.

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

Основная статья: Совместное использование ресурсов между источниками

На заре развития Всемирной паутины было обнаружено, что можно нарушить безопасность пользователей, используя JavaScript для обмена информацией с одного веб-сайта с другим, менее авторитетным. Поэтому все современные браузеры реализуют одну и ту же политику происхождения , которая предотвращает многие подобные атаки, такие как межсайтовый скриптинг . Данные XMLHttpRequest подпадают под действие этой политики безопасности, но иногда веб-разработчики хотят намеренно обойти ее ограничения. Иногда это происходит из-за законного использования поддоменов, например, при создании XMLHttpRequest со страницы, созданной foo.example.com для получения информации от bar.example.com обычно терпит неудачу.

Существуют различные альтернативы для обхода этой функции безопасности, в том числе использование JSONP , совместное использование ресурсов между источниками (CORS) или альтернативы с такими плагинами, как Flash или Silverlight (оба сейчас устарели). XMLHttpRequest из разных источников указан в спецификации W3C XMLHttpRequest Level 2. Internet Explorer не реализовал CORS до версии 10. Две предыдущие версии (8 и 9) предлагали аналогичную функциональность через API XDomainRequest (XDR). CORS теперь поддерживается всеми современными браузерами (настольными и мобильными).

Протокол CORS имеет несколько ограничений и две модели поддержки. Простая . модель не позволяет устанавливать собственные заголовки запросов и не использует cookie файлы HEAD, GET и POST только методы запроса Кроме того, поддерживаются , а POST допускает только следующие типы MIME : «text/plain», «application/x-www-urlencoded» и « multipart/form-data ». Изначально поддерживалось только «text/plain». Другая модель определяет, когда одна из непростых запрашивается функций, и отправляет предполетный запрос. на сервер для согласования этой функции.

Получить альтернативу

Выполнение программы с использованием асинхронных обратных вызовов XHR может представлять трудности с читаемостью и обслуживанием. В ECMAScript 2015 (ES6) добавлена ​​конструкция обещания для упрощения асинхронной логики. Браузеры с тех пор реализовали альтернативу fetch() интерфейс для достижения той же функциональности, что и XHR, с использованием обещаний вместо обратных вызовов.

Fetch также стандартизирован WHATWG.

Пример

fetch('/api/message')
  .then(response => {
    if (response.status != 200) throw new Error('Request failed');
    return response.text();
  })
  .then(text => {
    console.log(text);
  });

См. также

• Вебсокет
• Представительская государственная передача (REST)

Внешние ссылки

• XMLHttpRequest Уровень жизни от WHATWG
• XMLHttpRequest Level 1, проект W3C