In diesem Leitfaden schauen wir uns an, wie manXMLHttpRequest verwendet, umHTTP-Anfragen zu senden, um Daten zwischen der Website und einem Server auszutauschen.

Beispiele für sowohl häufige als auch weniger bekannte Anwendungsfälle fürXMLHttpRequest sind enthalten.

Um eine HTTP-Anfrage zu senden:

1. Erstellen Sie einXMLHttpRequest-Objekt
2. Öffnen Sie eine URL
3. Senden Sie die Anfrage.

Nach Abschluss der Transaktion enthält dasXMLHttpRequest-Objekt nützliche Informationen wie den Antwortinhalt und denHTTP-Status des Ergebnisses.

function reqListener() {  console.log(this.responseText);}const req = new XMLHttpRequest();req.addEventListener("load", reqListener);req.open("GET", "http://www.example.org/example.txt");req.send();

Arten von Anfragen

Eine überXMLHttpRequest gestellte Anfrage kann auf zwei Arten Daten abrufen, asynchron oder synchron. Die Art der Anfrage wird durch das optionaleasync-Argument bestimmt (das dritte Argument), das in der MethodeXMLHttpRequest.open() festgelegt wird. Wenn dieses Argumenttrue ist oder nicht angegeben wird, wird dieXMLHttpRequest asynchron verarbeitet, andernfalls synchron. Eine detaillierte Diskussion und Demonstrationen dieser beiden Arten von Anfragen finden Sie auf der Seite zusynchronen und asynchronen Anfragen. Sie können synchrone Anfragen außerhalb von Web-Workern nicht verwenden, da sie die Hauptschnittstelle einfrieren.

Umgang mit Antworten

Es gibt mehrere Arten vonAntwort-Attributen, die für denXMLHttpRequest()-Konstruktor definiert sind. Diese geben dem Client, der dieXMLHttpRequest durchführt, wichtige Informationen über den Status der Antwort. Einige Fälle, in denen der Umgang mit nicht-textuellen Antworttypen möglicherweise einige Manipulation und Analyse erfordert, sind in den folgenden Abschnitten beschrieben.

Analyse und Manipulation der responseXML-Eigenschaft

Wenn SieXMLHttpRequest verwenden, um den Inhalt eines entfernten XML-Dokuments abzurufen, ist dieresponseXML-Eigenschaft ein DOM-Objekt, das ein analysiertes XML-Dokument enthält. Dies könnte sich als schwierig erweisen, zu manipulieren und zu analysieren. Es gibt vier Hauptmethoden zur Analyse dieses XML-Dokuments:

1. Verwenden vonXPath, um Teile davon anzusprechen (oder darauf zu zeigen).
2. ManuellesParsen und Serialisieren von XML in Zeichenfolgen oder Objekte.
3. Verwenden vonXMLSerializer, umDOM-Bäume in Zeichenfolgen oder Dateien zu serialisieren.
4. RegExp kann verwendet werden, wenn Sie den Inhalt des XML-Dokuments immer im Voraus kennen. Möglicherweise möchten Sie Zeilenumbrüche entfernen, wenn SieRegExp verwenden, um in Bezug auf Zeilenumbrüche zu scannen. Diese Methode ist jedoch ein "letzter Ausweg", da sie bei geringfügigen Änderungen des XML-Codes wahrscheinlich fehlschlägt.

Verarbeitung einerresponseText-Eigenschaft, die ein HTML-Dokument enthält

Wenn SieXMLHttpRequest verwenden, um den Inhalt einer entfernten HTML-Webseite abzurufen, ist dieresponseText-Eigenschaft eine Zeichenfolge, die das rohe HTML enthält. Dies könnte sich als schwierig erweisen, zu manipulieren und zu analysieren. Es gibt drei Hauptmethoden, um diese rohe HTML-Zeichenfolge zu analysieren und zu parsen:

1. Verwenden Sie dieXMLHttpRequest.responseXML-Eigenschaft, wie im ArtikelHTML in XMLHttpRequest besprochen.
2. Injizieren Sie den Inhalt in den Body einesDokumentfragments überfragment.body.innerHTML und durchlaufen Sie das DOM des Fragments.
3. RegExp kann verwendet werden, wenn Sie den Inhalt des HTML-responseText immer im Voraus kennen. Möglicherweise möchten Sie Zeilenumbrüche entfernen, wenn SieRegExp verwenden, um in Bezug auf Zeilenumbrüche zu scannen. Diese Methode ist jedoch ein "letzter Ausweg", da sie bei geringfügigen Änderungen des HTML-Codes wahrscheinlich fehlschlägt.

Umgang mit Binärdaten

ObwohlXMLHttpRequest am häufigsten zum Senden und Empfangen von Textdaten verwendet wird, kann es auch verwendet werden, um binäre Inhalte zu senden und zu empfangen. Es gibt mehrere gut getestete Methoden, um die Antwort einesXMLHttpRequest dazu zu zwingen, binäre Daten zu senden. Diese beinhalten die Nutzung deroverrideMimeType()-Methode amXMLHttpRequest-Objekt und sind eine praktikable Lösung.

const req = new XMLHttpRequest();req.open("GET", url);// retrieve data unprocessed as a binary stringreq.overrideMimeType("text/plain; charset=x-user-defined");/* … */

Es stehen jedoch modernere Techniken zur Verfügung, da das AttributresponseType jetzt eine Reihe zusätzlicher Inhaltstypen unterstützt, was das Senden und Empfangen von Binärdaten erheblich erleichtert.

Betrachten Sie beispielsweise diesen Schnipsel, der denresponseType von"arraybuffer" verwendet, um den entfernten Inhalt in einArrayBuffer-Objekt abzurufen, das die rohen Binärdaten speichert.

const req = new XMLHttpRequest();req.onload = (e) => {  const arraybuffer = req.response; // not responseText  /* … */};req.open("GET", url);req.responseType = "arraybuffer";req.send();

Für weitere Beispiele schauen Sie sich die SeiteSenden und Empfangen von Binärdaten an.

Überwachung des Fortschritts

XMLHttpRequest bietet die Möglichkeit, verschiedene Ereignisse zu überwachen, die während der Verarbeitung der Anfrage auftreten können. Dazu gehören periodische Fortschrittsbenachrichtigungen, Fehlermeldungen und so weiter.

Die Unterstützung für DOM-Überwachung beiprogress-Ereignissen vonXMLHttpRequest-Transfers folgt derSpezifikation für Fortschrittsereignisse: Diese Ereignisse setzen dasProgressEvent-Interface um. Die tatsächlichen Ereignisse, die Sie überwachen können, um den Zustand eines laufenden Transfers zu bestimmen, sind:

progress

Die Menge der abgerufenen Daten hat sich geändert.

load

Der Transfer ist abgeschlossen; alle Daten sind nun in derresponse.

const req = new XMLHttpRequest();req.addEventListener("progress", updateProgress);req.addEventListener("load", transferComplete);req.addEventListener("error", transferFailed);req.addEventListener("abort", transferCanceled);req.open();// …// progress on transfers from the server to the client (downloads)function updateProgress(event) {  if (event.lengthComputable) {    const percentComplete = (event.loaded / event.total) * 100;    // …  } else {    // Unable to compute progress information since the total size is unknown  }}function transferComplete(evt) {  console.log("The transfer is complete.");}function transferFailed(evt) {  console.log("An error occurred while transferring the file.");}function transferCanceled(evt) {  console.log("The transfer has been canceled by the user.");}

Wir fügen Ereignis-Listener für die verschiedenen Ereignisse hinzu, die beim Durchführen eines Datentransfers mitXMLHttpRequest gesendet werden.

Der Fortschrittsereignis-Handler, der durch dieupdateProgress()-Funktion in diesem Beispiel spezifiziert wird, erhält die Gesamtanzahl der zu übertragenden Bytes sowie die Anzahl der bisher übertragenen Bytes in den Felderntotal undloaded des Ereignisses. Wenn jedoch das FeldlengthComputable falsch ist, ist die Gesamtlänge unbekannt und wird null sein.

Fortschrittsereignisse existieren sowohl für Download- als auch für Upload-Transfers. Die Download-Ereignisse werden direkt beimXMLHttpRequest-Objekt ausgelöst, wie im obigen Beispiel gezeigt. Die Upload-Ereignisse werden beimXMLHttpRequest.upload-Objekt ausgelöst, wie unten gezeigt:

const req = new XMLHttpRequest();req.upload.addEventListener("progress", updateProgress);req.upload.addEventListener("load", transferComplete);req.upload.addEventListener("error", transferFailed);req.upload.addEventListener("abort", transferCanceled);req.open();

Fortschrittsereignisse treten für jedes Datenstück auf, das empfangen wird, einschließlich des letzten Stücks, in Fällen, in denen das letzte Paket empfangen wird und die Verbindung geschlossen wird, bevor das Fortschrittsereignis ausgelöst wird. In diesem Fall wird das Fortschrittsereignis automatisch ausgelöst, wenn das Ladeereignis für dieses Paket auftritt. So können Sie den Fortschritt zuverlässig überwachen, indem Sie nur das "progress"-Ereignis beobachten.

Man kann auch alle drei Ladeendbedingungen (abort,load odererror) mit demloadend-Ereignis erkennen:

req.addEventListener("loadend", loadEnd);function loadEnd(e) {  console.log(    "The transfer finished (although we don't know if it succeeded or not).",  );}

Beachten Sie, dass es keine Möglichkeit gibt, sicher zu sein, welche Bedingung den Vorgang zum Stoppen gebracht hat, basierend auf den Informationen, die vomloadend-Ereignis empfangen wurden; Sie können dies jedoch verwenden, um Aufgaben zu handhaben, die in allen End-of-Transfer-Szenarien durchgeführt werden müssen.

Abrufen des letzten Änderungsdatums

function getHeaderTime() {  console.log(this.getResponseHeader("Last-Modified")); // A valid GMTString date or null}const req = new XMLHttpRequest();req.open(  "HEAD", // use HEAD when you only need the headers  "your-page.html",);req.onload = getHeaderTime;req.send();

Etwas tun, wenn sich das letzte Änderungsdatum ändert

Lassen Sie uns zwei Funktionen erstellen:

function getHeaderTime() {  const lastVisit = parseFloat(    window.localStorage.getItem(`lm_${this.filepath}`),  );  const lastModified = Date.parse(this.getResponseHeader("Last-Modified"));  if (isNaN(lastVisit) || lastModified > lastVisit) {    window.localStorage.setItem(`lm_${this.filepath}`, Date.now());    isFinite(lastVisit) && this.callback(lastModified, lastVisit);  }}function ifHasChanged(URL, callback) {  const req = new XMLHttpRequest();  req.open("HEAD" /* use HEAD - we only need the headers! */, URL);  req.callback = callback;  req.filepath = URL;  req.onload = getHeaderTime;  req.send();}

Und zum Testen:

// Let's test the file "your-page.html"ifHasChanged("your-page.html", function (modified, visit) {  console.log(    `The page '${this.filepath}' has been changed on ${new Date(      modified,    ).toLocaleString()}!`,  );});

Wenn Sie wissen möchten, ob sich die aktuelle Seite geändert hat, lesen Sie den Artikel überdocument.lastModified.

Cross-Site XMLHttpRequest

Moderne Browser unterstützen Cross-Site-Anfragen, indem sie den StandardCross-Origin Resource Sharing (CORS) implementieren. Solange der Server konfiguriert ist, um Anfragen von der Herkunft Ihrer Webanwendung zuzulassen, wirdXMLHttpRequest funktionieren. Andernfalls wird eineINVALID_ACCESS_ERR-Ausnahme ausgelöst.

Umgehen des Caches

Ein browserkompatibler Ansatz, um den Cache zu umgehen, besteht darin, einen Zeitstempel an die URL anzuhängen, wobei darauf geachtet wird, ein "?" oder "&" je nach Bedarf einzufügen. Zum Beispiel:

http://example.com/bar.html -> http://example.com/bar.html?12345http://example.com/bar.html?foobar=baz -> http://example.com/bar.html?foobar=baz&12345

Da der lokale Cache nach URL indexiert ist, macht dies jede Anfrage einzigartig, wodurch der Cache umgangen wird.

Sie können URLs automatisch mit dem folgenden Code anpassen:

const req = new XMLHttpRequest();req.open("GET", url + (/\?/.test(url) ? "&" : "?") + new Date().getTime());req.send(null);

Sicherheit

Der empfohlene Weg zur Aktivierung von Cross-Site-Scripting besteht darin, dasAccess-Control-Allow-Origin HTTP-Header in der Antwort auf den XMLHttpRequest zu verwenden.

XMLHttpRequests werden gestoppt

Wenn Sie mit einem XMLHttpRequeststatus=0 undstatusText=null erhalten, bedeutet dies, dass die Anfrage nicht ausgeführt werden durfte. Sie warUNSENT. Ein häufiger Grund dafür ist, dass sich der Ursprung desXMLHttpRequest (bei der Erstellung des XMLHttpRequest) geändert hat, wenn der XMLHttpRequest anschließendopen() ist. Dies kann zum Beispiel passieren, wenn man einen XMLHttpRequest hat, der bei einemonunload-Ereignis für ein Fenster abfeuert, der erwartete XMLHttpRequest wird erstellt, wenn das zu schließende Fenster noch da ist, und schließlich die Anfrage sendet (in anderen Worten,open()) wenn dieses Fenster seinen Fokus verloren hat und ein anderes Fenster den Fokus gewinnt. Der effektivste Weg, dieses Problem zu vermeiden, besteht darin, einen Listener auf dasDOMActivate-Ereignis des neuen Fensters zu setzen, der gesetzt wird, sobald das beendete Fenster seinunload-Event ausgelöst hat.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung der Fetch API
• HTML in XMLHttpRequest
• HTTP-Zugriffskontrolle
• XMLHttpRequest - REST und das reichhaltige Benutzererlebnis
• DasXMLHttpRequest-Objekt: WHATWG-Spezifikation