Verwendung von XMLHttpRequest

Arten von Anfragen

Eine ber XMLHttpRequest gestellte Anfrage kann auf zwei Arten Daten abrufen, asynchron oder synchron. Die Art der Anfrage wird durch das optionale async-Argument bestimmt (das dritte Argument), das in der Methode XMLHttpRequest.open() festgelegt wird. Wenn dieses Argument true ist oder nicht angegeben wird, wird die XMLHttpRequest asynchron verarbeitet, andernfalls synchron. Eine detaillierte Diskussion und Demonstrationen dieser beiden Arten von Anfragen finden Sie auf der Seite zu synchronen und asynchronen Anfragen. Sie knnen synchrone Anfragen auerhalb von Web-Workern nicht verwenden, da sie die Hauptschnittstelle einfrieren.

Umgang mit Antworten

Es gibt mehrere Arten von Antwort-Attributen, die fr den XMLHttpRequest()-Konstruktor definiert sind. Diese geben dem Client, der die XMLHttpRequest durchfhrt, wichtige Informationen ber den Status der Antwort. Einige Flle, in denen der Umgang mit nicht-textuellen Antworttypen mglicherweise einige Manipulation und Analyse erfordert, sind in den folgenden Abschnitten beschrieben.

Analyse und Manipulation der responseXML-Eigenschaft

Wenn Sie XMLHttpRequest verwenden, um den Inhalt eines entfernten XML-Dokuments abzurufen, ist die responseXML-Eigenschaft ein DOM-Objekt, das ein analysiertes XML-Dokument enthlt. Dies knnte sich als schwierig erweisen, zu manipulieren und zu analysieren. Es gibt vier Hauptmethoden zur Analyse dieses XML-Dokuments:

1. Verwenden von XPath, um Teile davon anzusprechen (oder darauf zu zeigen).
2. Manuelles Parsen und Serialisieren von XML in Zeichenfolgen oder Objekte.
3. Verwenden von XMLSerializer, um DOM-Bume in Zeichenfolgen oder Dateien zu serialisieren.
4. RegExp kann verwendet werden, wenn Sie den Inhalt des XML-Dokuments immer im Voraus kennen. Mglicherweise mchten Sie Zeilenumbrche entfernen, wenn Sie RegExp verwenden, um in Bezug auf Zeilenumbrche zu scannen. Diese Methode ist jedoch ein "letzter Ausweg", da sie bei geringfgigen nderungen des XML-Codes wahrscheinlich fehlschlgt.

Verarbeitung einer responseText-Eigenschaft, die ein HTML-Dokument enthlt

Wenn Sie XMLHttpRequest verwenden, um den Inhalt einer entfernten HTML-Webseite abzurufen, ist die responseText-Eigenschaft eine Zeichenfolge, die das rohe HTML enthlt. Dies knnte 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 die XMLHttpRequest.responseXML-Eigenschaft, wie im Artikel HTML in XMLHttpRequest besprochen.
2. Injizieren Sie den Inhalt in den Body eines Dokumentfragments ber fragment.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. Mglicherweise mchten Sie Zeilenumbrche entfernen, wenn Sie RegExp verwenden, um in Bezug auf Zeilenumbrche zu scannen. Diese Methode ist jedoch ein "letzter Ausweg", da sie bei geringfgigen nderungen des HTML-Codes wahrscheinlich fehlschlgt.

Umgang mit Binrdaten

Obwohl XMLHttpRequest am hufigsten zum Senden und Empfangen von Textdaten verwendet wird, kann es auch verwendet werden, um binre Inhalte zu senden und zu empfangen. Es gibt mehrere gut getestete Methoden, um die Antwort eines XMLHttpRequest dazu zu zwingen, binre Daten zu senden. Diese beinhalten die Nutzung der overrideMimeType()-Methode am XMLHttpRequest-Objekt und sind eine praktikable Lsung.

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

Es stehen jedoch modernere Techniken zur Verfgung, da das Attribut responseType jetzt eine Reihe zustzlicher Inhaltstypen untersttzt, was das Senden und Empfangen von Binrdaten erheblich erleichtert.

Betrachten Sie beispielsweise diesen Schnipsel, der den responseType von "arraybuffer" verwendet, um den entfernten Inhalt in ein ArrayBuffer-Objekt abzurufen, das die rohen Binrdaten speichert.

const req = new XMLHttpRequest();

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

Fr weitere Beispiele schauen Sie sich die Seite Senden und Empfangen von Binrdaten an.

berwachung des Fortschritts

XMLHttpRequest bietet die Mglichkeit, verschiedene Ereignisse zu berwachen, die whrend der Verarbeitung der Anfrage auftreten knnen. Dazu gehren periodische Fortschrittsbenachrichtigungen, Fehlermeldungen und so weiter.

Die Untersttzung fr DOM-berwachung bei progress-Ereignissen von XMLHttpRequest-Transfers folgt der Spezifikation fr Fortschrittsereignisse: Diese Ereignisse setzen das ProgressEvent-Interface um. Die tatschlichen Ereignisse, die Sie berwachen knnen, um den Zustand eines laufenden Transfers zu bestimmen, sind:

progress

Die Menge der abgerufenen Daten hat sich gendert.

load

Der Transfer ist abgeschlossen; alle Daten sind nun in der response.

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 fgen Ereignis-Listener fr die verschiedenen Ereignisse hinzu, die beim Durchfhren eines Datentransfers mit XMLHttpRequest gesendet werden.

Der Fortschrittsereignis-Handler, der durch die updateProgress()-Funktion in diesem Beispiel spezifiziert wird, erhlt die Gesamtanzahl der zu bertragenden Bytes sowie die Anzahl der bisher bertragenen Bytes in den Feldern total und loaded des Ereignisses. Wenn jedoch das Feld lengthComputable falsch ist, ist die Gesamtlnge unbekannt und wird null sein.

Fortschrittsereignisse existieren sowohl fr Download- als auch fr Upload-Transfers. Die Download-Ereignisse werden direkt beim XMLHttpRequest-Objekt ausgelst, wie im obigen Beispiel gezeigt. Die Upload-Ereignisse werden beim XMLHttpRequest.upload-Objekt ausgelst, 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 fr jedes Datenstck auf, das empfangen wird, einschlielich des letzten Stcks, in Fllen, in denen das letzte Paket empfangen wird und die Verbindung geschlossen wird, bevor das Fortschrittsereignis ausgelst wird. In diesem Fall wird das Fortschrittsereignis automatisch ausgelst, wenn das Ladeereignis fr dieses Paket auftritt. So knnen Sie den Fortschritt zuverlssig berwachen, indem Sie nur das "progress"-Ereignis beobachten.

Man kann auch alle drei Ladeendbedingungen (abort, load oder error) mit dem loadend-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 Mglichkeit gibt, sicher zu sein, welche Bedingung den Vorgang zum Stoppen gebracht hat, basierend auf den Informationen, die vom loadend-Ereignis empfangen wurden; Sie knnen dies jedoch verwenden, um Aufgaben zu handhaben, die in allen End-of-Transfer-Szenarien durchgefhrt werden mssen.

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 mchten, ob sich die aktuelle Seite gendert hat, lesen Sie den Artikel ber document.lastModified.

Cross-Site XMLHttpRequest

Moderne Browser untersttzen Cross-Site-Anfragen, indem sie den Standard Cross-Origin Resource Sharing (CORS) implementieren. Solange der Server konfiguriert ist, um Anfragen von der Herkunft Ihrer Webanwendung zuzulassen, wird XMLHttpRequest funktionieren. Andernfalls wird eine INVALID_ACCESS_ERR-Ausnahme ausgelst.

Umgehen des Caches

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

http://example.com/bar.html -> http://example.com/bar.html?12345
http://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 knnen 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, das Access-Control-Allow-Origin HTTP-Header in der Antwort auf den XMLHttpRequest zu verwenden.

XMLHttpRequests werden gestoppt

Wenn Sie mit einem XMLHttpRequest status=0 und statusText=null erhalten, bedeutet dies, dass die Anfrage nicht ausgefhrt werden durfte. Sie war UNSENT. Ein hufiger Grund dafr ist, dass sich der Ursprung des XMLHttpRequest (bei der Erstellung des XMLHttpRequest) gendert hat, wenn der XMLHttpRequest anschlieend open() ist. Dies kann zum Beispiel passieren, wenn man einen XMLHttpRequest hat, der bei einem onunload-Ereignis fr ein Fenster abfeuert, der erwartete XMLHttpRequest wird erstellt, wenn das zu schlieende Fenster noch da ist, und schlielich 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 das DOMActivate-Ereignis des neuen Fensters zu setzen, der gesetzt wird, sobald das beendete Fenster sein unload-Event ausgelst hat.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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