Der Grundstein von AJAX ist das XMLHttpRequest-Objekt.
Erstellen Sie ein XMLHttpRequest-Objekt
Definieren Sie eine Callback-Funktion
Öffnen Sie das XMLHttpRequest-Objekt
Senden Sie eine Anfrage an einen Server
Alle modernen Browser unterstützen das XMLHttpRequest-Objekt.
Das XMLHttpRequest-Objekt kann zum Datenaustausch mit einem dahinter liegenden Webserver verwendet werden Szenen. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden.
Alle modernen Browser (Chrome, Firefox, IE, Edge, Safari, Opera) verfügen über ein integriertes XMLHttpRequest-Objekt.
Syntax zum Erstellen eines XMLHttpRequest-Objekts:
variable = new XMLHttpRequest();Eine Callback-Funktion ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird.
In diesem Fall sollte die Rückruffunktion den Code enthalten, der ausgeführt werden soll, wenn die Die Antwort ist fertig.
xhttp.onload = function() {
// What to do when the response is ready
}Um eine Anfrage an einen Server zu senden, können Sie die Methoden open() und send() des verwenden XMLHttpRequest-Objekt:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<div id="demo">
<p>Let AJAX change this text.</p>
<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>
Aus Sicherheitsgründen erlauben moderne Browser keinen domänenübergreifenden Zugriff.
Das bedeutet, dass sich sowohl die Webseite als auch die XML-Datei, die sie laden möchte, auf demselben Server befinden müssen.
Die Beispiele auf W3Schools öffnen alle XML-Dateien, die sich in der W3Schools-Domäne befinden.
Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, Die von Ihnen geladenen XML-Dateien müssen sich auf Ihrem eigenen Server befinden.
Erstellt ein neues XMLHttpRequest-Objekt
Bricht die aktuelle Anfrage ab
Gibt Header-Informationen zurück
Gibt spezifische Header-Informationen zurück
Gibt die Anfrage
Methode an: den Anfragetyp GET oder POST
URL: der Dateispeicherort
async: true (asynchron) oder false (synchron)
user: optionaler Benutzername
psw: optionales Passwort
Sendet die Anfrage an den Server
Wird für GET-Anfragen verwendet
Sendet die Anfrage an den Server.
Wird für POST-Anfragen verwendet
Fügt dem zu sendenden Header ein Label/Wert-Paar hinzu
Definiert eine Funktion, die aufgerufen wird, wenn die Anfrage empfangen (geladen) wird.
Definiert eine Funktion, die aufgerufen wird, wenn sich die readyState-Eigenschaft ändert
Enthält den Status des XMLHttpRequest.
0: Anfrage nicht initialisiert
1: Serververbindung hergestellt
2: Anfrage erhalten
3: Bearbeitungsanfrage
4: Anfrage abgeschlossen und Antwort ist bereit
Gibt die Antwortdaten als Zeichenfolge zurück
Gibt die Antwortdaten als XML-Daten zurück
Gibt die Statusnummer einer Anfrage zurück
200: „OK“
403: „Verboten“
404: „Nicht gefunden“
Eine vollständige Liste finden Sie unter Http Nachrichtenreferenz
Gibt den Statustext zurück (z. B. „OK“ oder „Nicht gefunden“)
Mit dem XMLHttpRequest-Objekt können Sie eine Callback-Funktion definieren, die wann ausgeführt werden soll die Anfrage erhält eine Antwort.
Die Funktion ist in der Eigenschaft onload des Objekts XMLHttpRequest definiert:
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();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>
Wenn Sie mehr als eine AJAX-Aufgabe auf einer Website haben, sollten Sie eine Funktion dafür erstellen Ausführen des XMLHttpRequest-Objekts und jeweils einer Rückruffunktion AJAX-Aufgabe.
Der Funktionsaufruf sollte die URL und die aufzurufende Funktion enthalten Die Antwort ist fertig.
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}Die Eigenschaft readyState enthält den Status der XMLHttpRequest.
Die Eigenschaft onreadystatechange definiert eine Rückruffunktion, die ausgeführt wird, wenn sich der readyState ändert.
Die Eigenschaften status und statusText enthalten den Status des XMLHttpRequest-Objekts.
Definiert eine Funktion, die aufgerufen wird, wenn sich die readyState-Eigenschaft ändert
Enthält den Status des XMLHttpRequest.
0: Anfrage nicht initialisiert
1: Serververbindung hergestellt
2: Anfrage erhalten
3: Bearbeitungsanfrage
4: Anfrage abgeschlossen und Antwort ist bereit
200: „OK“
403: „Verboten“
404: „Seite nicht gefunden“
Eine vollständige Liste finden Sie unter Referenz zu HTTP-Nachrichten
Gibt den Statustext zurück (z. B. „OK“ oder „Nicht gefunden“)
Die Funktion onreadystatechange wird jedes Mal aufgerufen, wenn sich der readyState ändert.
Wenn readyState 4 und der Status 200 ist, ist die Antwort bereit:
function loadDoc() {
const 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");
xhttp.send();
}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.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
Das Ereignis onreadystatechange wird viermal (1-4) ausgelöst, einmal für jede Änderung im readyState.