AJAX Einführung

AJAX ist ein Traum der Entwickler, weil Sie können:

  • Webseite ohne Neuladen aktualisieren
  • Daten nach dem Laden der Seite vom Server anfordern
  • Daten nach dem Laden der Seite vom Server empfangen
  • Daten im Hintergrund an den Server senden

AJAX Beispiel

Klicken Sie auf den folgenden Button, um diesen Text mit Ajax zu ändern:

Versuchen Sie es selbst

AJAX-Beispiel Erklärung

HTML-Seite

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>AJAX ändert diesen Text</h2>
  <button type="button" onclick="loadDoc()">Text ändern</button>
</div>
</body>
</html>

Diese HTML-Seite enthält ein <div> und ein <button>.

<div> Zum Anzeigen von Informationen vom Server.

<button> Funktion aufrufen (wenn sie geklickt wird).

Diese Funktion fordert Daten vom Webserver ab und zeigt sie an:

Funktion loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Was ist AJAX?

AJAX = Asynchronous JvaScript And XML.

AJAX ist keine Programmiersprache.

AJAX kombiniert einfach:

  • Der in den Browser integrierte XMLHttpRequest-Objekt (Daten vom Webserver anfordern)
  • JavaScript und HTML DOM (Anzeige oder Verwendung von Daten)

Ajax ist ein irreführender Name. Ajax-Anwendungen können Daten über XML übertragen, aber es ist auch häufig der Übertragung von Daten als reinem Text oder JSON-Text.

Ajax ermöglicht die asynchrone Aktualisierung der Webseite durch den Austausch von Daten mit dem Webserver hinter der Szene. Dies bedeutet, dass Teile der Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Wie funktioniert AJAX?

AJAX
  1. Ein Ereignis tritt in der Webseite auf (Seitenladen, Buttonklick)
  2. Durch JavaScript wird das XMLHttpRequest-Objekt erstellt
  3. Das XMLHttpRequest-Objekt sendet eine Anfrage an den Webserver
  4. Der Server verarbeitet die Anfrage
  5. Der Server sendet die Antwort zurück an die Webseite
  6. Durch JavaScript wird die Antwort gelesen
  7. Durch JavaScript wird die richtige Aktion ausgeführt (z.B. Aktualisierung der Seite)