XMLHttpRequest mit PHP und JSON

xmlhttp request mit onload anstelle von onreadystatechange

Der XMLHttpRequest hat seit seinem ersten offiziellen Auftritt neue Methoden, Eigenschaften und Events hinzugewonnen, die das Arbeiten erleichtern und den Code effizienter gestalten. Die alten Browser, die den Scriptcode für den XMLHttpRequest mit zusätzlichen Abfragen aufgefüllt haben, sind verschwunden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Der moderne XMLHttpRequest

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.

let 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");
}

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

Bilder nachladen mit XHR

Die aufwändige Gallery in diesem Beispiel wird dynamisch von einer PHP-Anwendung auf dem Server erzeugt und erst geladen, wenn der Benutzer bis zu dieser Stelle scrollt. Das hält die Ladezeit der Seite kurz und entlastet den Benutzer, der die Seite vorzeitig verlässt (und damit auch den Server).

Ein Intersection Observer reagiert, wenn der Benutzer bis zum geplanten Einsatzort im Layout scrollt, sendet einen Get-Request an die Anwendung (xhr.open und initialisiert das Einsetzen der Bilder, wenn die Antwort vom Server ankommt (xhr.onload).

let showgallery = document.querySelector("#showgallery");

let observer = new IntersectionObserver((entry, observer) => {
	let xhr = new XMLHttpRequest();
		xhr.open('GET', 'php-backend.php');
		xhr.send(null);

		xhr.onload = function () { 
			// Antwort vom Server
			showimages (xhr.responseText);
		} 
		
		xhr.onerror = function () {
			console.log('Error: ' + xhr.status); 
		}	
	}
);

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.

let 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 );
   let obj;
   if (e.target.responseType === 'json') {
      obj = xhr2.response;
   } else {
      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();
}