Techblog

Fetch API - XMLHttpRequest in schön

Von Thorsten Rinne @ThorstenRinne  auf Twitter
1. August 2016

Moderne Web-Applikationen und -seiten ohne Ajax kann man sich heute nicht mehr vorstellen. Single-Page-Applikationen auf Basis von AngularJS oder ReactJS wären gar nicht möglich. Der Begriff „Ajax“ tauchte erstmalig im Jahr 2005 im Rahmen eines Blogposts auf: Ajax: A New Approach to Web Applications. Hier geht's zum archivierten Artikel bei webarchive.org.

Der Autor Jesse James Garrett nutzte „Ajax“ für die Abkürzung von Asynchronous JavaScript and XML. Die Idee und Technologie dahinter waren dabei nicht neu, sondern bereits einige Jahre bekannt: XMLHttpRequest, kurz XHR. XHR wurde Ende der 1990er Jahre von Microsoft entwickelt, um Seiten-Reloads in der Weblösung von Outlook zu minimieren, indem man Daten asynchron und dynamisch nachladen kann.

Ein wohlgehütetes Geheimnis und ein wichtiger Grund für den Erfolg von jQuery ist die offizielle API von XMLHttpRequest:

  1. if (window.XMLHttpRequest) { // Für Chrome, Firefox, Safari, Edge ...
  2.   request = new XMLHttpRequest();
  3. } else if (window.ActiveXObject) { // Für alte Internet Explorer
  4.   try {
  5.     request = new ActiveXObject('Msxml2.XMLHTTP');
  6.   }
  7.   catch (e) {
  8.     try {
  9.       request = new ActiveXObject('Microsoft.XMLHTTP');
  10.     }
  11.     catch (e) {}
  12.   }
  13. }
  14.  
  15. request.open('GET', 'https://www.maibornwolff.de/awesome/endpoint', true);
  16. request.send(null);

 

Für Nutzer von jQuery sieht das sehr viel einfacher aus, da der obere Code von jQuery gekapselt wird:

$.get('https://www.maibornwolff.de/awesome/endpoint');

 

Weit aus schöner funktioniert das mit der neuen Fetch API der Web Hypertext Application Technology Working Group (WHATWG). Sie steht bereits in den aktuellen Versionen von Chrome und Firefox zur Verfügung. Die Fetch API ist dabei nicht nur für HTTP Requests und Responses oder XMLHttpRequests angedacht, sondern auch für neue Technologien wie Service Worker. Mehr über Service Worker im Artikel von Sebastian Springer in iX 06/2016. Hier gehts zur Download-Seite

Ein weiteres Schmankerl ist, dass ein Promise-Objekt zurückgegeben wird und der Code somit sehr gut lesbar wird.

  1. fetch('https://www.maibornwolff.de/awesome/endpoint')
  2.   .then(function(response) {
  3.     return response.json();
  4.   })
  5.   .then(function(data) {
  6.     console.log(data);
  7.   })
  8.   .catch(function(error) {
  9.     console.error(error);
  10.   });

 

Die Fetch API lässt sich aber natürlich auch für POST verwenden. Auch hier ist die Benutzung denkbar einfach:

  1. fetch('https://www.maibornwolff.de/awesome/endpoint',
  2.   {
  3.     method: 'post',
  4.     headers: {
  5.       'Accept': 'application/json',
  6.       'Content-Type': 'application/json'
  7.     },
  8.     body: JSON.stringify({
  9.       title: 'Fetch API - XMLHttpRequest in schön',
  10.       url: 'https://www.maibornwolff.de/blog/techblog',
  11.     })
  12.   })
  13.   .then(function (response) {
  14.     console.log(response);
  15.   })
  16.   .catch(function (error) {
  17.     console.error(error);
  18.   });

 

Wie man sieht: Die Fetch API viel einfacherer als die direkte Nutzung von XMLHttpRequest. Leider unterstützen sie derzeit nur Chrome und Firefox, der Support für Microsoft Edge und Safari ist in Arbeit. Das soll natürlich niemanden davon abhalten, diese API schon heute zu verwenden: Github bietet ein Polyfill für die fetch()-Funktion unter https://github.com/github/fetch an. Dort findet man auch andere Anwendungsbeispiele wie Dateiupload, Fehlerbehandlung und Cookies.

 

">

Neuen Kommentar schreiben

Public Comment form

  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd><p><h1><h2><h3>

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

ME Landing Page Question

Erhalten Sie regelmäßig Praxis-Tipps per E-Mail

Praxis-Tipps per E-Mail erhalten