CSS, HTML und Javascript mit {stil}

XMLHttpRequest mit PHP und JSON

xmlhttprequest mit onload anstelle von onreadystatechange und einfachem Zugriff auf JSON

Der XMLHttpRequest hat seit seinem ersten offiziellen Auftritt neue Methoden, Eigenschaften und Events hinzugewonnen, die das Arbeiten erleichtern und den Code effizienter gestalten.

Gleichzeit können wir davon ausgehen, dass die alten Browser verschwunden sind, die den Scriptcode für den XMLHttpRequest mit zusätzlichen Abfragen aufgefüllt haben.

Hinzugekommen sind timeout FormData Binärdaten auf den Server laden Fortschrittskontrolle bei Uploads Media Type und Kodierung der Antworten

Heute können wir auf die Abfragen nach alten IE-Versionen verzichten. Das macht den XMLHttpRequest schlank und einfache Aufgaben überschaubar.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'php-backend.php');
xhr.send(null);

Das ist der HTTP-Request an den Server. Der erste Parameter der Methode open gibt die Request-Methode an (GET oder POST), der zweite Parameter die URL zum Anwendung auf dem Server. Die letzte Zeile sendet den Request mit dem Parameter null. Würde das Script 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.

xhr.onload = function () { 
   console.log(xhr.responseText); // Der zurückgegebene Text
   showimages (xhr.responseText); // Die Daten einspielen
} 
	
xhr.onerror = function () {
   console.log("Ein Fehler ist aufgetreten");
}

Heute ist der XMLHttpRequest nicht aufwändiger als XHR mit jQuery.

Die aufwändige Gallery in diesem Beispiel wird erst geladen, wenn der Benutzer bis zu dieser Stelle gescrollt ist. Das hält die Ladezeit der Seite kurz und entlastet den Benutzer, der die Seite vorzeitig verlässt (und damit auch den Server).

XMLHttpRequest onload statt onreadystatechange

In fast allen Beispielen für den XMLHTTPRequest wird die Antwort vom Server unter dem Dauerfeuer von onreadystatechange erwartet. onreadystatechange feuert tatsächlich aus allen Kanonen: Ununterbrochen vom Absenden des Requests bis zur Ankunft der Antwort. onload hingegen feuert nur, wenn der Request erfolgreich heimkehrt.

onload wurde als Event in XMLHttpRequest 2 aufgenommen, während onreadystatechange seit der ersten Spezifikation dabei ist.

XMLHttpRequest responseType = "json"

Wird der XHR-Request mit responseType = "json" abgeschickt, liegt die Response fertig geparst als JSON-Objekt vor.

var xhr2 = new XMLHttpRequest();
xhr2.open("GET", "autor.json", true);
xhr2.responseType = "json";
xhr2.send();

Die Abfrage if (e.target.responseType === 'json') wendet sich an Browser, die responseType = "json" unterstützen. Ältere Browser (bis IE10) werden in den else-Zweig geschickt und das Script übernimmt das Parsen des JSON-Strings.

xhr2.onload = function (e) {
   console.log ( this.response );

   if (e.target.responseType === 'json') {
      var obj = xhr2.response;
   } else {
      var obj = JSON.parse(e.target.responseText);
   }

   document.querySelector(".result").innerHTML = 
      obj.author  + 
      obj.book.title  + 
      obj.book.published  + 
      "<img src='" + obj.book.image + "'>";
};

XMLHttpRequest timeout

Falls das Laden die Geduld des Betrachters strapazieren sollte, kann ein timeout-Event nach einer akzeptablen Wartezeit den XMLHttpRequest abbrechen, um Geduld bitten oder ein Warterädchen einspielen.

Alle modernen Browser, aber nicht IE11 und Vorgänger.

xhr2.timeout = 2500;

Timeout abfangen und abbrechen oder den Request erneut absenden.

xhr2.ontimeout = function () {
   message.innerHTML = "Das dauert mal wieder viel zu lang … ";
   // xhr.abort();
   xhr.send();
}
XHR XMLHttpRequest Out of the box