AJAX – Das XMLHttpRequest-Objekt
Das Kernstück 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
Das XMLHttpRequest-Objekt
Alle modernen Browser unterstützen das XMLHttpRequestObjekt.
Über das XMLHttpRequestObjekt können 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.
Erstellen Sie ein XMLHttpRequest-Objekt
Alle modernen Browser (Chrome, Firefox, IE, Edge, Safari, Opera) haben ein eingebautes XMLHttpRequestObjekt.
Syntax zum Erstellen eines XMLHttpRequestObjekts:
variable = new XMLHttpRequest();
Definieren Sie 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 auszuführenden Code enthalten, wenn die Antwort bereit ist.
xhttp.onload = function() {
// What to do when the response is ready
}
Eine Anfrage senden
Um eine Anfrage an einen Server zu senden, können Sie die Methoden open() und send() des
XMLHttpRequestObjekts verwenden:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Beispiel
// 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();
Zugriff über Domänen hinweg
Moderne Browser erlauben aus Sicherheitsgründen keinen domänenübergreifenden Zugriff.
Das bedeutet, dass sich sowohl die Webseite als auch die XML-Datei, die sie zu laden versucht, 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, müssen sich die von Ihnen geladenen XML-Dateien auf Ihrem eigenen Server befinden.
XMLHttpRequest-Objektmethoden
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
XMLHttpRequest-Objekteigenschaften
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Die onload-Eigenschaft
Mit dem XMLHttpRequestObjekt können Sie eine Callback-Funktion definieren, die ausgeführt wird, wenn die Anfrage eine Antwort erhält.
Die Funktion wird in der onloadEigenschaft des XMLHttpRequestObjekts definiert:
Beispiel
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Mehrere Callback-Funktionen
Wenn Sie mehr als eine AJAX-Aufgabe in einer Website haben, sollten Sie eine Funktion zum Ausführen des XMLHttpRequestObjekts und eine Callback-Funktion für jede AJAX-Aufgabe erstellen.
Der Funktionsaufruf sollte die URL enthalten und welche Funktion aufgerufen werden soll, wenn die Antwort bereit ist.
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) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Die onreadystatechange-Eigenschaft
Die readyStateEigenschaft enthält den Status der XMLHttpRequest.
Die onreadystatechangeEigenschaft definiert eine Callback-Funktion, die ausgeführt wird, wenn sich der readyState ändert.
Die statusEigenschaft und die statusTextEigenschaften enthalten den Status des XMLHttpRequest-Objekts.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Die onreadystatechangeFunktion wird jedes Mal aufgerufen, wenn sich der readyState ändert.
Wenn readyState4 und der Status 200 ist, 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 onreadystatechangeEreignis wird viermal (1–4) ausgelöst, einmal für jede Änderung des readyState.