Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest

Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 29. Mai 2015
Bookmarke mich
Share on pocket

Komplexe Web-Applikationen setzen zunehmend auf JavaScript. Dabei werden auch Inhalte immer häufiger per JavaScript geladen. Bislang erfolgte dies über ein XMLHttpRequest-Objekt, was aber immer vergleichsweise umständlich war. So sind hierzu die Methoden open() und send() notwendig, um Inhalte zu laden. Per Callback-Funktion, die über einen Event-Listener aufgerufen wird, können die Inhalte dann abgerufen werden. Die neue Fetch-API vereinfacht das Laden von Inhalten deutlich.

fetchapi-teaser_DE

Laden mit fetch() und then()

Nicht immer sind die umfangreichen Möglichkeiten von XMLHttpRequest notwendig. Gerade, wenn es darum geht, ein JSON-Objekt oder einen einfachen Text aus einer Datei zu laden, war das XMLHttpRequest-Objekt immer schon überdimensioniert. Dennoch gab es keine Alternative dazu.

var beispiel = new XMLHttpRequest();

beispiel.open("GET", "beispiel.txt", true);
beispiel.send();

beispiel.addEventListener("readystatechange", function () {
  if (this.readyState == 4) {
    console.log(this.responseText);
  }
}, false);

Das Beispiel zeigt das recht umständliche Verfahren, um eine einfache Textdatei zu laden und deren Inhalt in der Konsole auszugeben. Während per open() die Art und URL des Requests definiert wird, wird er über send() ausgeführt. Per addEventListener() wird auf die Antwort des Servers gewartet und per readyState wird der Status des Request abgefragt. Wird der Statuscode 4 ausgegeben, war der Request erfolgreich und der Inhalt wird per responseText ausgegeben.

Die neue Fetch-API hat einen anderen Ansatz. Anders als XMLHttpRequest ist die Fetch-API in erster Linie für das Empfangen von Inhalten gedacht. Darüber hinaus kommt die Fetch-API ohne Event-Listener aus. Stattdessen werden sogenannte Promises verwendet, um die Inhalte nach erfolgreichem Request auszulesen.

Während man also per fetch()-Methode beispielsweise eine einfache Textdatei oder ein JSON-Objekt lädt, wird mit der Promise-Methode then() die Antwort des Requests verarbeitet.

fetch("beispiel.txt").then(
  function (antwort) {
    return antwort.text(); 
  }
).then(
  function (text) {
    console.log(text);
  }
);

Das Beispiel zeigt, wie die fetch()-Methode zusammen mit Promises – also der then()-Methode – funktioniert. Per fetch() wird zunächst der Request abgesetzt. Im Beispiel wird eine einfache Textdatei aufgerufen. War die Methode erfolgreich, wird per then() eine Funktion ausgeführt. Dieser wird die Antwort des Requests übergeben. Die Antwort ist in diesem Fall der Inhalt der Textdatei beispiel.txt. Per text() wird die Antwort als reiner Text bereitgestellt und ausgegeben.

Es folgt eine zweite then()-Methode, die dann ausgeführt wird, wenn die Bereitstellung der Antwort als Text erfolgreich war. Diese zweite then()-Methode gibt letztendlich den Text in die Konsole aus.

Alternativ ist es auch möglich, ein JSON-Objekt per Fetch-API auszulesen. Hierbei wird der Funktion der ersten then()-Methode die Antwort des Requests als JSON bereitgestellt.

fetch("beispiel.json").then(
  function (antwort) {
    return antwort.json(); 
  }
).then(
  function (json) {
    console.log(json["beispiel"]);
  }
);

Über die zweite then()-Methode erhält man im Beispiel den Zugriff auf das JSON-Objekt. Hier wird der Wert der JSON-Eigenschaft beispiel in die Konsole geschrieben.

Metadaten des Fetch-Requests auslesen

Jeder Fetch-Request besitzt eine Reihe von Metadaten, die ausgelesen werden können. Dazu gehören die Eigenschaften status, statusText, url und type.

fetch("beispiel.json").then(
  function (antwort) {
    console.log(antwort.status);
    console.log(antwort.statusText);
    console.log(antwort.url);
    console.log(antwort.type);
  }
)

Die Eigenschaft status gibt den HTTP-Statuscode wieder. Wird die per fetch()-Methode aufgerufene Datei erfolgreich geladen, wird 200 zurückgegeben. Nur in diesem Fall würde auch ein etwaiger zweiter Promise – also eine zweite then()-Methode – ausgeführt. Die Eigenschaft statusText gibt den HTTP-Status als Text zurück, im Erfolgsfall also OK.

Die Eigenschaft url hingegen gibt die in der fetch()-Methode angegebene URL aus. Als Letztes exisitiert noch die Eigenschaft type, welche darüber informiert, woher der Request stammt. Wird der Wert basic ermittelt, stammt der Request von derselben Domain. Der Wert cors siganlisiert, dass die Antwort von einer fremden Domain stammt, welche im Rahmen des Cross-Origin-Resource-Sharings (CORS) jedoch den Zugriff durch den Server, der den Request abgesetzt hat, erlaubt.

Als letzter möglicher Wert für status kann opaque existieren. Dies bedeutet, dass die Antwort von einer fremden Domain kommt, die keine Berechtigung für das Cross-Origin-Resource-Sharing erteilt hat. Der Inhalt kann dementsprechend nicht gezeigt werden.

Außerdem hat man per headers.get() die Möglichkeit, jeden einzelnen HTTP-Header der Antwort auszulesen.

console.log(antwort.headers.get("Content-Type"));

Im Beispiel wird der Header Content-Type ausgelesen und in die Konsole geschrieben.

Eigenschaften für fetch()-Aufruf definieren

Über einen Aufruf der Fetch-API lassen sich auch diverse Eigenschaften festlegen. Diese werden in Form eines Literalobjekts als zweiter Parameter der fetch()-Methode hinzugefügt. So kann man beispielsweise den Modus des Requests festlegen. Über mode bestimmt man, ob der Request ausschließlich im Rahmen der Same-Origin-Policy von derselben Domain zugelassen werden (same-origin) oder ob auch Fremddomains erlaubt sein sollen, sofern sie im Rahmen des Cross-Origin-Resource-Sharings den Zugriff zulassen.

fetch("http://example.com/beispiel.json", {
  mode: "cors"
}).then(
  …
)

Im Beispiel wird der Modus auf cors gesetzt. Es werden also fremde Domains zugelassen.

POST-Request absetzen

Neben dem einfachen Laden von Inhalten erlaubt die Fetch-API auch das Absetzen von POST-Requests. Über die Eigenschaft method kann die fetch()-Methode einen POST-Request initiieren. Über die Eigenschaft body überträgt man Inhalte. So hat man die Möglichkeit, dem Request Parameter mitzugeben und kann die Antwort des Requests je nach übergebenem Parameter beeinflussen.

fetch("beispiel.json", {
  mode: "cors",
  method: "post",
  body: "seite=kontakt&benutzer=hans",
  headers: { 
    "Content-Type": "text/plain" 
  }
}).then(
  …
)

Im Beispiel werden per body Parameter mit dem Request übergeben. Zusätzlich ist es möglich, HTTP-Header anzugeben. Im Beispiel wird der Content-Type definiert.

Browser-Support

Da die Fetch-API noch recht neu ist, können noch nicht alle Browser etwas mit ihr anfangen. Derzeit wird sie nur von Chrome ab Version 42 unterstützt. Firefox wird sie ab Version 39 unterstützen. Für den Internet Explorer und Safari ist derzeit keine geplante Unterstützung bekannt. Daher ist die Fetch-API zum jetzigen Zeitpunkt für den produktiven Einsatz noch nicht geeignet.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Warscher – Digital Experts

Horgen

CAF Webdesign Agentur

Berlin

Niels Neumann Online Marketing

Limburgerhof

YOYABA

Hamburg

JOHDA Webdesign

Berlin

Alle Agenturpartner

Jobs

Online Marketing Manager

Innsbruck

Cloud Engineer Container & Kubernetes

Karlsruhe

SEA Manager in München

München

Webdesigner – Vollzeit

Remote

Texter / Junior Content Marketing Manager

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Eine Antwort zu „Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest“
— was ist Deine Meinung?

  1. David sagt:
    4. Juni 2015 um 18:10 Uhr

    Haha, ich lese die ganze Zeit den Artikel und frage mich, na wie siehts da wohl mit dem Browsersupport aus, um dann am Ende zu lesen: Nicht so gut :/ Aber wie immer bei Javascript, das wird schon.

    So müssen wir uns weiterhin mit dem XMLHTTPREQUEST rumschlagen, beziehungsweise auf jQuery ausweichen, was die meisten wohl machen werden. Selbst mit der fetch().then()-Methodik ist jQuery.post(), ajax() und get() doch relativ einfacher zu handeln.

    Eine schöne Methode außerhalb von jQuery sollte es aber wirklich geben, denn nicht immer will man sich den ganzen Overload geben nur wegen einer kurzen Ajax-Abfrage.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.