Руководство Javascript XMLHttpRequest
View more Tutorials:
Интерфейс XMLHttpRequest в Javascript смоделирован для прочтения источника данных из URL. Его название может вызвать недопонимание, что он читает только источники данных text/xml, на самом деле он может прочитать все из URL.
XMLHttpRequest смоделирован для прочтения источника данных из URL синхронно (synchronous) или асинхронно (asynchronous). Чтение данных асинхронно все так же помогает пользователю манипулировать с браузером в процессе, как XMLHttpRequest читает источник данных удаленно.
Если вы хотите прочитать файлы на компьютере пользователя, то FileReader это то что вам нужно, он смоделирован индентично XMLHttpRequest.
Constructor
// Create a XMLHttpRequest object: var xhr = new XMLHttpRequest();
Properties
Property | Описание |
readyState | Возвращает число, описывающее статус запроса (request). |
timeout | Определяет максимальное время для получения ответа, если не получен в том промежутке времени, то считается что запрос не завершен и автоматически отменяется. |
withCredentials | Его значение это true или false (По умолчанию false). Если true значит данный запрос может использовать cookies, authorization headers, но он должен следовать изначальному правилу. |
responseType | Определяет вид данных, которые вы хотите получить. Значение по умолчанию это "text". (Смотрите возможные значения данного свойства ниже) |
response | Возвращает объект ArrayBuffer, Blob, Document, или DOM String, зависит от значения XMLHttpRequest.responseType, содержит полное содержание response (ответа). |
responseText | Возвращает DOM String содержащий содержание ответа (response) в виде текста, или null если запрос (request) не завершен или запрос не отправлен. |
responseURL | Возвращает serialized URL ответа (response) или пустую строку если URL является null. |
responseXML | Возвращает объект Document содержащий ответ запроса, или null если запрос не завершен, или если запрос не отправлен, или невозможно парсировать в (parse) XML или HTML. |
status | Возвращает число, описывающее статус ответа запроса. |
statusText | Возвращает DOM String содержащий строку содержания ответа, возвращенного с помощью Http Server. Например "200 OK". |
readyState
Возможные значения у readyState:
Статус | Значение | Описание |
UNSENT | 0 | XMLHttpRequest создан. Но не вызван метод open(). |
OPENED | 1 | open() вызван. |
HEADERS_RECEIVED | 2 | send() вызван, и имеется информация headers & status. |
LOADING | 3 | Загружается; responseText содержащий часть данных. |
DONE | 4 | Процесс чтения данных завершен. |
responseType
Возможные значения у responseType:
Значение | Описание |
---|---|
"" | Если не определить значение для responseType, или пустое значение, то считается что он имеет значение "text". |
"arraybuffer" | Ответом (response) будет ArrayBuffer содержащий бинарные данные (binary data). |
"blob" | Ответом будет объект Blob содержащий бинарные данные. |
"document" | Ответом будет HTML Document или XMLDocument, соответствующий с видом MIME (MIME type) полученных данных. |
"json" | Ответом будет объект JavaScript созданный способом парсирования полученного содержания как JSON. |
"text" | Ответом будет текст в объекте DOMString. |
Events
В процессе отправления запроса для чтения источника данных из URL, XMLHttpRequest выдает (fire) события описанные в интерфейсе ProgressEvent.
Примечание: События отмеченные (?) являются стандартом теста, они еще не поддерживаются большинством браузерами.
Событие | Описание | |
---|---|---|
? | loadstart | Дает знать процес загрузки (load) данных начался. Данное событие всегда выдается первым. |
progress | Данное событие выдается много раз, когда загружаются данные, позволяя получить доступ в промежуточные данные. | |
? | error | Событие выдается, при совершении ошибки во время загрузки данных. |
? | abort | Событие выдается когда загрузка данных отменяется, вызвав метод abort() (Метод имеется для обоих XMLHttpRequest & FileReader). |
load | Событие выдается когда все данные загружены (load) успешно. | |
? | loadend | Событие выдается когда объект закончил передачу данных. Всегда выдается после события error, abort, или load. |
- TODO Link!
Handlers
Примечание: Обработчики (handler) отмеченные (?) являются стандартом теста, который не поддерживается большинством браузерами.
Обработчик | Описание | |
---|---|---|
onreadystatechange(event) | Обработчик (Handler), вызывается когда свойство (property) readyState меняется. | |
? | onloadstart(progressEvt) | Обработчик (handler) для события loadstart. |
onprogress(progressEvt) | Обработчик (handler) для события progress. | |
? | onerror(progressEvt) | Обработчик (handler) для события error. |
? | onabort(progressEvt) | Обработчик (handler) для события abort. |
onload(progressEvt) | Обработчик (handler) для события load. | |
? | onloadend(progressEvt) | Обработчик (handler) для события loadend. |
Шаги для работы с XMLHttpRequest

Пример использования XMLHttpResponse для чтения источника данных XML данный с помощью URL.
xhr-example.html
<!DOCTYPE html> <html> <head> <title>XMLHttpRequest Example</title> <meta charset="UTF-8"> <script src="xhr-example.js"></script> </head> <body> <h3>XMLHttpRequest example</h3> <a href="">Reset</a> <br><br> <button onclick = "clickHandler(event)">Click Me</button> <br><br> <textarea id="textarea-log" cols="50" rows="15"></textarea> </body> </html>
xhr-example.js
function clickHandler(evt) { var URL= "https://rawgit.com/o7planning/webexamples/master/_testdatas_/simple-xml-data.xml"; // var URL= "https://rawgit.com/o7planning/webexamples/master/_testdatas_/triceratops.png"; resetLog(); // Create XMLHttpRequest. let xhr = new XMLHttpRequest(); appendLog("URL: " + URL); appendLog("\n\n"); xhr.onprogress = function(progressEvent) { appendLog("onprogress! " + progressEvent); } // readyState (State of request): // 0 - XMLHttpRequest.UNSENT // 1 - XMLHttpRequest.OPENED // 2 - XMLHttpRequest.HEADERS_RECEIVED // 3 - XMLHttpRequest.LOADING // 4 - XMLHttpRequest.DONE xhr.onreadystatechange = function(event) { appendLog("onreadystatechange! readyState = " + xhr.readyState); appendLog(" status = " + xhr.status); appendLog(" statusText = " + xhr.statusText); } xhr.onload = function(progressEvent) { appendLog("onload!"); appendLog(" status = " + xhr.status); appendLog(" statusText = " + xhr.statusText); appendLog(" ------ xhr.responseText ------: "); appendLog(xhr.responseText); appendLog(" ------ xhr.responseXML -------: "); appendLog(xhr.responseXML); // [object XMLDocument] // Convert XMLDocument to String. var xmlString = (new XMLSerializer()).serializeToString(xhr.responseXML); appendLog(xmlString); } xhr.onerror = function(progressEvent) { appendLog("onerror!"); appendLog("Has Error!"); } let async = true; // Initialize It. xhr.open("GET", URL, async); // Send it (Without body data) xhr.send(); } function resetLog() { document.getElementById('textarea-log').value = ""; } function appendLog(msg) { document.getElementById('textarea-log').value += "\n" + msg; }
В примере выше я не упоминаю про способ анализа содержания XML (XMLDocument), если вам интересно, вы можете прочитать другие статьи ниже:
-