AJAX - Serverantwort
Die onreadystatechange-Eigenschaft
Die Eigenschaft readyState enthält den Status von XMLHttpRequest.
Die Eigenschaft onreadystatechange definiert eine Funktion, die ausgeführt werden soll, wenn sich der readyState ändert.
Die status - Eigenschaft und die statusText- Eigenschaft 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 Funktion onreadystatechange wird jedes Mal aufgerufen, wenn sich der readyState ändert.
Wenn readyState 4 und Status 200 ist, ist die Antwort bereit:
Beispiel
function loadDoc() {
var 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", true);
xhttp.send();
}
Die im obigen Beispiel verwendete Datei „ajax_info.txt“ ist eine einfache Textdatei und sieht folgendermaßen aus:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Das onreadystatechange-Ereignis wird viermal (1–4) ausgelöst, einmal für jede Änderung des readyState.
Verwendung einer Callback-Funktion
Eine Callback-Funktion ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird.
Wenn Sie mehr als eine AJAX-Aufgabe auf einer Website haben, sollten Sie eine Funktion zum Ausführen des XMLHttpRequest-Objekts 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) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Eigenschaften der Serverantwort
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Server-Antwortmethoden
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Die responseText-Eigenschaft
Die Eigenschaft responseText gibt die Serverantwort als JavaScript-String zurück und Sie können sie entsprechend verwenden:
Beispiel
document.getElementById("demo").innerHTML = xhttp.responseText;
Die responseXML-Eigenschaft
Das XML-HttpRequest-Objekt verfügt über einen integrierten XML-Parser.
Die Eigenschaft responseXML gibt die Serverantwort als XML-DOM-Objekt zurück.
Mit dieser Eigenschaft können Sie die Antwort als XML-DOM-Objekt parsen:
Beispiel
Fordern Sie die Datei cd_catalog.xml an und parsen Sie die Antwort:
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
In den DOM-Kapiteln dieses Tutorials erfahren Sie viel mehr über XML DOM.
Die getAllResponseHeaders()-Methode
Die Methode getAllResponseHeaders() gibt alle Header-Informationen aus der Serverantwort zurück.
Beispiel
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Die getResponseHeader()-Methode
Die Methode getResponseHeader() gibt spezifische Header-Informationen aus der Serverantwort zurück.
Beispiel
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();