XMLHttpRequest mit JSON, Progress und formData

Der moderne XMLHttpRequest

Der XMLHttpRequest hat immer noch seine Vorteile gegenüber fetch: Fortschrittskontrolle mit Progress, einen timeout wenn's zu lang dauert, JSON und onload anstelle von onreadystatechanged.

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();

     Request-Methode  URL der Anwendung
            │            │
            ▼            ▼
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.

xhr.send(null): Bilder nachladen mit XHR

Die 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); 
		}	
	}
);

xhr.send(formData): Datei-Upload mit Progress-Bar

Auch wenn fetch heute bevorzugt wird, hat der XMLHttpRequest Vorteile: Die Fortschrittskontrolle für Upload (xhr.upload.onprogress) und Downloads (xhr.onprogress) ist sinnvoll, wenn größere Dateien bewegt werden.

<div class="progress">
	<input type="file" id="fileElem" 
	       multiple accept="image/*" 
	       onchange="handleFiles(this.files)">
	<progress id='progress' max='100' value="0" ></progress>
</div>

Überträgt das Skript Daten an den Server, ist der erste Parameter von xhr.open ein POST, und der Parameter von xhr.send verweist auf die Daten, die an den Server gesendet werden sollen.

function handleFiles (files) {
	const xhr = new XMLHttpRequest();
	xhr.open("POST", "upload.php");
	
	// Upload progress event
	xhr.upload.onprogress = function(event) {
		if (event.lengthComputable) {
			const percentComplete = (event.loaded / event.total) * 100;
			document.querySelector ("#progress").value = percentComplete;
		}
	};
	
	// On load event
	xhr.onload = function() {
		if (xhr.status >= 200 && xhr.status < 300) {
			console.log ("Upload erfolgreich:", xhr.responseText);
		} else {
			console.error ("Upload fehlgeschlagen:", xhr.statusText);
		}
	};
	
	// On error event
	xhr.onerror = function() {
		console.error("Netzwerkfehler");
	};
	
	const formData = new FormData();
	formData.append("file", files[0]);
	xhr.send(formData);
}

Das Beispiel sendet Daten mit formData als Name-Wert-Paar und kodiert die Daten bei der Übertragung.

XMLHttpRequest onload statt onreadystatechange

Früher wurde beim XMLHTTPRequest 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 = 
      `<div class="title">${obj.book.title}</div>
		<div class="author">${obj.author}</div>
		<div class="published">${obj.book.published}</div>
		<img src="${obj.book.image}">
		<div class="content">${obj.book.content}</div>`;
};

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();
}