Javascript XHR – XMLHttpRequest

Daten im Hintergrund laden statt neu zu laden

Bei der klassischen Webanwendung (z.B. bei einer Anfrage an ein PHP-Skript) lösen Aktionen des Benutzers einen HTTP-Request zurück zum Server aus.

Das PHP-Script verifiziert den Benutzer, liest Daten aus der Datenbank, berechnet ein paar Zahlen und liefert dann eine neue HTML-Seite an den Client aus. Dabei besteht die neue Seite zum größten Teil aus denselben Elementen wie vorher und nur wenige Inhalte wurden tatsächlich geändert.

XMLHttpRequest: XML-Datei laden

XHR ist eine Schnittstelle zwischen Javascript und den Daten auf dem Server. Im einfachsten Fall holt Javascript Daten aus einer XML- oder JSON-Datei vom Server – ohne Beteiligung einer serverseitigen Anwendung.

Der Name XMLHttpRequest ist etwas irreführend, denn der XMLHttpRequest unterstützt nicht nur XML, sondern alle textbasierten Formate, und sowohl Requests als Antworten (Response).

Der moderne XMLHttpRequest

Javascript Libraries wie jQuery haben den XMLHttpRequest vereinfacht, aber die neuen Javascript-Methoden machen die asynchrone Verarbeitung noch einfacher. Wir müssen uns nicht mehr um Statusabfragen kümmern.

async function holDieDaten(){
   let response = await fetch("data.php");
   if (response.ok) {
      let result = await response.json();  
      document.querySelector(".result").innerText = result.Titel + " "+  result.Autor;
   } else {
      alert(response.status);
   }
}

<?php
$myObj = new stdClass();
$myObj->Titel = "Tim und Struppi";
$myObj->Autor = "Hergé";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Der Funktion holDieDaten ist ein async vorangesetzt. Der Aufruf der Funktion führt nicht dazu, dass der Fluss und die Ausführung der Seite unterbrochen werden, sondern die Funktion macht ihr Ding im Hintergrund, die Anwendung oder die Webseite steht weiterhin unterbrechnungsfrei zur Verfügung.

Dieses asynchrone Verhalten wird als Javascript Promise bezeichnet, einfach eine Funktion, die nicht direkt ausgeführt wird.

Das fetch in der Funktion soll die Antwort von data.php abfangen und der lokalen Variablen response zuweisen. Dieses Beispiel nutzt die einfachste Anwendung von fetch, nämlich GET. await wiederum bedeutet, dass die Anweisungen nicht direkt ausgeführt werden, sondern nur, wenn die Anforderung ausgeführt wurde – das Promise (Versprechen) also erfüllt ist.

Die Antwort – response – kann dann geprüft und die Daten der Antwort genutzt werden.

Wie der XMLHttpRequest funktioniert

Der XMLHttpRequest öffnet eine Verbindung zu einer URL auf dem Server und sendet einen HTTP-Request über diese Verbindung. Die Daten können in Form einer XML- oder JSON-Datei auf dem Server liegen, als flacher Text oder von einem PHP-Script als Antwort auf einen GET- oder POST-Request des XMLHttpRequests übertragen werden.

Das eröffnet Javascript-Anwendungen eine asynchrone Verarbeitung von Daten innerhalb einer bestehenden (persistenten) Verbindung.

Beispiel: XML-Datei lesen

Auf dem Server liegen Daten in einer XML-Datei (data.xml).

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <buchliste>
   <buch>
     <titel>Das Universum in einer Nussschale</titel>
     <autor>Stephen Hawking</autor>
     <jahr>1980</jahr>
   </buch>
   <buch>
     <titel>Ab die Post!</titel>
     <autor>Terry Pratchet</autor>
     <jahr>2003</jahr>
   </buch>
   …
  </buchliste>
</data>

Der Klick auf den Button liest die URL der XML-Datei.

IE11 Unterstützung XHR ? XHR open() und send()

Wenn IE11 noch unter den Hut gebracht werden muss, geht die Zeitreise zurück in die Vergangenheit. Die gebräuchlichste Anweisungssequenz für einen XMLHttpRequest bestand früher aus

1. dem Erzeugen einer Instanz des XMLHttpRequest-Objekts let xhr = new XMLHttpRequest(),
2. Aufruf der open()-Methode,
3. Abfragen von onreadystatechange und Aufruf einer Funktion, die beim Eintreffen der Antwort die Verarbeitung übernimmt.
4. Senden des Requests mit der send()-Methode

let xhr = new XMLHttpRequest();

//         Methode  Datei       asynchron
xhr.open ( "GET",  "books.xml", true );

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //console.log (xhr.responseText);
        document.querySelector(".listxmp").innerHTML = xhr.responseText;
    }
}

xhr.send ();

xmlObj.open sendet den GET-Request (nur Daten holen) an den Server. Für die Verarbeitung von Formulardaten wird POST benutzt. Dann wäre der erste Parameter von xhr.open ein POST, und der Parameter von xhr.send wären die Daten, die an den Server gesendet würden.

Der dritte Parameter steht für async = true. Der Request wird asynchron (quasi gleichzeitig) ausgeführt und blockiert die Seite nicht.

Wann liegt die Antwort auf den Request vor? xhr.onreadystatechange muss vor dem Senden des Requests mit xhr.send() aufgerufen werden.

onreadystatechange gibt den Ablauf der Abfrage zurück und durchläuft die Werte 0 bis 4. onreadystatechange feuert bis zur Antwort "4" ununterbrochen den Status der Abfrage. Heute können wir anstelle von xhr.onreadystatechange xhr.onload nutzen. onload meldet sich nur, wenn der Request erfolgreich durchgeführt wurde.

xhr.responseText ist ein XMLHttpRequest-Objekt, dessen Methoden alle Operationen steuern und dessen Eigenschaften die Daten speichern, die der Server zurückgeliefert.

readystatechange ist das Event, dass alle Antworten abfängt. Ursprünglich war readystatechange das einzige Ereignis des XMLHttpRequest, aber mit XMLHttpRequest Version 2 sind weitere Events wie XHR onload und onerror hinzugekommen.

Prüfen, ob ein Bild oder ein Link existiert

(function(){
	let xhr = new XMLHttpRequest();
    xhr.open('HEAD', "xmlhttp.png", true);
    xhr.send();
     
    if (xhr.status == "404") {
    	console.log ("Gibts nicht");
        return false;
    } else {
    	console.log ("Alles OK xmlhttp.png gibt es");
        return true;
    }
})();