Просмотр кода страницы XMLHttpRequest

'''XMLHttpRequest''' (XMLHTTP, XHR) — [[API]], доступный в [[скриптовый язык|скриптовых языках]] [[браузер]]ов, таких как [[JavaScript]]. Использует запросы [[Hypertext Transfer Protocol|HTTP]] или [[HTTPS]] напрямую к [[веб-сервер]]у (информация может передаваться в любом [[Текстовый формат|текстовом формате]], например, в [[XML]], [[HTML]] или [[JSON]]) и загружает данные ответа сервера напрямую в вызывающий скрипт<ref>{{cite web|url=http://www.w3.org/TR/XMLHttpRequest/|title=XMLHttpRequest object explained by the W3C Working Draft|publisher=W3.org|date=|accessdate=2009-07-14|archiveurl=https://www.webcitation.org/65Ddtuvhv?url=http://www.w3.org/TR/XMLHttpRequest/|archivedate=2012-02-05}}</ref>. 
Позволяет осуществлять HTTP-запросы к серверу без перезагрузки страницы.

XMLHTTP является важной составляющей технологии [[AJAX]] (Asynchronous JavaScript And [[XML]]), используется многими сайтами для создания динамичных, быстро реагирующих на запросы пользователя приложений. Например XMLHTTP используется такими сайтами, как [[Bing Maps]], [[Gmail]], [[Google Maps]], [[Google Suggest]], [[Facebook]].

XMLHTTP работает только с файлами, находящимися на том же домене, что и использующая XMLHTTP страница, но существует возможность обойти ограничение. Как и в случае JavaScript, эта возможность обойти ограничение сделана с учётом обеспечения безопасности ([[Межсайтовый скриптинг|cross-site scripting]]).

Хотя в названии присутствует аббревиатура XML, технология не накладывает ограничений на формат передаваемых данных. Данные можно пересылать как в виде XML, так и в JSON, HTML или просто неструктурированным текстом. Разработчик может самостоятельно создать формат для передачи данных. Однако нужно учитывать, что при пересылке используется текстовый протокол HTTP и потому при использовании метода GET данные должны передаваться в виде текста (то есть бинарные данные следует кодировать, к примеру в [[base64]]). При использовании метода POST в кодировании нет необходимости.

== История ==
Впервые был разработан компанией [[Microsoft]], появившись в компоненте [[Outlook on the web]] программного продукта [[Microsoft Exchange Server]] 2000. Он был назван IXMLHTTPRequest. Позднее наработки были включены в состав [[MSXML]] 2.0 в виде объекта [[ActiveX]], доступного через [[JScript]], [[VBScript]] или другие скриптовые языки, поддерживающиеся браузером. 
MSXML 2.0 был включён в состав браузера [[Internet Explorer 5]].

Программисты проекта [[Mozilla]] затем разработали совместимую версию, называющуюся nsIXMLHttpRequest в браузер Mozilla 0.6. Доступ к компоненту был реализован через JavaScript-объект, названный XMLHttpRequest. Однако, полной функциональности удалось добиться только в Mozilla 1.0. В дальнейшем поддержка XMLHttpRequest появилась в браузерах [[Safari]] 1.2, [[Opera]] 8.01 и в других.

Последняя официальная спецификация — версия 1.0 ([http://xhr.spec.whatwg.org/ XMLHttpRequest] от 19 декабря 2012 года), которая имеет статус текущего стандарта (Living Standard) и версия 2.0 ([http://www.w3.org/TR/XMLHttpRequest2/ XMLHttpRequest Level 2] от 17 января 2012 года), имеющая статус рабочего варианта. Во второй версии вводятся обработчики событий прогресса, поддержка кросс-доменных запросов и работа с бинарными данными.<ref>{{Cite web |url=http://habrahabr.ru/post/120917/ |title=Новые возможности XMLHttpRequest2 |access-date=2016-09-30 |archive-date=2016-08-07 |archive-url=https://web.archive.org/web/20160807072232/https://habrahabr.ru/post/120917/ |deadlink=no }}</ref>

== Методы класса XMLHttpRequest ==
{| align="center" class="standard"
|+
! |Метод
! |Описание
|-----
| abort()
| Отменяет текущий запрос, удаляет все заголовки, ставит текст ответа сервера в null.
|-----
| getAllResponseHeaders()
| Возвращает полный список HTTP-заголовков в виде строки. Заголовки разделяются знаками переноса (CR+LF).<br>Если флаг ошибки равен true, возвращает пустую строку.<br>Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.
|-----
| getResponseHeader(headerName)
| Возвращает значение указанного заголовка.<br>Если флаг ошибки равен true, возвращает null.<br>Если заголовок не найден, возвращает null.<br>Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.
|-----
| open(method, URL, async, userName, password)
| Определяет метод, URL и другие опциональные параметры запроса;<br> параметр async определяет, происходит ли работа в асинхронном режиме.<br>Последние два параметра необязательны.
|-----
| send(content)
| Отправляет запрос на сервер.
|-----
| setRequestHeader(label, value)
| Добавляет HTTP-заголовок к запросу.
|-----
| overrideMimeType(mimeType)
| Позволяет указать mime-type документа, если сервер его не передал или передал неправильно.<br>'''Внимание''': метод отсутствует в Internet Explorer!
|+
|}

== Свойства класса XMLHttpRequest ==
{| align="center" class="standard"
|+
! |Свойство
! |Тип
! |Описание
|-----
| onreadystatechange
| EventListener
| Обработчик события, которое происходит при каждой смене состояния объекта. Имя должно быть записано в нижнем регистре.
|-----
| readyState
| unsigned short
| Текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
|-----
| responseText
| DOMString
| Текст ответа на запрос.<br>Если состояние не 3 или 4, возвращает пустую строку.
|-----
| responseXML
| Document
| Текст ответа на запрос в виде XML, который затем может быть обработан посредством [[Document Object Model|DOM]].<br>Если состояние не 4, возвращает null.
|-----
| status
| unsigned short
| HTTP-статус в виде числа ([[HTTP 404|404]] — «Not Found», [[HTTP 200|200]] — «OK» и т. д.)
|-----
| statusText
| DOMString
| Статус в виде строки («Not Found», «OK» и т. д.).<br>Если статус не распознан, браузер пользователя должен вызвать ошибку INVALID_STATE_ERR.
|+
|}

== Ошибки, вызываемые классом XMLHttpRequest ==
{| align="center" class="standard"
|+
! |Название
! |Код
! |Описание
|-----
| SECURITY_ERR
| 18
| Вызывается при попытке совершить запрос, запрещённый настройками безопасности в браузере пользователя.
|-----
| NETWORK_ERR
| 101
| Вызывается при ошибке сети (во время синхронного запроса).
|-----
| ABORT_ERR
| 102
| Вызывается при прерывании пользователем запроса (во время синхронного запроса).
|+
|}

== Пример использования ==
План работы с объектом XMLHttpRequest можно представить следующим образом:
# Создание экземпляра объекта XMLHttpRequest
# Открытие соединения
# Установка обработчика события (нужно делать после открытия и до отправки в IE)
# Отправка запроса.

'''Создание экземпляра объекта XMLHttpRequest.'''
 
На этой стадии необходима отдельная реализация для разных браузеров. Конструкция создания объекта различается: в IE 5 — IE 6 она реализована через ActiveXObject, а в остальных браузерах (IE 7 и выше, Mozilla, Opera, Chrome, Netscape и Safari) — как встроенный объект типа XMLHttpRequest.

Вызов для ранних версий Internet Explorer выглядит так<ref>{{Cite web |url=http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx |title=Native XMLHTTPRequest object |access-date=2009-12-02 |archive-date=2010-03-06 |archive-url=https://web.archive.org/web/20100306164701/http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx |deadlink=no }}</ref>:
<source lang="javascript">
var req = new ActiveXObject("Microsoft.XMLHTTP");
</source>
В остальных браузерах:
<source lang="javascript">
var req = new XMLHttpRequest();
</source>

То есть, для обеспечения [[Кросс-браузерность|кросс-браузерности]] кода нужно лишь проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в зависимости от того, какой есть, тот и применять.

В качестве универсального решения предлагается использование такой функции:
<source lang="javascript">
function createRequestObject() {
  if (typeof XMLHttpRequest === 'undefined') {
    XMLHttpRequest = function() {
      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch(e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch(e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e) {}
      try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch(e) {}
      throw new Error("This browser does not support XMLHttpRequest.");
    };
  }
  return new XMLHttpRequest();
}
</source>

'''Установка обработчика событий, открытие соединения и отправка запросов'''

Эти вызовы выглядят так:
<source lang="javascript">
req.open(<"GET"|"POST"|...>, <url>[, <asyncFlag>[, <user>, <password>]]);
req.onreadystatechange = processReqChange;
</source>
Где:
* '''<"GET"|«POST»|…>''' — [[HTTP#Методы|метод]] запроса. Допускаются: DELETE, GET, HEAD, OPTIONS, POST, PUT.
* '''<url>''' — адрес запроса.
* '''<asyncFlag>''' — флаг, определяющий, использовать ли асинхронный запрос. По умолчанию установлен в true.
* '''<user>''', '''<password>''' — логин и пароль, соответственно. Указываются при необходимости.
После определения всех параметров запроса его остается только отправить. Делается это методом send(). При отправке GET-запроса для версии без ActiveX необходимо указать параметр null, в остальных случаях можно не указывать никаких параметров. Не будет ошибкой, если для GET всегда будет указан параметр null:

<source lang="javascript">
req.send(null);
</source>

После этого начинает работать вышеуказанный обработчик событий. Он — фактически основная часть программы. В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват возможных ошибок.
Пример кода с этими двумя функциями:
<source lang="javascript">
var req;

function loadXMLDoc(url)
{
    req = null;
    if (window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch (e){}
    } else if (window.ActiveXObject) {
        try {
            req = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e){
            try {
                req = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e){}
        }
    }

    if (req) {       
        req.open("GET", url, true);
        req.onreadystatechange = processReqChange;
        req.send(null);
    }
}

function processReqChange()
{
  try { // Важно!
    // только при состоянии "complete"
    if (req.readyState == 4) {
        // для статуса "OK"
        if (req.status == 200) {
            // обработка ответа
        } else {
            alert("Не удалось получить данные:\n" +
                req.statusText);
        }
    }
  }
  catch( e ) {
      // alert('Ошибка: ' + e.description);
      // В связи с багом XMLHttpRequest в Firefox приходится отлавливать ошибку
      // Bugzilla Bug 238559 XMLHttpRequest needs a way to report networking errors
      // https://bugzilla.mozilla.org/show_bug.cgi?id=238559
  }
}
</source>

== Известные проблемы ==
{{Дополнить раздел|дата=2016-09-30}}
Малый размер буфера при загрузке [[Потоковое мультимедиа|видео]].

== См. также ==
* [[AJAX]]
* [[HTTP]]
* [[REST]]

== Примечания ==
{{примечания}}

== Литература ==
* {{книга
|автор = Дейв Крейн, Эрик Паскарелло, Даррен Джеймс
|часть =
|заглавие = AJAX в действии: технология - Asynchronous JavaScript and XML
|оригинал = Ajax in Action
|ссылка = 
|издание = 
|место =  М.
|издательство = [[Вильямс (издательство)|«Вильямс»]]
|год = 2006
|страницы = 640
|isbn = 1-932394-61-3
}}
* {{книга
|автор = Дари К., Бринзаре Б., Черчез-Тоза Ф., Бусика М.
|часть = 
|заглавие = AJAX и PHP: разработка динамических веб-приложений
|оригинал = 
|ссылка = 
|издание = 
|место = СПб.
|издательство = Символ Плюс
|год = 2006
|страницы = 336
|isbn = 5-93286-077-4
}}

== Ссылки ==
* [https://web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm История XMLHTTP глазами одного из разработчиков] // alexhopmann.com{{ref-en}}
<!-- Учебные руководства-->
* [http://xmlhttprequest.ru xmlhttprequest.ru: описание, применение, частые проблемы]
* [http://www.webmascon.com/topics/technologies/13a.asp Сверхдинамичные веб-интерфейсы] // webmascon.com
<!-- Стандарты-->
* [http://www.w3.org/TR/XMLHttpRequest Создана рабочая группа по стандартизации XMLHTTPRequest во всех браузерах]

'''Реализация в браузерах:'''
* [https://developer.apple.com/internet/webcontent/xmlhttpreq.html Apple Safari] и KDE [http://developer.kde.org/documentation/library/cvs-api/kdelibs-apidocs/khtml/html/xmlhttprequest_8h-source.html Konqueror]{{Недоступная ссылка|date=2018-05|bot=InternetArchiveBot }}
* [http://msdn.microsoft.com/en-us/library/ms759148(VS.85).aspx Microsoft IXMLHTTPRequest]
* [https://developer.mozilla.org/en/nsIXMLHttpRequest Mozilla nsIXMLHttpRequest] {{Wayback|url=https://developer.mozilla.org/en/nsIXMLHttpRequest |date=20081017185838 }}
* [http://developer.mozilla.org/en/docs/AJAX:Getting_Started Mozilla XMLHttpRequest object HowTo] {{Wayback|url=http://developer.mozilla.org/en/docs/AJAX:Getting_Started |date=20060224010740 }}
* [http://www.mozilla.org/xmlextras/ Mozilla XML Extras]
* Opera [https://web.archive.org/web/20060423154505/http://www.opera.com/docs/specs/opera9/index.dml для компьютеров] и [https://web.archive.org/web/20060410215836/http://www.opera.com/pressreleases/en/2005/11/15/index.dml для мобильных телефонов]

{{JavaScript}}
{{Стандарты W3C}}

[[Категория:Microsoft]]
[[Категория:JavaScript]]
[[Категория:XML]]
[[Категория:Протокол HTTP]]
[[Категория:AJAX]]
[[Категория:Статьи с примерами кода JavaScript]]