Javascript XMLHttpRequest (XHR) und Ajax

XMLHttprequest Grundlagen: XML-Datei vom Server lesen

Der XMLHttpRequest (kurz XHR) tauscht Daten zwischen Client und Server im Hintergrund aus, ohne die Seite komplett neu zu laden. Diese Technik ist als Ajax (Asynchronous Javascript And XML) bekannt geworden und hat sich 2005 einen Namen gemacht: Das war der Kern von Web 2.0.

Javascript XHR prüft z.B. Formulareingaben gegen die Datenbank ohne Hin- und Her zwischen Client und Server, lädt zusätzliche Informationen – mit und ohne Anwendung auf dem Server.

18-12-15 SITEMAP

Daten im Hintergrund laden statt neu zu laden

Bei der klassischen Webanwendung (z.B. bei einem 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.

Ablauf des XMLHttpRequest beim Laden einer XML-Datei Javascript sendet einen Request an den Server und lädt eine XML-Datei
Mit dem XMLHttpRequest fordert Javascript z.B. eine Datei auf dem Server an und bindet die Daten in das Dokument ein, ohne die Seite neu zu laden.

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).

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.

XHR open() und send()

Die gebräuchlichste Anweisungssequenz für einen XMLHttpRequest besteht 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 ('GET', 'books.xml', true) sendet den GET-Request an den Server. GET wird benutzt, wenn nur Daten vom Server angefordert werden. Für die Verarbeitung von Formulardaten wird POST benutzt.

Würde das Script also Daten an den Server übertragen, 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 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

Der Ready State des XMLHttpRequests 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.

XMLHttpRequest.response

Die zurückgegebene Objektreferenz 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;
    }
})();
? xmlObj.open ('GET', file, true); xmlObj.send (''); if (xmlObj.status === 200) { processXML(xmlObj.responseXML, location); } < / > XML