AJAX- Einführung
AJAX ist der Traum eines jeden Entwicklers, denn Sie können:
- Aktualisieren Sie eine Webseite, ohne die Seite neu zu laden
- Fordern Sie Daten von einem Server an - nachdem die Seite geladen wurde
- Empfangen Sie Daten von einem Server - nachdem die Seite geladen wurde
- Senden Sie Daten an einen Server - im Hintergrund
Probieren Sie es selbst aus Beispiele in jedem Kapitel
In jedem Kapitel können Sie die Beispiele online bearbeiten und auf eine Schaltfläche klicken, um das Ergebnis anzuzeigen.
AJAX-Beispiel
Let AJAX change this text
AJAX-Beispiel erklärt
HTML-Seite
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Die HTML-Seite enthält einen <div>-Abschnitt und einen <button>.
Der Abschnitt <div> wird verwendet, um Informationen von einem Server anzuzeigen.
Der <button> ruft eine Funktion auf (wenn er angeklickt wird).
Die Funktion fordert Daten von einem Webserver an 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();
}
Die im obigen Beispiel verwendete Datei „ajax_info.txt“ ist eine einfache Textdatei und sieht folgendermaßen aus:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Was ist AJAX?
AJAX = Ein synchrones JavaScript und XML . _
AJAX ist keine Programmiersprache.
AJAX verwendet nur eine Kombination aus:
- Ein im Browser integriertes XMLHttpRequest-Objekt (um Daten von einem Webserver anzufordern)
- JavaScript und HTML DOM (um die Daten anzuzeigen oder zu verwenden)
AJAX ist ein irreführender Name. AJAX-Anwendungen verwenden möglicherweise XML zum Transportieren von Daten, aber es ist ebenso üblich, Daten als Klartext oder JSON-Text zu transportieren.
AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem hinter den Kulissen Daten mit einem Webserver ausgetauscht werden. Das bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die ganze Seite neu zu laden.
Wie AJAX funktioniert
- 1. Ein Ereignis tritt auf einer Webseite auf (die Seite wird geladen, eine Schaltfläche wird angeklickt)
- 2. Ein XMLHttpRequest-Objekt wird von JavaScript erstellt
- 3. Das XMLHttpRequest-Objekt sendet eine Anfrage an einen Webserver
- 4. Der Server verarbeitet die Anfrage
- 5. Der Server sendet eine Antwort zurück an die Webseite
- 6. Die Antwort wird von JavaScript gelesen
- 7. Die richtige Aktion (wie Seitenaktualisierung) wird von JavaScript durchgeführt