AJAX Grundlagen-Tutorial

AJAX Einführung

AJAX ermöglicht die "asynchrone" Aktualisierung von Webinhalten durch den Austausch von Daten mit dem Webserver im Hintergrund.

Das bedeutet, dass bestimmte Teile der Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen wird.

Mit AJAX können Sie:

Daten an den Webserver senden (im Hintergrund)
Daten vom Webserver lesen (nach dem Laden der Seite)
Webseite ohne Neuladen aktualisieren

AJAX-Beispiel

Der folgende Code zeigt ein grundlegendes AJAX-Beispiel:

AJAX ändert diesen Text

Code ausführen

AJAX-Beispiel Erklärung

Der obige Beispiel enthält die folgenden Teile:

HTML-Code:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX ändert diesen Text</h2>
　　<button onclick="fetchDoc()" type="button">Anfrage senden</button>
　　</div>
　　
　　</html>

Der HTML-Code enthält eine<div>Teil (<h2>und<button>)

das<DIV>Teil wird verwendet, um Informationen vom Server anzuzeigen.

das<button>Aufruf einer Funktion (wenn geklickt).

Diese Funktion ruft Daten vom Webserver ab und zeigt sie an (ohne die Seite neu zu laden):

Funktion fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {}}
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

Was ist AJAX?

AJAX ist die Abkürzung für „Asynchronous Javascript And XML“ (Asynchrone JavaScript und XML).

AJAX ist keine Programmiersprache, sondern eine Technologie, um auf Webserver von Webseiten zuzugreifen.

AJAX ermöglicht es Ihnen, Anfragen an den Server zu senden, ohne die Seite neu zu laden.

AJAX kann mit dem Server kommunizieren, Daten austauschen und die Seite aktualisieren, ohne die Seite neu zu laden.

AJAX kann verschiedene Formate von Informationen senden und empfangen, einschließlich JSON, XML, HTML und Textdateien.

Kurz gesagt, es geht darum, mit dem XMLHttpRequest-Objekt mit dem Server zu kommunizieren.

Die zwei Hauptfunktionen von AJAX ermöglichen es Ihnen, folgendes zu tun:

Anfragen an den Server senden, ohne die Seite neu zu laden
Daten vom Server empfangen und verarbeiten

Wie funktioniert AJAX?

Um AJAX-Kommunikation durchzuführen, verwendet JavaScript ein XMLHttpRequest-Objekt, um eine HTTP-Anfrage an den Server zu senden und die Daten als Antwort zu empfangen.

Alle modernen Browser (Chrome, Firefox, IE)7 +, Safari, Opera) unterstützen das XMLHttpRequest-Objekt.

Das folgende Diagramm zeigt, wie die AJAX-Kommunikation funktioniert:

Schritte der AJAX-Operation

Ein Ereignis hat in der Webseite stattgefunden (z.B. die Seite wurde geladen oder ein Button wurde geklickt)
Das XMLHttpRequest-Objekt wird von JavaScript erstellt
Das XMLHttpRequest-Objekt sendet die Anfrage an den Webserver
Der Server verarbeitet die Anfrage
Der Server sendet die Antwort zurück zur Webseite
Die Antwort wird von JavaScript gelesen
Das HTML DOM wird von JavaScript aktualisiert

Was Sie lernen werden

Im nächsten Kapitel dieses Tutorials werden Sie lernen:
Wie man das XMLHttpRequest-Objekt erstellt
Wie man Daten an den Webserver sendet (im Hintergrund)
Wie man Daten vom Webserver liest (im Hintergrund)
Wie man die Webseite ohne Neuladen aktualisiert

AJAX XMLHttpRequest