{"id":55038,"date":"2022-10-18T08:55:15","date_gmt":"2022-10-18T07:55:15","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=55038&#038;post_type=knowledgebase&#038;preview_id=55038"},"modified":"2025-10-01T20:17:18","modified_gmt":"2025-10-01T19:17:18","slug":"javascript-http-anfrage","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/","title":{"rendered":"Ein Leitfaden zu JavaScript HTTP Anfragen"},"content":{"rendered":"<p>Die Interaktion zwischen dem <a href=\"https:\/\/kinsta.com\/de\/blog\/backend-vs-frontend\/\">Frontend und dem Backend<\/a> von Websites wird durch HTTP-Anfragen erm\u00f6glicht. Funktionen wie das Aktualisieren eines neuen\/alten Benutzers in einer Datenbank, das Ver\u00f6ffentlichen eines Blogbeitrags in deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Dashboard<\/a>, das L\u00f6schen eines Bildes aus deinem Profil und das Aktualisieren deines Lebenslaufs erfordern alle eine Interaktion zwischen einem Server und einem Client, um Daten zu \u00e4ndern.<\/p>\n<p>Bei der Entwicklung von Webanwendungen \u2014 sowohl Frontend- als auch Full-Stack-Webanwendungen \u2014 interagieren wir oft mit Daten, die auf verschiedenen Datenbanken und Servern gespeichert sind. Diese Server k\u00f6nnen Dritten geh\u00f6ren oder von den Entwicklern eines Projekts erstellt werden.<\/p>\n\n<p>Um mit diesen Servern zu interagieren, k\u00f6nnen wir verschiedene HTTP-Methoden verwenden, um Daten anzufordern. Mit speziellen HTTP-Verben wie POST, GET, PUT\/PATCH und DELETE k\u00f6nnen wir Daten auf Servern erstellen, lesen, aktualisieren und l\u00f6schen (oder CRUD).<\/p>\n<p>In diesem Lernprogramm lernst du die verschiedenen M\u00f6glichkeiten kennen, mit denen du HTTP-Anfragen an entfernte Server stellen und CRUD-Operationen <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">in JavaScript<\/a> durchf\u00fchren kannst.<\/p>\n<p>In jedem Abschnitt wird eine neue Methode zum Senden von HTTP-Anfragen vorgestellt. Wir beginnen mit den eingebauten Methoden wie der Fetch-API und dem XMLHttpRequest-Objekt, bevor wir uns einige Open-Source-HTTP-Anfrage-Bibliotheken wie Axios und SuperAgent ansehen.<\/p>\n<p>Los geht&#8217;s!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist eine JavaScript-HTTP-Anfrage?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-http-anfrage\/\">HTTP-Anfragen<\/a> in JavaScript sind eine Reihe von vordefinierten Methoden, um mit Daten auf Servern zu interagieren.<\/p>\n<p>Jede Anfrage, die an einen Server gesendet wird, enth\u00e4lt einen Endpunkt und die Art der Anfrage, die gesendet wird. Du kannst einen Endpunkt als Gateway zwischen zwei Programmen\u02d0 dem Client und dem Server sehen.<\/p>\n<p>Der Client ist das Programm, das eine Anfrage sendet, w\u00e4hrend der Server die Anfrage empf\u00e4ngt. Je nach G\u00fcltigkeit der Anfrage sendet der Server eine Antwort zur\u00fcck. Wenn die Anfrage erfolgreich war, sendet der Server die Daten entweder im XML- oder JSON-Format (in den meisten F\u00e4llen JSON) zur\u00fcck, und wenn die Anfrage fehlschl\u00e4gt, sendet der Server eine <a href=\"https:\/\/kinsta.com\/de\/blog\/fehlern-in-javascript\/\">Fehlermeldung<\/a>.<\/p>\n<p>Die Antworten, die der Server zur\u00fcckschickt, sind normalerweise mit <a href=\"https:\/\/kinsta.com\/de\/blog\/http-statuscodes\/\">Statuscodes<\/a> versehen. Diese Codes helfen uns zu verstehen, was der Server mit einer Anfrage sagen will. Hier sind einige von ihnen und was sie bedeuten:<\/p>\n<ul>\n<li>100-199 bedeutet eine informatorische Antwort.<\/li>\n<li>200-299 steht f\u00fcr eine erfolgreiche Anfrage.<\/li>\n<li>300-399 bezeichnet eine Umleitung.<\/li>\n<li>400-499 bezeichnet einen Client-Fehler.<\/li>\n<li>500-599 bezeichnet einen <a href=\"https:\/\/kinsta.com\/de\/blog\/500-internal-server-error\/\">Serverfehler<\/a>.<\/li>\n<\/ul>\n<p>In den folgenden Abschnitten werden wir mehr \u00fcber einige dieser Codes erfahren.<\/p>\n<p>Im n\u00e4chsten Abschnitt lernst du die verschiedenen M\u00f6glichkeiten kennen, wie du HTTP-Anfragen in JavaScript stellen kannst.<\/p>\n<h2>Wie man eine HTTP-Anfrage in JavaScript stellt<\/h2>\n<p>Dieser Abschnitt ist in Unterabschnitte gegliedert, in denen du verschiedene Methoden f\u00fcr HTTP-Anfragen in JavaScript kennen lernst.<\/p>\n<p>F\u00fcr jede Methode gibt es ein Beispiel, das zeigt, wie du POST-, GET-, PUT\/PATCH- und DELETE-Anfragen an Server senden kannst.<\/p>\n<p>Der <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSON-Platzhalter<\/a> dient als Remote-Server\/Endpunkt, an den alle unsere Anfragen gesendet werden.<\/p>\n<p>Lasst uns eintauchen!<\/p>\n<h3>1. Wie man eine HTTP-Anfrage in JavaScript mit XMLHttpRequest (AJAX) stellt<\/h3>\n<p>XMLHttpRequest ist ein integriertes JavaScript-Objekt, das f\u00fcr die Interaktion mit Servern und das Laden von Inhalten in Webseiten verwendet wird, ohne den Browser neu zu laden.<\/p>\n<p>In diesem Abschnitt erf\u00e4hrst du, wie du mit XMLHttpRequest POST-, GET-, PUT\/PATCH- und DELETE-Anfragen senden kannst.<\/p>\n<p>AJAX wird verwendet, um asynchrone HTTP-Anfragen zu stellen. Das bedeutet einfach, dass andere Teile deines JavaScript-Codes weiterlaufen k\u00f6nnen, w\u00e4hrend die Antwort auf eine Anfrage noch aussteht, ohne dass du warten musst, bis die Anfrage abgeschlossen ist.<\/p>\n<p>Mit AJAX kannst du auch \u00c4nderungen an einem bestimmten Abschnitt deiner Webseite vornehmen, ohne dass der Besucher gezwungen ist, die gesamte Seite neu zu laden.<\/p>\n<p>AJAX arbeitet standardm\u00e4\u00dfig mit dem XMLHttpRequest-Objekt, daher k\u00f6nnen die Beispiele in diesem Abschnitt als AJAX-Anfragen betrachtet werden.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Urspr\u00fcnglich konntest du angeben, ob eine Anfrage asynchron sein sollte oder nicht, indem du einen <code>true<\/code> (asynchron) und <code>false<\/code> Parameter in deiner Anfrage verwendet hast, aber letzteres ist jetzt veraltet.<\/p>\n<\/aside>\n\n<h4>Wie man eine GET-Anfrage in JavaScript mit XMLHttpRequest sendet<\/h4>\n<p>Du verwendest die GET-Anfrage, wenn du Daten von einem Server abrufen willst. Um eine erfolgreiche GET-Anfrage mit XMLHttpRequest in JavaScript zu senden, solltest du sicherstellen, dass die folgenden Schritte korrekt ausgef\u00fchrt werden:<\/p>\n<ol>\n<li>Erstelle ein neues XMLHttpRequest-Objekt.<\/li>\n<li>\u00d6ffne eine Verbindung, indem du den Anfragetyp und den Endpunkt (die URL des Servers) angibst.<\/li>\n<li>Sende die Anfrage ab.<\/li>\n<li>Warte auf die Antwort des Servers.<\/li>\n<\/ol>\n<p>Nachdem wir nun einige der Schritte gesehen haben, die zum Senden einer POST-Anfrage mit XMLHttpRequest geh\u00f6ren, sehen wir uns ein Codebeispiel an\u02d0<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"https:\/\/jsonplaceholder.typicode.com\/users\");\nxhr.send();\nxhr.responseType = \"json\";\nxhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 200) {\n    const data = xhr.response;\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};<\/code><\/pre>\n<p>Wir werden den obigen Code aufschl\u00fcsseln, damit du besser verstehst, was hier passiert.<\/p>\n<p>Als Erstes haben wir ein neues XMLHttpRequest-Objekt erstellt und es in einer Variablen namens <code>xhr<\/code> gespeichert. Das ist:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();<\/code><\/pre>\n<p>Wir haben dann den Anfragetyp (GET) und den Endpunkt angegeben, an den die Anfrage gesendet werden soll (in diesem Fall &#8222;<a href=\"https:\/\/jsonplaceholder.typicode.com\/users\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/users<\/a>&#8222;)\u02d0<\/p>\n<pre><code class=\"language-js\">xhr.open(\"GET\", \"https:\/\/jsonplaceholder.typicode.com\/users\");<\/code><\/pre>\n<p>Um die Anfrage an den Server zu senden, haben wir die Methode <code> send()<\/code> verwendet.<\/p>\n<p>Wenn der Server Daten zur\u00fccksendet, kannst du das Format angeben, in dem die Daten zur\u00fcckgegeben werden.<\/p>\n<p>In den meisten F\u00e4llen wird JSON verwendet. Wir haben also sichergestellt, dass unsere Daten im JSON-Format zur\u00fcckgegeben werden, indem wir dies hinzugef\u00fcgt haben:<\/p>\n<pre><code class=\"language-js\">xhr.responseType = \"json\";<\/code><\/pre>\n<p>An diesem Punkt haben wir erfolgreich eine GET-Anfrage gesendet. Als N\u00e4chstes m\u00fcssen wir mit einem Ereignis-Listener abh\u00f6ren, was der Server sagt:<\/p>\n<pre><code class=\"language-js\">xhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 200) {\n    const data = xhr.response;\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};<\/code><\/pre>\n<p>Im obigen Code verwenden wir den <code>onload<\/code> Event-Listener. Mit einer <code>if<\/code> -Anweisung haben wir den Status der Serverantwort \u00fcberpr\u00fcft.<\/p>\n<p>Wenn der Status des Clients 4 (DONE) ist und der Statuscode 200 (erfolgreich) lautet, werden die Daten auf der Konsole protokolliert. Andernfalls wird eine Fehlermeldung mit dem Fehlerstatus angezeigt.<\/p>\n<p>Wenn du bis zu diesem Punkt ohne Fehler weitergearbeitet hast, solltest du ein Array von Objekten in deiner Konsole haben\u02d0<\/p>\n<pre><code class=\"language-js\">[{\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}]<\/code><\/pre>\n<p>Das sind die Daten, die du vom Server erhalten hast.<\/p>\n<h4>Wie man eine POST-Anfrage in JavaScript mit XMLHttpRequest sendet<\/h4>\n<p>Mit der POST-Anfrage kannst du neue Informationen (Daten) als Objekt an den Server\/die Datenbank senden. Bei dem Objekt kann es sich um Informationen \u00fcber einen neuen Benutzer, einen neuen Eintrag in der Aufgabenliste oder etwas anderes handeln, das du protokollieren m\u00f6chtest.<\/p>\n<p>Das Codebeispiel, das du in diesem Abschnitt siehst, \u00e4hnelt dem aus dem letzten Abschnitt. Der Hauptunterschied besteht darin, dass POST-Anfragen einige Informationen erfordern, die normalerweise in einem Objekt gespeichert werden, bevor sie an den Server gesendet werden.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"POST\", \"https:\/\/jsonplaceholder.typicode.com\/posts\");\nxhr.setRequestHeader(\"Content-Type\", \"application\/x-www-form-urlencoded\");\nconst body = JSON.stringify({\n  title: \"Hello World\",\n  body: \"My POST request\",\n  userId: 900,\n});\nxhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 201) {\n    console.log(JSON.parse(xhr.responseText));\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send(body);<\/code><\/pre>\n<p>Im obigen Code werden die Informationen, die an den Server gesendet werden sollen, in einer Variablen namens <code>body<\/code> gespeichert. Sie enth\u00e4lt drei Eigenschaften\u02d0 <code>title<\/code>, <code>body<\/code>, und <code>userId<\/code>.<\/p>\n<p>Beachte, dass die Variable <code>body<\/code>, die das Objekt enth\u00e4lt, in ein JSON-Objekt umgewandelt werden muss, bevor sie an den Server gesendet wird. Die Umwandlung erfolgt mit der Methode <code>JSON.stringify()<\/code>.<\/p>\n<p>Um sicherzustellen, dass das JSON-Objekt an den Server gesendet wird, wird es als Parameter an die Methode <code>send()<\/code> \u00fcbergeben:<\/p>\n<pre><code class=\"language-js\">xhr.send(body);<\/code><\/pre>\n<h4>Wie man eine PATCH-Anfrage in JavaScript mit XMLHttpRequest sendet<\/h4>\n<p>Die PATCH-Anfrage wird verwendet, um bestimmte Eigenschaften eines Objekts zu aktualisieren. Sie unterscheidet sich von der PUT-Methode, mit der das gesamte Objekt aktualisiert wird.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr eine PATCH-Anfrage mit XMLHttpRequest in JavaScript:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"PATCH\", \"https:\/\/jsonplaceholder.typicode.com\/posts\/101\");\nxhr.setRequestHeader(\"Content-type\", \"application\/json; charset=utf-8\");\nconst body = JSON.stringify({\n  body: \"My PATCH request\",\n});\nxhr.onload = () =&gt; {\n  var data = JSON.parse(xhr.responseText);\n  if (xhr.readyState == 4 && xhr.status == \"200\") {\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send(body);<\/code><\/pre>\n<p>Der obige Code protokolliert im Erfolgsfall den Teil des Objekts, der aktualisiert und an den Server gesendet wurde.<\/p>\n<h4>Wie man eine DELETE-Anfrage in JavaScript mit XMLHttpRequest sendet<\/h4>\n<p>Wie der Name schon sagt, wird die DELETE-Methode verwendet, um Daten von einem Server zu l\u00f6schen. Das gilt f\u00fcr jede JavaScript-HTTP-Methode.<\/p>\n<p>In den meisten F\u00e4llen musst du die ID der Daten angeben, die du l\u00f6schen willst. Die ID ist normalerweise ein Parameter im Endpunkt\/URL.<\/p>\n<p>Hier ein Beispiel f\u00fcr eine DELETE-Anfrage\u02d0<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"DELETE\", \"https:\/\/jsonplaceholder.typicode.com\/posts\/3\");\nxhr.onload = function () {\n  var data = JSON.parse(xhr.responseText);\n  if (xhr.readyState == 4 && xhr.status == \"200\") {\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send();<\/code><\/pre>\n<p>Der obige Code l\u00f6scht ein Objekt mit einem Beitrag mit der ID 3, wie im Endpunkt angegeben (&#8222;<a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\/3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/posts\/3<\/a>&#8222;).<\/p>\n<h3>2. Wie man eine HTTP-Anfrage in JavaScript mit jQuery stellt<\/h3>\n<p>jQuery vereinfacht das Abrufen von Daten von Servern, indem es die Syntax k\u00fcrzer und unkomplizierter macht.<\/p>\n<p>In diesem Abschnitt erf\u00e4hrst du, wie du <a href=\"https:\/\/kinsta.com\/de\/blog\/http3\/\">HTTP<\/a>-Anfragen mit verschiedenen jQuery-Methoden stellst.<\/p>\n<h4>Wie man eine GET-Anfrage in JavaScript mit jQuery sendet<\/h4>\n<p>jQuery stellt uns die Methode <code>$.get()<\/code> zur Verf\u00fcgung, um GET-Anfragen an Server zu senden. Die Methode nimmt zwei Parameter entgegen \u2014 die URL zum Server und eine Callback-Funktion, die ausgef\u00fchrt wird, wenn die Anfrage erfolgreich ist.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">$.get(\"https:\/\/jsonplaceholder.typicode.com\/users\", (data, status) =&gt; {\n  console.log(data);\n});<\/code><\/pre>\n<p>Wie im obigen Code zu sehen ist, hat die Methode <code>$.get()<\/code> die URL (<a href=\"https:\/\/jsonplaceholder.typicode.com\/users\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/users<\/a>) und eine anonyme Callback-Funktion als Parameter.<\/p>\n<p>\u00dcber die Callback-Funktion kannst du auf die Daten der Anfrage und den Status der Anfrage zugreifen. In unserem Fall haben wir die Daten auf der Konsole protokolliert.<\/p>\n<p>So einfach ist es, eine GET-Anfrage mit jQuery zu senden.<\/p>\n<h4>Wie man eine POST-Anfrage in JavaScript mit jQuery sendet<\/h4>\n<p>Um eine POST-Anfrage mit jQuery zu senden, verwenden wir die Methode <code>$.post()<\/code>. Sie ben\u00f6tigt drei Parameter: die URL, die Daten, die an den Server gesendet werden sollen, und eine Callback-Funktion.<\/p>\n<pre><code class=\"language-js\">const body = JSON.stringify({\n  title: \"Hello World\",\n  body: \"My POST request\",\n  userId: 900,\n});\n$.post(\"https:\/\/jsonplaceholder.typicode.com\/users\", body, (data, status) =&gt; {\n  console.log(data);\n});<\/code><\/pre>\n<p>Im obigen Code haben wir ein Objekt erstellt, das an den Server gesendet werden soll, und es in einer Variablen namens <code>body<\/code> gespeichert. Diese Variable wurde in der Methode <code>$.post()<\/code> als zweiter Parameter \u00fcbergeben.<\/p>\n<p>Mit der Callback-Funktion haben wir das Ergebnis der Anfrage auf der Konsole protokolliert.<\/p>\n<h3>3. Wie man in jQuery mit der Methode $.ajax() asynchrone Anfragen stellt<\/h3>\n<p>Bevor wir mit dem Senden von PATCH- und DELETE-Anfragen fortfahren, lass uns \u00fcber die Methode <code>$.ajax()<\/code> sprechen.<\/p>\n<p>Die Methode <code>$.ajax()<\/code> in jQuery wird verwendet, um asynchrone Anfragen zu stellen.<\/p>\n<p>Die Syntax unterscheidet sich von den anderen Methoden.<\/p>\n<p>Hier siehst du, wie du eine GET-Anfrage mit der Methode <code>$.ajax()<\/code> stellst:<\/p>\n<pre><code class=\"language-js\">$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/users\",\n  type: \"GET\",\n  success: function (result) {\n    console.log(result);\n  },\n});<\/code><\/pre>\n<p>Die Methode <code>$.ajax()<\/code> hat verschiedene Parameter, die wir verwenden k\u00f6nnen.<\/p>\n<p>Im obigen Code gibt der Parameter <code>url<\/code> die URL zum Server an, der Parameter <code>type<\/code> den Anfragetyp und der Parameter <code>success<\/code> ruft eine Callback-Funktion auf, wenn die Anfrage erfolgreich ist.<\/p>\n<p>Im n\u00e4chsten Abschnitt erf\u00e4hrst du, wie du PATCH- und DELETE-Anfragen mit der <code>$.ajax()<\/code> Methode von jQuery senden kannst.<\/p>\n<h4>Wie man eine PATCH-Anfrage in JavaScript mit der jQuery-Methode $.ajax() sendet<\/h4>\n<p>In diesem Abschnitt erf\u00e4hrst du, wie du mit der jQuery-Methode <code>$.ajax()<\/code> PATCH-Anfragen sendest.<\/p>\n<p>Hier ist der Code:<\/p>\n<pre><code class=\"language-js\">const body = JSON.stringify({\n  body: \"My PATCH request\",\n});\n$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/posts\/101\",\n  type: \"PATCH\",\n  data: body,\n  success: function (result) {\n    console.log(result);\n  },\n});<\/code><\/pre>\n<p>Im obigen Code wird die Eigenschaft, die aktualisiert werden soll, in der Variablen <code>body<\/code> gespeichert. Diese wird dann als Wert f\u00fcr den Parameter <code>data<\/code> verwendet.<\/p>\n<p>Wenn die Anfrage erfolgreich ist, wird die Funktion f\u00fcr den Parameter <code>success<\/code> ausgef\u00fchrt.<\/p>\n<h4>So sendest du eine DELETE-Anfrage in JavaScript mit der Methode $.ajax() von jQuery<\/h4>\n<p>Um eine DELETE-Anfrage mit der Methode <code>$.ajax()<\/code> von jQuery zu senden, sind nur ein paar Zeilen Code erforderlich.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/posts\/3\",\n  type: \"DELETE\",\n  success: function (result) {\n    console.log(result)\n  },\n});<\/code><\/pre>\n<p>Wie oben zu sehen ist, mussten wir nur die URL mit der ID des zu l\u00f6schenden Objekts, die Art der Anfrage und eine Funktion angeben, die ausgef\u00fchrt wird, wenn die Anfrage erfolgreich ist.<\/p>\n<h4>Wie man die $.getJSON-Methode in jQuery verwendet<\/h4>\n<p>Die Methode <code>$.getJSON<\/code> bietet eine k\u00fcrzere M\u00f6glichkeit, GET-Anfragen zu senden.<\/p>\n<p>Um eine erfolgreiche Anfrage zu stellen, musst du nur die URL und die Callback-Funktion angeben. Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">$.getJSON(\"https:\/\/jsonplaceholder.typicode.com\/users\", function (result) {\n  console.log(result)\n});<\/code><\/pre>\n<p>Im obigen Code haben wir die URL an den Server und die Funktion, die nach erfolgreicher Anfrage ausgef\u00fchrt wird, als Parameter an die Methode <code>$.getJSON<\/code> \u00fcbergeben.<\/p>\n<p>Der obige Code protokolliert ein Array von Objekten mit Benutzerinformationen auf der Konsole.<\/p>\n<h3>4. Wie man eine HTTP-Anfrage in JavaScript mit der Fetch-API stellt<\/h3>\n<p>Die <code>fetch<\/code> API ist eine der beliebtesten M\u00f6glichkeiten, mit JavaScript mit Servern zu interagieren. Es handelt sich dabei um eine native JavaScript-API, die beim Stellen von Anfragen Versprechen unterst\u00fctzt.<\/p>\n<p>Die Syntax der <code>fetch<\/code> API ist sehr einfach zu verstehen, wie du in den folgenden Abschnitten sehen wirst.<\/p>\n<h4>Wie man eine GET-Anfrage in JavaScript mit der Fetch-API sendet<\/h4>\n<p>Um eine GET-Anfrage mit der <code>fetch<\/code> API zu senden, brauchst du nur die URL. Diese gibt dann ein Versprechen zur\u00fcck, auf das du mit der Methode <code>then()<\/code> oder den Schl\u00fcsselw\u00f6rtern <code>async<\/code> und <code>await<\/code> zugreifen kannst.<\/p>\n<p>Schauen wir uns ein Beispiel an:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>Im obigen Code haben wir die URL an die Methode <code>fetch<\/code> \u00fcbergeben; diese gibt ein Versprechen zur\u00fcck. Anschlie\u00dfend haben wir mit der Methode <code>then()<\/code> auf die Antwort des Servers zugegriffen. Die Antwort wurde mit der Methode <code>response.json()<\/code> in ein JSON-Objekt umgewandelt.<\/p>\n<p>Nachdem wir die Antwort erhalten haben, verwenden wir eine weitere <code>then()<\/code> Methode, um die Daten auf der Konsole auszugeben.<\/p>\n<h4>Wie man eine POST-Anfrage in JavaScript mit der Fetch-API sendet<\/h4>\n<p>Die Fetch-Methode hat einen zweiten Parameter, mit dem wir den Body (die zu sendenden Daten) und den Typ der zu sendenden Anfrage angeben k\u00f6nnen. Mit diesem zweiten Parameter k\u00f6nnen wir POST- und PATCH-Anfragen senden.<\/p>\n<p>Sieh dir diesen Beispielcode an:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  method: \"POST\",\n  body: JSON.stringify({\n    title: \"Hello World\",\n    body: \"My POST request\",\n    userId: 900,\n  }),\n  headers: {\n    \"Content-type\": \"application\/json; charset=UTF-8\",\n  },\n})\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>Im obigen Code haben wir im zweiten Parameter der Methode <code>fetch<\/code> Anfrageoptionen hinzugef\u00fcgt. <code>method<\/code> wurde verwendet, um den Anfragetyp festzulegen, <code>body<\/code> gab die Daten an, die an den Server gesendet werden sollten, und <code>headers<\/code> wurde verwendet, um festzulegen, dass wir JSON-Daten an den Server senden w\u00fcrden.<\/p>\n<p>Wie beim Senden einer GET-Anfrage wurde das zur\u00fcckgesendete Versprechen\/die Antwort mit der Methode <code>then()<\/code> abgerufen.<\/p>\n<h4>Wie man eine PUT-Anfrage in JavaScript mit der Fetch-API sendet<\/h4>\n<p>In anderen Abschnitten, in denen wir eine Anfrage gesendet haben, um ein Objekt auf dem Server zu aktualisieren, haben wir PATCH verwendet. In diesem Abschnitt werden wir PUT verwenden, mit dem du ein Objekt vollst\u00e4ndig aktualisieren kannst.<\/p>\n<p>Hier ist ein Beispiel, das die <code>fetch<\/code> API verwendet:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\/1\", {\n  method: \"PUT\",\n  body: JSON.stringify({\n    id: 1,\n    title: \"My PUT request\",\n    body: \"Updating the entire object\",\n    userId: 1,\n  }),\n  headers: {\n    \"Content-type\": \"application\/json; charset=UTF-8\",\n  },\n})\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>Da wir eine PUT-Anfrage senden, m\u00fcssen wir die zu aktualisierenden Daten angeben, die als Wert an die Anfrageoption <code>body<\/code> \u00fcbergeben werden.<\/p>\n<p>Au\u00dferdem haben wir die ID des zu aktualisierenden Objekts als letzten Parameter in der URL angegeben. Wenn die Anfrage erfolgreich ausgef\u00fchrt wird, solltest du das aktualisierte Objekt in der Konsole sehen.<\/p>\n<h4>So sendest du eine DELETE-Anfrage in JavaScript mit der Fetch-API<\/h4>\n<p>Eine DELETE-Anfrage zu senden ist ziemlich einfach \u2014 du musst nur die ID des zu l\u00f6schenden Objekts angeben. Du kannst die Methode <code>then()<\/code> verwenden, um die Antwort vom Server zu erhalten, wie wir es bei den anderen Anfragen getan haben.<\/p>\n<p>Hier ist ein kurzes Beispiel:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\/3\", {\n  method: \"DELETE\",\n});<\/code><\/pre>\n<p>Der obige Code l\u00f6scht ein Objekt mit einer ID von 3.<\/p>\n<h3>5. Wie man eine HTTP-Anfrage in JavaScript mit Axios stellt<\/h3>\n<p>Axios ist eine auf Versprechen basierende Bibliothek eines Drittanbieters zum Senden von HTTP-Anfragen. Wie die meisten modernen HTTP-Clients vereinfacht sie den Prozess, der mit dem Senden von Anfragen an einen Server verbunden ist.<\/p>\n<p>In diesem Abschnitt erf\u00e4hrst du, wie du mit Axios GET-, POST-, PUT- und DELETE-Anfragen an einen Server senden kannst.<\/p>\n<p>Beachte, dass Axios nicht in JavaScript integriert ist \u2014 du musst es separat installieren, um seine Funktionen nutzen zu k\u00f6nnen. Um Axios in deinem Projekt zu installieren, f\u00fchre den folgenden Befehl im <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Terminal deines Projekts<\/a> aus:<\/p>\n<pre><code class=\"language-js\">npm install axios<\/code><\/pre>\n<h4>Wie man eine GET-Anfrage in JavaScript mit Axios sendet<\/h4>\n<p>Um eine GET-Anfrage mit Axios zu senden, musst du nur die URL an die Methode <code>get()<\/code> \u00fcbergeben, die ein Versprechen zur\u00fcckgibt. Auf die Antwort aus dem Versprechen kannst du mit der Methode <code>then()<\/code> zugreifen.<\/p>\n<p>Sehen wir uns ein Beispiel an:<\/p>\n<pre><code class=\"language-js\">axios.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.then((response) =&gt; console.log(response.data))\n.catch((error) =&gt; console.log(error));<\/code><\/pre>\n<p>Der obige Code loggt ein Array von Objekten aus, das die vom Server zur\u00fcckgegebenen Daten enth\u00e4lt. Du wirst feststellen, dass wir die zur\u00fcckgegebenen Objekte nicht in JSON-Objekte umwandeln m\u00fcssen \u2014 Axios erledigt das im Hintergrund, und du kannst mit <code>response.data<\/code> auf die Daten zugreifen.<\/p>\n<p>Um eventuelle Fehler abzufangen, haben wir die Methode <code>catch()<\/code> verwendet.<\/p>\n<h4>Wie man eine POST-Anfrage in JavaScript mit Axios sendet<\/h4>\n<p>Die POST-Anfrage in Axios ben\u00f6tigt zwei Parameter \u2014 die URL und die Daten, die an den Server gesendet werden sollen. Du kannst die Daten in einer Variablen speichern oder sie direkt als Parameter \u00fcbergeben.<\/p>\n<p>So geht&#8217;s:<\/p>\n<pre><code class=\"language-js\">axios.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  title: \"POST request with Axios\",\n  body: \"POST request\",\n  userId: 10,\n})\n.then(function (response) {\n  console.log(response.data);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<p>Im obigen Beispiel senden wir Daten an den Server. Die Daten werden als zweiter Parameter an die Methode <code>post()<\/code> \u00fcbergeben.<\/p>\n<p>Wenn die Anfrage erfolgreich gesendet wurde, siehst du das Ergebnis auf der Konsole.<\/p>\n<h4>Wie man eine PUT-Anfrage in JavaScript mit Axios sendet<\/h4>\n<p>Das Senden einer PUT-Anfrage mit Axios ist \u00e4hnlich wie das Senden einer POST-Anfrage. Um eine PUT-Anfrage zu senden, gibst du die URL (einschlie\u00dflich der ID des zu aktualisierenden Objekts) und die zu aktualisierenden Daten als zweiten Parameter in der Methode <code>put()<\/code> an.<\/p>\n<p>Im folgenden Beispiel wird ein Objekt mit der ID 10 aktualisiert:<\/p>\n<pre><code class=\"language-js\">axios.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\", {\n  title: \"PUT request with Axios\",\n  body: \"PUT request\",\n  userId: 10,\n})\n.then(function (response) {\n  console.log(response.data);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<h4>Wie man eine DELETE-Anfrage in JavaScript mit Axios sendet<\/h4>\n<p>Um eine DELETE-Anfrage zu senden, gibst du die ID des zu l\u00f6schenden Objekts in der URL an.<\/p>\n<p>Wie \u00fcblich musst du die URL zusammen mit der ID des zu l\u00f6schenden Objekts angeben.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">axios.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.then(function (response) {\n  console.log(response);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<h3>6. Wie man eine HTTP-Anfrage in JavaScript mit SuperAgent stellt<\/h3>\n<p>SuperAgent ist eine der \u00e4ltesten Bibliotheken, um HTTP-Anfragen in JavaScript zu stellen. Genau wie Axios unterst\u00fctzt sie Versprechen und hat vorgefertigte Methoden, um verschiedene HTTP-Anfragen an Server zu senden.<\/p>\n<p>Um SuperAgent zu verwenden, installiere es mit dem unten stehenden Befehl:<\/p>\n<pre><code class=\"language-js\">npm install superagent<\/code><\/pre>\n<p>Wir beginnen mit einem Beispiel f\u00fcr eine GET-Anfrage.<\/p>\n<h4>Wie man eine GET-Anfrage in JavaScript mit SuperAgent sendet<\/h4>\n<p>SuperAgent stellt uns eine <code>get()<\/code> Methode zum Senden von GET-Anfragen zur Verf\u00fcgung. Die URL wird als Parameter der Methode \u00fcbergeben.<\/p>\n<p>Das Versprechen, das von der Anfrage zur\u00fcckgegeben wird, kann dann mit der Methode <code>end()<\/code> bewertet werden, wie in diesem Beispiel zu sehen ist:<\/p>\n<pre><code class=\"language-js\">superagent\n.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.end((error, response) =&gt; {\n  console.log(response.body);\n});<\/code><\/pre>\n<h4>Wie man eine POST-Anfrage in JavaScript mit SuperAgent sendet<\/h4>\n<p>Wenn du eine POST-Anfrage mit SuperAgent sendest, \u00fcbergibst du die Daten, die an den Server gesendet werden sollen, als Parameter an die <code>send()<\/code> Methode von SuperAgent:<\/p>\n<pre><code class=\"language-js\">superagent\n.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.send({\n  title: \"POST request with SuperAgent\",\n  body: \"POST request\",\n  userId: 10,\n})\n.set(\"X-API-Key\", \"foobar\")\n.set(\"accept\", \"json\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<p>Im obigen Code wurde die URL als Parameter f\u00fcr die Methode <code>post()<\/code> \u00fcbergeben. Die zu sendenden Daten wurden an die Methode <code>send()<\/code> \u00fcbergeben. Mit der Methode <code>end()<\/code> erhalten wir das Ergebnis der Serverantwort.<\/p>\n<h4>Wie man eine PUT-Anfrage in JavaScript mit SuperAgent sendet<\/h4>\n<p>Du kannst eine PUT-Anfrage in SuperAgent mit der Methode <code>put()<\/code> senden. Genau wie im letzten Abschnitt werden die zu aktualisierenden Daten als Parameter an die Methode <code>send()<\/code> \u00fcbergeben.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">superagent\n.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.send({\n  title: \"PUT request with SuperAgent\",\n  body: \"PUT request\",\n  userId: 10,\n})\n.set(\"X-API-Key\", \"foobar\")\n.set(\"accept\", \"json\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<h4>Wie man eine DELETE-Anfrage in JavaScript mit SuperAgent sendet<\/h4>\n<p>Um eine L\u00f6schanfrage zu senden, gibst du einfach die ID des zu l\u00f6schenden Objekts in der URL an. Diese wird als Parameter in der Methode <code>delete()<\/code> verwendet.<\/p>\n<pre><code class=\"language-js\">superagent\n.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<h3>7. Wie man eine HTTP-Anfrage in JavaScript mit Qwest stellt<\/h3>\n<p>Qwest ist eine AJAX-Bibliothek f\u00fcr die Interaktion mit Servern. Sie ist derzeit auf <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-github\/\">GitHub<\/a> archiviert \u2014 der Ersteller hat die Pflege der Bibliothek mit dem Aufkommen der <code>fetch<\/code> API und Axios eingestellt.<\/p>\n<p>Qwest unterst\u00fctzt auch die Verwendung von Versprechen.<\/p>\n<p>In den folgenden Unterabschnitten erf\u00e4hrst du, wie du mit Qwest GET-, POST-, PUT- und DELETE-Anfragen senden kannst.<\/p>\n<h4>Wie man eine GET-Anfrage in JavaScript mit Qwest sendet<\/h4>\n<p>Qwest hat eine <code>get()<\/code> Methode, mit der du GET-Anfragen senden kannst. Hier erf\u00e4hrst du, wie du sie verwendest:<\/p>\n<pre><code class=\"language-js\">qwest.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n\n.then((xhr, response) =&gt; console.log(response));<\/code><\/pre>\n<h4>Wie man eine POST-Anfrage in JavaScript mit Qwest sendet<\/h4>\n<p>Als zweiter Parameter werden die Daten, die an einen Server gesendet werden sollen, an die Methode <code>post()<\/code> \u00fcbergeben. Der erste Parameter ist die URL.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">qwest.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  title: 'POST request with Qwest',\n  body: 'POST request',\n  userId: 30\n})\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<h4>Wie man eine PUT-Anfrage in JavaScript mit Qwest sendet<\/h4>\n<p>Die Syntax ist dieselbe wie im vorherigen Abschnitt. Du musst nur den Anfragetyp \u00e4ndern und dann die ID des zu aktualisierenden Objekts sowie die Daten angeben, mit denen du das Objekt aktualisieren m\u00f6chtest.<\/p>\n<p>Sieh dir dieses Beispiel an:<\/p>\n<pre><code class=\"language-js\">qwest.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/30\", {\n  title: 'PUT request with Qwest',\n  body: 'PUT request',\n  userId: 30\n})\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<p>Beachte, dass die ID in der URL angegeben wird und nicht in dem Objekt, das an den Server gesendet wird.<\/p>\n<h4>Wie man eine DELETE-Anfrage in JavaScript mit Qwest sendet<\/h4>\n<p>Um ein Objekt von einem Server zu l\u00f6schen, musst du wie \u00fcblich die URL und die ID des zu l\u00f6schenden Objekts angeben. Sowohl die URL als auch die ID des zu l\u00f6schenden Objekts werden als Parameter an die Methode <code>delete()<\/code> in Qwest \u00fcbergeben.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">qwest.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/30\")\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<p>Sobald die Anfrage erfolgreich ausgef\u00fchrt wurde, wird ein Objekt mit der ID 30 gel\u00f6scht.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Unsere F\u00e4higkeit, mit Hilfe von JavaScript mit Servern zu interagieren, hat sich im Laufe der Jahre weiterentwickelt. Mit einer wachsenden und aktiven Gemeinschaft von <a href=\"https:\/\/kinsta.com\/de\/blog\/frontend-entwickler\/\">JavaScript-Entwicklern<\/a> werden st\u00e4ndig \u00c4nderungen vorgenommen und neue Tools eingef\u00fchrt, die den Prozess einfacher und leichter machen.<\/p>\n<p>Die Methoden, die in diesem Tutorial besprochen werden, gelten nicht nur f\u00fcr entfernte Server \u2014 sie k\u00f6nnen auch f\u00fcr die Interaktion mit deinen eigenen Servern verwendet werden, wenn du Full-Stack-Webanwendungen erstellst. Sie funktionieren auch mit zahlreichen <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliotheken und -Frameworks<\/a>.<\/p>\n\n<p>In diesem Tutorium haben wir dir gezeigt, wie du HTTP-Anfragen in JavaScript stellst. Anhand verschiedener Beispiele und Erkl\u00e4rungen haben wir dir gezeigt, wie du GET-, POST-, PUT\/PATCH- und DELETE-Anfragen mit integrierten JavaScript-Methoden und Bibliotheken von Drittanbietern stellen kannst.<\/p>\n<p>Das Erstellen und Bereitstellen einer Website kann eine m\u00fchsame Aufgabe sein, unabh\u00e4ngig von deinen F\u00e4higkeiten. Kinsta macht dies mit DevKinsta einfach und m\u00fchelos. DevKinsta wird von \u00fcber 25.000 Entwicklern, Webdesignern und Freiberuflern genutzt und bietet eine lokale Umgebung f\u00fcr die Entwicklung von WordPress-Themes, Plugins und mehr. <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">Probier es aus!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Interaktion zwischen dem Frontend und dem Backend von Websites wird durch HTTP-Anfragen erm\u00f6glicht. Funktionen wie das Aktualisieren eines neuen\/alten Benutzers in einer Datenbank, das Ver\u00f6ffentlichen &#8230;<\/p>\n","protected":false},"author":240,"featured_media":55039,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[855,474,465,276,28],"topic":[952],"class_list":["post-55038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-http-request","tag-http-status-codes","tag-javascript","tag-web-development","tag-webdev","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ein Leitfaden zu JavaScript HTTP Anfragen - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein Leitfaden zu JavaScript HTTP Anfragen\" \/>\n<meta property=\"og:description\" content=\"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-18T07:55:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:17:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ihechikara Abba\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ihechikara Abba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\"},\"author\":{\"name\":\"Ihechikara Abba\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\"},\"headline\":\"Ein Leitfaden zu JavaScript HTTP Anfragen\",\"datePublished\":\"2022-10-18T07:55:15+00:00\",\"dateModified\":\"2025-10-01T19:17:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\"},\"wordCount\":3423,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\",\"keywords\":[\"http request\",\"HTTP Status Codes\",\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\",\"name\":\"Ein Leitfaden zu JavaScript HTTP Anfragen - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\",\"datePublished\":\"2022-10-18T07:55:15+00:00\",\"dateModified\":\"2025-10-01T19:17:18+00:00\",\"description\":\"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Tutorials\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ein Leitfaden zu JavaScript HTTP Anfragen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\",\"name\":\"Ihechikara Abba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"caption\":\"Ihechikara Abba\"},\"description\":\"Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics. Connect with Ihechikara on Twitter.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/ihechivinabba\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ein Leitfaden zu JavaScript HTTP Anfragen - Kinsta\u00ae","description":"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/","og_locale":"de_DE","og_type":"article","og_title":"Ein Leitfaden zu JavaScript HTTP Anfragen","og_description":"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-10-18T07:55:15+00:00","article_modified_time":"2025-10-01T19:17:18+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","type":"image\/png"}],"author":"Ihechikara Abba","twitter_card":"summary_large_image","twitter_description":"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Ihechikara Abba","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/"},"author":{"name":"Ihechikara Abba","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26"},"headline":"Ein Leitfaden zu JavaScript HTTP Anfragen","datePublished":"2022-10-18T07:55:15+00:00","dateModified":"2025-10-01T19:17:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/"},"wordCount":3423,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","keywords":["http request","HTTP Status Codes","JavaScript","web development","webdev"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/","url":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/","name":"Ein Leitfaden zu JavaScript HTTP Anfragen - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","datePublished":"2022-10-18T07:55:15+00:00","dateModified":"2025-10-01T19:17:18+00:00","description":"In diesem Lernprogramm lernst du, wie du HTTP-Requests an entfernte Server stellen und CRUD-Operationen in JavaScript durchf\u00fchren kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/10\/javascript-http-request.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Tutorials","item":"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Ein Leitfaden zu JavaScript HTTP Anfragen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26","name":"Ihechikara Abba","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","caption":"Ihechikara Abba"},"description":"Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics. Connect with Ihechikara on Twitter.","url":"https:\/\/kinsta.com\/de\/blog\/author\/ihechivinabba\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/55038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=55038"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/55038\/revisions"}],"predecessor-version":[{"id":60809,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/55038\/revisions\/60809"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/55038\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/55039"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=55038"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=55038"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=55038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}