betacode

Руководство Javascript XMLHttpRequest

1- XMLHttpRequest

Интерфейс 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:
СтатусЗначениеОписание
UNSENT0XMLHttpRequest создан. Но не вызван метод open().
OPENED1open() вызван.
HEADERS_RECEIVED2send() вызван, и имеется информация headers & status.
LOADING3Загружается; responseText содержащий часть данных.
DONE4Процесс чтения данных завершен.
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

2- Примеры с 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), если вам интересно, вы можете прочитать другие статьи ниже:
-
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.