AJAX - XMLHttpRequest Objekt
- Vorherige Seite AJAX Einführung
- Nächste Seite AJAX-Anfragen
Das XMLHttpRequest-Objekt ist der Grundstein von AJAX.
- Erstellen Sie ein XMLHttpRequest-Objekt
- Definiert eine Callback-Funktion
- Öffnen Sie das XMLHttpRequest-Objekt
- Anfrage an den Server senden
XMLHttpRequest-Objekt
Alle modernen Browser unterstützen dies. XMLHttpRequest-Objekt.
Das XMLHttpRequest-Objekt kann zum Austausch von Daten im Hintergrund mit dem Web-Server verwendet werden. Dies bedeutet, dass nur Teile der Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.
Erstellen Sie ein XMLHttpRequest-Objekt
Alle modernen Browser (Chrome, Firefox, IE, Edge, Safari, Opera) haben ein integriertes XMLHttpRequest-Objekt.
Syntax zum Erstellen eines XMLHttpRequest-Objekts:
variable = new XMLHttpRequest();
Definiert eine Callback-Funktion
Eine Callback-Funktion ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird.
In diesem Fall sollte die Callback-Funktion den Code enthalten, der beim Bereitsein der Antwort ausgeführt werden soll.
xhttp.onload = function() {
// Was soll getan werden, wenn die Antwort bereit ist
}
Senden Sie die Anfrage
Um eine Anfrage an den Server zu senden, können Sie das XMLHttpRequest-Objekt verwenden open() und send() Methode:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Beispiel
// Erstellen Sie das XMLHttpRequest-Objekt
const xhttp = new XMLHttpRequest();
// Definiert die Callback-Funktion
xhttp.onload = function() {
// Hier können Sie Daten verwenden
}
// Anfrage senden
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Cross-Domain-Zugriff (Access Across Domains)
Aus Sicherheitsgründen erlauben moderne Browser keine Cross-Domain-Zugriffe.
Das bedeutet, dass die Webseite und die XML-Datei, die sie versucht zu laden, auf demselben Server liegen müssen.
Die Beispiele auf CodeW3C.com öffnen XML-Dateien im CodeW3C.com-Domänennamen.
Wenn Sie den obigen Beispielcode auf einer Ihrer eigenen Webseiten verwenden möchten, muss die XML-Datei, die Sie laden, auf Ihrem eigenen Server liegen.
XMLHttpRequest-Objekt-Methode
| Methode | Description |
|---|---|
| new XMLHttpRequest() | Erstellt ein neues XMLHttpRequest-Objekt. |
| abort() | Storniert die aktuelle Anfrage. |
| getAllResponseHeaders() | Gibt Header-Informationen zurück. |
| getResponseHeader() | Gibt spezifische Header-Informationen zurück. |
| open(method, url, async, user, psw) |
Legt die Anfrage fest.
|
| send() | Sendet eine Anfrage an den Server, die für GET-Anfragen verwendet wird. |
| send(string) | Sendet eine Anfrage an den Server, die für POST-Anfragen verwendet wird. |
| setRequestHeader() | Fügt ein Tag/Wert-Paar zu den zu sendenden Header hinzu. |
XMLHttpRequest-Objekt-Attribute
| Property | Description |
|---|---|
| onload | Definiert die Funktion, die aufgerufen wird, wenn eine (Lade-)Anfrage empfangen wird. |
| onreadystatechange | Definiert die Funktion, die aufgerufen wird, wenn sich der readyState-Attribut ändert. |
| readyState |
Save the state of XMLHttpRequest.
|
| responseText | Return the response data as a string. |
| responseXML | Return the response data in XML format. |
| status |
Return the status code of the request
For a complete list, please visit HTTP Message Reference Manual |
| statusText | Return the status text (such as "OK" or "Not Found") |
onload property
When using the XMLHttpRequest object, you can define a callback function to be executed when the response is received.
Please define the function in the XMLHttpRequest object: onload The function is defined in the property:
Beispiel
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Multiple callback functions
If there are multiple AJAX tasks on the website, a function to execute the XMLHttpRequest object should be created, and a callback function should be created for each AJAX task.
The function call should include the URL and the function to be called when the response is ready.
Beispiel
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) {
// This is the action
}
function myFunction2(xhttp) {
// This is the action
}
onreadystatechange property
readyState The property saves the state of XMLHttpRequest.
onreadystatechange The property defines a callback function that is executed when the readyState changes.
status Properties and statusText The property saves the state of the XMLHttpRequest object.
| Property | Description |
|---|---|
| onreadystatechange | Define the function to be called when the readyState property changes. |
| readyState |
Save the state of XMLHttpRequest.
|
| status |
Return the status code of the request
For a complete list, please visit HTTP Message Reference Manual |
| statusText | statusText |
Rückgabestatus als Text (z.B. "OK" oder "Not Found").
Der onreadystatechange-Funktion wird jedes Mal aufgerufen, wenn der readyState geändert wird. 4 und status ist 200 Wenn, dann ist die Antwort bereit:
Beispiel
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();
}
Das onreadystatechange-Ereignis wird viermal (1-4) ausgelöst, wobei der readyState jedes Mal geändert wird.
- Vorherige Seite AJAX Einführung
- Nächste Seite AJAX-Anfragen
