XMLHttpRequest ( XHR ) — это API в форме объекта JavaScript , методы которого передают HTTP- запросы от веб-браузера к веб-серверу . [1] Методы позволяют браузерному приложению отправлять запросы на сервер после завершения загрузки страницы и получать информацию обратно. [2] XMLHttpRequest — это компонент программирования Ajax . До появления Ajax основными механизмами взаимодействия с сервером были гиперссылки и отправка форм , часто заменяющие текущую страницу другой. [2]
Концепция XMLHttpRequest была задумана в 2000 году разработчиками Microsoft Outlook . [3] Затем эта концепция была реализована в браузере Internet Explorer 5 (2001). Однако исходный синтаксис не использовал XMLHttpRequest
идентификатор . Вместо этого разработчики использовали идентификаторы ActiveXObject("Msxml2.XMLHTTP")
и ActiveXObject("Microsoft.XMLHTTP")
. [4] Начиная с Internet Explorer 7 (2006), все браузеры поддерживают XMLHttpRequest
идентификатор. [4]
В настоящее время этот XMLHttpRequest
идентификатор является фактическим стандартом во всех основных браузерах, включая движок компоновки Mozilla Gecko (2002), [5] Safari 1.2 (2004) и Opera 8.0 (2005). [6]
Консорциум Всемирной паутины (W3C) опубликовал рабочий проект спецификации для объекта XMLHttpRequest 5 апреля 2006 года. [7] [a] 25 февраля 2008 года W3C опубликовал рабочий проект спецификации уровня 2. [8] Уровень 2 добавил методы для отслеживания хода событий, разрешения межсайтовых запросов и обработки потоков байтов. В конце 2011 года спецификация уровня 2 была включена в исходную спецификацию. [9]
В конце 2012 года WHATWG взяла на себя разработку и поддерживает живой документ с использованием Web IDL . [10]
Обычно отправка запроса с помощью XMLHttpRequest состоит из нескольких этапов программирования. [11]
константный запрос = новый XMLHttpRequest ();
запрос.open ( 'GET' , '/api/message' , true /* асинхронно * / ) ;
запрос .onreadystatechange = прослушиватель ;
запрос . отправить ();
function listener () { // Проверяем, выполнен ли запрос и успешно ли он выполнен. if ( request . readyState == 4 && request . status == 200 ) console . log ( request . responseText ); // Отображаем текст. }
Помимо этих общих шагов, XMLHttpRequest имеет множество опций для управления тем, как отправляется запрос и как обрабатывается ответ. Пользовательские поля заголовка могут быть добавлены к запросу, чтобы указать, как сервер должен его выполнить, [12] и данные могут быть загружены на сервер, предоставив их в вызове «send». [13] Ответ может быть проанализирован из формата JSON в готовый к использованию объект JavaScript или обработан постепенно по мере его поступления, а не ждать весь текст. [14] Запрос может быть прерван преждевременно [15] или установлен как неудачный, если он не будет завершен в течение указанного времени. [16]
На раннем этапе развития Всемирной паутины было обнаружено, что можно нарушить безопасность пользователей, используя JavaScript для обмена информацией с одного веб-сайта на другой, менее авторитетный. Поэтому все современные браузеры реализуют одну и ту же политику происхождения , которая предотвращает множество таких атак, таких как межсайтовый скриптинг . Данные XMLHttpRequest подпадают под действие этой политики безопасности, но иногда веб-разработчики хотят намеренно обойти ее ограничения. Иногда это происходит из-за законного использования поддоменов, например, создание XMLHttpRequest со страницы, созданной с помощью foo.example.com
for information from, bar.example.com
обычно завершается ошибкой.
Существуют различные альтернативы для обхода этой функции безопасности, включая использование JSONP , Cross-Origin Resource Sharing (CORS) или альтернативы с плагинами, такими как Flash или Silverlight (оба сейчас устарели). XMLHttpRequest Cross-origin указан в спецификации W3C XMLHttpRequest уровня 2. [17] Internet Explorer не реализовывал CORS до версии 10. Две предыдущие версии (8 и 9) предлагали схожую функциональность через API XDomainRequest (XDR). CORS теперь поддерживается всеми современными браузерами (настольными и мобильными). [18]
Протокол CORS имеет несколько ограничений с двумя моделями поддержки. Простая модель не позволяет устанавливать пользовательские заголовки запросов и пропускает файлы cookie . Кроме того, поддерживаются только методы запроса HEAD, GET и POST , а POST допускает только следующие типы MIME : "text/plain", "application/x-www-urlencoded" и " multipart/form-data ". Первоначально поддерживался только "text/plain". [19] Другая модель определяет, когда запрашивается одна из непростых функций, и отправляет предварительный запрос [20] на сервер для согласования функции.
Поток программы с использованием асинхронных обратных вызовов XHR может представлять трудности с читаемостью и обслуживанием. ECMAScript 2015 (ES6) добавил конструкцию обещания для упрощения асинхронной логики. С тех пор браузеры реализовали альтернативный fetch()
интерфейс для достижения той же функциональности, что и XHR, используя обещания вместо обратных вызовов.
Fetch также стандартизирован WHATWG. [21]
fetch ( '/api/message' ) . then ( response => { if ( response . status != 200 ) throw new Error ( 'Запрос не выполнен' ); return response . text (); }) . then ( text => { console . log ( text ); });
В Javascript отсутствует переносимый механизм для общей сетевой коммуникации[.] ... Но благодаря объекту XMLHttpRequest, ... Код Javascript может выполнять HTTP-вызовы обратно на свой исходный сервер[.]
Реальность такова, что клиентская архитектура GMail, по-видимому, следует грубому проекту реализации Exchange 2000 Outlook Web Access для IE5 и более поздних версий, которая была выпущена еще в 2000 году.