AJAX- Einführung
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
- Senden Sie Daten an einen Webserver - im Hintergrund
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() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Was ist AJAX?
AJAX = Ein synchrones JavaScript und XML . _
AJAX ist keine Programmiersprache.
AJAX verwendet nur eine Kombination aus:
- Ein im Browser integriertes
XMLHttpRequestObjekt (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
Moderne Browser (Fetch-API)
Moderne Browser können die Fetch-API anstelle des XMLHttpRequest-Objekts verwenden.
Die Fetch-API-Schnittstelle ermöglicht es dem Webbrowser, HTTP-Anforderungen an Webserver zu stellen.
Wenn Sie das XMLHttpRequest-Objekt verwenden, kann Fetch dasselbe auf einfachere Weise tun.