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.
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
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>
Als Ausgabe erhalten wir:
Dies ist ein jQuery AJAX Beispiel
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.
Ähnliche Artikel
BEST-BACKGROUNDSShutterstock jQuery.addClass() – gezielte Klassenmanipulation für Webseiteneffekte
Die Funktion jQuery.addClass() kann dynamisch Klassen zu HTML-Elementen hinzufügen. Die Methode beeinflusst dadurch die Gestaltung oder das Verhalten Ihrer Webseite. In diesem Artikel stellen wir Ihnen die Syntax und den Anwendungsbereich von jQuery.addClass() vor, damit Sie beeindruckende Effekte auf Ihrer Website erzielen können.
ESB ProfessionalShutterstock jQuery.each-Tutorial: So verwenden Sie die Code-Iteration
Die jQuery.each-Funktion ist ein nützliches Werkzeug für Entwickler und Entwicklerinnen, um einfach und schnell durch eine Gruppe von Elementen zu iterieren und Aktionen auszuführen. In unserem Tutorial erklären wir Ihnen die grundlegende Syntax von .each() und zeigen Ihnen praktische Beispiele, die Sie in Ihren eigenen Projekten anwenden können.
jQuery-Tutorial: Grundlagen zu Selektoren, Syntax und Co.
Mithilfe der JavaScript-Bibliothek jQuery können Sie HTML-Elemente spielend einfach anpassen. Von CSS bekannte Selektoren wie der Element-Selektor oder der .class-Selektor helfen Ihnen dabei, die gewünschten Inhalte auszuwählen und mit verschiedenen Aktionen zu manipulieren. Außerdem lassen sich Codezeilen schreiben, die auf die Navigation und Eingabe der Webseitenbesucher reagieren und…
whiteMoccaShutterstock jQuery.animate(): So entwerfen Sie Animationen für Ihre Website
Die jQuery.animate()-Methode vereinfacht die Animationserstellung für interaktive Benutzererlebnisse auf Webseiten. Sie bietet verschiedene vorgefertigte Effekte wie das Ein- und Ausblenden von Elementen, das Schwenken oder das Skalieren. Diese Aktionen können einfach angewendet werden, ohne dass umfangreicher eigener Code erforderlich ist. Wir erläutern Ihnen die Syntax und Verwendung der…
