# 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](https://www.ionos.de/digitalguide/hosting/blogs/wordpress-jquery/) genutzt werden kann.

Tipp Ein [Webspace](https://www.ionos.de/hosting/webspace "Webspace mieten bei IONOS") 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/) 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](https://developer.hosting.ionos.de "IONOS Entwickler 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](https://developer.hosting.ionos.de/docs "IONOS Entwickler API").

## Anwendungsbeispiel für jQuery.ajax()-Methoden

jQuery.ajax() lässt sich auch mit den klassischen **jQuery-Funktionen** wie [jQuery.click()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-click/), [jQuery.append()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-append/) und [jQuery.each()](https://www.ionos.de/digitalguide/websites/web-entwicklung/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.

```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>
<div class="hash d-none" hidden>hash_5958bfb7ecdc969b7d0d4235ac59c1585bcda158</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Als Ausgabe erhalten wir:

```text
Dies ist ein jQuery AJAX Beispiel
```

Tipp Mit [Deploy Now](https://www.ionos.de/hosting/deploy-now "Automatische Deployments mit IONOS") 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.


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-ajax/](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-ajax/) for AI/LLM consumption.