AJAX ist der Traum eines jeden Entwicklers, denn Sie können:
Daten von einem Webserver lesen - nachdem die Seite geladen wurde
Aktualisieren Sie eine Webseite, ohne die Seite neu zu laden
Daten an einen Webserver senden - im Hintergrund
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
<!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>.
Das <div> Der Abschnitt wird verwendet, um Informationen von einem Server anzuzeigen.
Der
Die Funktion fordert Daten von einem Web an Server und zeigt es an:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAX=Asynchrones JavaScript And XML.
AJAX ist keine Programmiersprache.
AJAX verwendet lediglich eine Kombination aus:
Ein im Browser integriertes XMLHttpRequest
-Objekt (um Daten von einem Webserver anzufordern)
JavaScript und HTML DOM (zur Anzeige oder Nutzung der Daten)
AJAX ist ein irreführender Name. AJAX-Anwendungen verwenden möglicherweise XML zum Transport von Daten. Es ist jedoch ebenso üblich, Daten als Klartext oder JSON-Text zu transportieren.
AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Datenaustausch mit einem Webserver im Hintergrund. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.
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 (z. B. Seitenaktualisierung) wird von JavaScript ausgeführt
Moderne Browser können die Fetch-API anstelle des XMLHttpRequest-Objekts verwenden.
Die Fetch-API-Schnittstelle ermöglicht es dem Webbrowser, HTTP-Anfragen an Webserver zu stellen.
Wenn Sie das XMLHttpRequest-Objekt verwenden, kann Fetch dasselbe auf einfachere Weise tun.