jQuery Schnellstart – AJAX Crashkurs

Du lernst in dieser Lektion, was AJAX ist und wie es funktioniert.

Was ist AJAX?

Ajax steht für Asynchronous Javascript And Xml (Asynchrones Javascript und Xml).

Ajax ist nur ein Mittel, um Daten vom Server in den Webbrowser zu laden, ohne die ganze Seite neu zu laden.

Im Grunde genommen, nutzt Ajax das JavaScript-basierte XMLHttpRequest-Objekt, um Informationen asynchron im Hintergrund an einen Webserver zu senden und von einem Webserver zu empfangen, ohne die Erfahrung des Benutzers zu beeinträchtigen.

AJAX ist so populär geworden, dass Du kaum eine Anwendung findest, die Ajax nicht in gewissem Umfang verwendet. Das Beispiel einiger großer Ajax-gesteuerter Online-Anwendungen sind Google Mail, YouTube, Facebook, Flickr, usw.

Hinweis: Ajax ist keine neue Technologie, tatsächlich ist Ajax nicht einmal wirklich eine Technologie. Ajax ist lediglich ein Begriff, der den Prozess des asynchronen Datenaustauschs von einem Webserver mittels JavaScript ohne Seitenaktualisierung beschreibt.

AJAX mit jQuery

Verschiedene Browser implementieren die Ajax unterschiedlich, d.h. wenn Du die typische JavaScript-Methode zur Implementierung der Ajax verwendest, musst Du den unterschiedlichen Code für verschiedene Browser schreiben, um sicherzustellen, dass Ajax browserübergreifend funktioniert.

Aber glücklicherweise vereinfacht jQuery den Prozess der Implementierung von Ajax, indem es sich um diese Browser-Unterschiede kümmert. Es bietet einfache Methoden wie load(), $.get(), $.post(), usw., um die Ajax zu implementieren, die nahtlos in allen Browsern funktioniert.

In den kommenden Kapiteln wirst Du lernen, wie man Daten vom Server lädt und wie man Daten mittels HTTP GET- und POST-Methode über jQuery Ajax sendet und empfängt.

Tipp: Ajax-Anforderungen werden durch den JavaScript-Code ausgelöst; Ihr Code sendet eine Anforderung an eine URL, und wenn die Anforderung abgeschlossen ist, kann eine Callback-Funktion ausgelöst werden, um die Antwort zu verarbeiten. Da die Anforderung asynchron ist, wird der Rest Ihres Codes weiterhin ausgeführt, während die Anforderung verarbeitet wird.

jQuery load() Methode

Die load()-Methode lädt Daten vom Server und platziert das zurückgegebene HTML in das ausgewählte Element.

Diese Methode bietet eine einfache Möglichkeit, Daten asynchron von einem Web-Server zu laden. Die grundlegende Syntax dieser Methode ist wie folgt:

$(Selektor).load(URL, Daten, komplett);

Die Parameter der load()-Methode haben die folgende Bedeutung:

• Der erforderliche URL-Parameter gibt die URL der Datei an, die Sie laden möchten.
• Der optionale Datenparameter gibt einen Satz von Abfragezeichenfolgen (d.h. Schlüssel/Wertpaare) an, die zusammen mit der Anfrage an den Webserver gesendet werden.
• Der optionale Parameter komplett (complete) ist im Grunde eine Callback-Funktion, die ausgeführt wird, wenn die Anfrage abgeschlossen ist. Der Callback wird für jedes ausgewählte Element einmal ausgelöst.

Lass uns diese Methode in die Praxis umsetzen. Ich habe dir bereits eine HTML-Datei "beispiel.html" erstellst und auf unserem Webserver abgespeichert.

Die beispiel.html enthält folgenden Code (Inhalt):

<h1>Neuer Content von beispiel.html</h1>
<p>Das ist ein neuer Inhalt, geladen über AJAX.</p>

Jetzt erstellen wir eine weitere HTML-Datei z.B. test.html. Hier erstellen wir einen Button, der die Inhalte der beispiel.html über AJAX laden soll:

<script>
  $(document).ready(function() {
      $("button").click(function() {
          $("#container").load("https://kurse.lerneprogrammieren.de/assets/projects/beispiel.html");
      });
  });
</script>

 

Hinweis: Ein Ajax-Request kann nur an die Dateien gerichtet werden, die auf demselben Webserver existieren. Aus Sicherheitsgründen funktioniert der Request nicht bei externen Servern.

Mit Ajax kannst du ebenfalls GET Requests verwenden, um Daten abzufragen und POST Requests nutzen, um Daten zu setzen.

Fazit

In dieser Lektion hast du gelernt, was AJAX ist und wie es funktioniert.

Ajax steht für Asynchronous Javascript And Xml (Asynchrones Javascript und Xml).  Du kannst damit Daten vom Server in den Webbrowser laden, ohne dass die ganze Seite neu geladen werden muss. In jQuery benutzt du die load()-Methode, um Inhalte über AJAX asynchron zu laden.

In der nächsten Lektion beschäftigen wir uns mit den Unterschieden sowie individuellen Vor- und Nachteilen zwischen JavaScript und jQuery.