codestory

Die Anleitung zu Javascript XMLHttpRequest

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- XMLHttpRequest

Die Interface XMLHttpRequest im Javascript wird gestaltet um die Datenquelle aus einem URL zu lesen. Sein Name kann die Verwirrung führen, dass nur die Datenquellen text/xml gelesen werden können, eigentlich kann es alles von einer URL lesen.
XMLHttpRequest wird gestaltet, um die Datenquelle von URL synschron oder asynchron zu lesen. Das asynchrone Lesen hilft den Benutzern bei dem Manipulation mit dem Browser während XMLHttpRequest die Datenquelle fern liest.
Wenn Sie die Files in dem Computer des Bennutzer lesen möchten, ist FileReader das Ding, das Sie brauchen. Es wird wie XMLHttpRequest gestaltet .
Constructor

// Create a XMLHttpRequest object:

var xhr = new XMLHttpRequest();
Properties
PropertyDie Bezeichnung
readyStateEine Zahl zurückgeben, die den Zustand der Anforderung (request) bezeichnet.
timeoutDie maximale Zeit zur Erhaltung einer Anwort bestimmen, wenn sie innerhalb dieser Zeit nicht erhaltet wird, wird es als einen Misserfolg betrachtet und automatisch beendet.
withCredentialsIhr Wert ist true oder false (Default ist false). Wenn true , d.h diese Anforderung kann cookies, authorization headers benutzen, allerdings muss sie immer dieselbe Ursprungspolitik erfüllen.

responseTypeDas Datentyp, das Sie erhalten möchten, festlegen. Die Defaultwert ist "text". (sehen Sie die möglichen Wert des Attribut folgend )
responseEin Objekt ArrayBuffer, Blob, Document, oder DOM String, zurückgeben, abhängig von der Wert von XMLHttpRequest.responseType, das die ganze Inhalt von der Anwort (response) enthaltet.
responseTextEin DOM String zurückgeben, das die Inhalt der Anwort als Text enthaltet, oder null zurückgeben wenn die Anforderung (request) nicht erfolgreich ist oder nicht gesendet wird.
responseURLEin serialized URL der Anwort (response) zurückgeben oder ein leeres String zurückgeben wenn URL null ist.
responseXMLEin Dokument zur Enthaltung der Anwort der Anforderung  zurückgeben oder null zurückgeben wenn die Anforderung nicht erfolgreich ist oder die Anforderung nicht gesendet wird oder zu XML oder HTML nicht analysiert wird.

statusEine Zahl zurückgeben, die den Zustand der Anwort der Anforderung bezeichnet.
statusTextEin DOM String zurückgeben, das die von Http Server zurückgegebene Anwortsinhalt enthaltet. Z.B "200 OK".
readyState
Die ersetzbaren Wert von readyState:
Der ZustandDie WertDie Bezeichnung
UNSENT0XMLHttpRequest wurde erstellt aber das Method open() wird noch nicht aufgerufen.
OPENED1open() wurde aufgerufen.
HEADERS_RECEIVED2send() wurde aufgerufen und die Information von headers & status sind verfügbar.
LOADING3herunterladend; responseText enthaltet eine Teil der Daten.
DONE4Das Lesen der Daten ist fertig.
responseType
Die erseztbaren Wert von responseType:
Die WertDie Bezeichnung
""Wenn keine Wert oder die leere Wert für responseType angegeben wird, wird es als  "text" behandelt.
"arraybuffer"Die Anwort (response) ist ein ArrayBuffer, das die binären Daten enthaltet (binary data).
"blob"Die Anwort (response) ist ein Objekt Blob, das die binären Daten enthaltet.
"document"Die Anwort (response) ist  ein HTML Document oder XMLDocument, das dem Typ MIME (MIME type) der erhalteten Daten entspricht.
"json"Die Anwort ist ein Objekt JavaScript , das durch die Analyse der erhalteten Daten als ein JSON erstellt wird.
"text"Die Anwort ist eine Text in einem Objekt DOMString.
Events
Während der Sendung einer Anforderung zum Lesen einer Datenquelle aus einer  URL wird XMLHttpRequest die Events werfen, die in die Interface ProgressEvent bezeichnet wird.
Achtung: Die mit (?) gekennzeichneten Events ist die Prüfungsstandard, die von den meisten Browser noch nicht unterstützt werden.

EventDie Bezeichnung
?loadstartGibt an,dass das Laden (load) der Daten begun. Das Event wird immer zuerst ausgelöst.

progressDas Event löst vielmal aus wenn die Daten gerade geladen werden, wodurch der Zugriff auf die Zwischendaten erlaubt wird.
?errorDas Event wird ausgelöst wenn das Laden der Daten fehlerhaft ist.
?abortDas Event wird ausgelöst wenn das Laden der Daten durch den Aufruf des Method abort() abgesagt wird (das Method von die beiden XMLHttpRequest & FileReader).

loadDas Event wird ausgelöst wenn alle Daten erfolgreich geladet werden.
?loadendDas Event wird ausgelöst wenn das Objekt die Datenübertragung erledigt hat. Immer nach dem Event error, abort, oder load auslösen
Handlers
Achtung: Die mit dem (?) gekennzeichneten Handlers sind ein Standardprüfung, die durch die meisten Browser noch nicht unterstützt werden.

HandlerDie Bezeichnung

onreadystatechange(event)Ein Handler, der aufgeruft wird wenn sich das Property readyState ändert.



?onloadstart(progressEvt)Ein Handler für das Event loadstart.

onprogress(progressEvt)Ein Handler für das Event progress.
?onerror(progressEvt)Ein Handler für das Event error.
?onabort(progressEvt)Ein Handler für das Event abort.

onload(progressEvt)Ein Handler für das Event load.
?onloadend(progressEvt)Ein Handler für das Event​​​​​​​ loadend.
Die Schritt zur Arbeit mit XMLHttpRequest

2- Die Beispiel mit  XMLHttpRequest

Das Beispiel für die Verwendung von XMLHttpResponse zum Lesen der Datenquelle XML, die durch eine URL gegeben wird.
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://ex1.o7planning.com/_testdatas_/simple-xml-data.xml";
    // var URL= "https://ex1.o7planning.com/_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;
}
 
Im ersten Beispiel erwähne ich den Weg zur Analyse der Inhalt XML (XMLDocument), wenn Sie sich dafür interessieren, können Sie die folgenden anderen Artikels referieren:
-

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.