jQuery AJAX – so funktioniert asynchrone Datenübertragung

Durch die Verwendung von jQuery AJAX kann eine Webseite dynamisch auf Benutzerinteraktionen reagieren, Daten vom Server abrufen oder senden, Inhalte aktualisieren und vieles mehr, ohne dass die Seite komplett neu geladen werden muss. Asynchrone Datenübertragungen mit AJAX führen daher zu reaktionsschnellen Webanwendungen.

Was sind jQuery.ajax() Methoden?

AJAX steht für „Asynchronous JavaScript and XML“. Die Skriptsprache JavaScript und die jQuery-Bibliothek umfassen AJAX-Methoden zum asynchronen Austausch von Daten zwischen einem Client und einem Server. JQuery AJAX Requests verwenden hierbei intern das XMLHttpRequest-Objekt von JavaScript. Asynchrone HTTP-Anfragen werden über AJAX dem Webserver gesendet, der die Antwort in einem bestimmten Format wie XML oder JSON zurückliefert. Dadurch können einzelne Bereiche einer Webseite aktualisiert werden, ohne die gesamte Seite neu laden zu müssen. Ein Vorteil ist, dass AJAX sehr flexibel einsetzbar ist und beispielsweise auch mit jQuery in WordPress genutzt werden kann.

Tipp

Ein Webspace von IONOS bietet Ihnen die Möglichkeit, Ihr persönliches Webprojekt online zu bringen – sei es Ihre erste jQuery-Anwendung, ein Blog oder ein eigenes Forum. Bei IONOS erhalten Sie günstigen Speicherplatz, inklusive Domain- und E-Mail-Adresse.

Welche jQuery.ajax()-Methoden gibt es?

Um die Funktionsweise von .ajax()-Methoden zu verstehen, ist ein gewisses Grundverständnis von jQuery erforderlich. Wir empfehlen daher, das jQuery-Tutorial durchzugehen, bevor Sie in AJAX eintauchen.

  • ajax(): sendet asynchrone HTTP-Anfragen an den Server
  • get(): versendet ein HTTP GET Request, um die Daten vom Server zu laden
  • post(): verschickt ein jQuery AJAX Post Request, um bestimmte Daten dem Server zu übermitteln
  • getJSON(): überträgt ein jQuery AJAX GET Request an den Server und erwartet die Antwort im JSON-Format
  • getScript(): verschickt ein HTTP GET Request, um eine JavaScript-Datei von einem Server zu beziehen und auszuführen
  • load(): sendet ein HTTP-Request, um HTML oder Text vom Server zu laden und diese an DOM-Elemente zu knüpfen
Tipp

Mit der IONOS API können Sie Ihre IONOS Hosting-Produkte bequem und sicher verwalten. Sie erhalten einen Zugriffsschlüssel für die Verwendung der IONOS APIs. Eine ausführliche Dokumentation finden Sie außerdem auf der Informationsseite der IONOS Entwickler API.

Anwendungsbeispiel für jQuery.ajax()-Methoden

jQuery.ajax() lässt sich auch mit den klassischen jQuery-Funktionen wie jQuery.click(), jQuery.append() und jQuery.each() kombinieren.

Im Folgenden beziehen wir den Text „Dies ist ein jQuery AJAX Beispiel“ von der URL /jquery/getdata, die als erstes Argument an die jQuery.ajax()-Methode übergeben wird. Für die Besetzung des zweiten Parameters haben wir uns für eine Callback-Funktion entschieden, die die Server-Antwort bearbeitet und die Daten innerhalb des p-Tags in den DOM einfügt. Die Methode .ajax() sendet standardmäßig ein GET-Request an den entsprechenden Server. Das Abschicken des jQuery-AJAX-Requests wird durch ein Klickevent vom Button „btn“ ausgelöst. Danach wird der Text im Browser angezeigt.

<!DOCTYPE html>
                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata',    // request url
                {
                success: function (data, status, xhr) {     // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="jQuery AJAX Request senden" />
     <p></p>
</body>
</html>
html

Als Ausgabe erhalten wir:

Dies ist ein jQuery AJAX Beispiel
text
Tipp

Mit Deploy Now von IONOS können Sie statische Webseiten und Single-Page-Applikationen direkt via Github deployen. Verbinden Sie einfach Ihr Repository mit Deploy Now und übermitteln Sie Änderungen mit dem Push-Befehl. Deploy Now erkennt eine Vielzahl von Frameworks automatisch und konfiguriert passend Ihren Build. Optimieren Sie Ihren Workflow mit der Deploy Now Membership.

War dieser Artikel hilfreich?