AJAX - Serverreactie
De eigenschap onreadystatechange
De eigenschap readyState bevat de status van de XMLHttpRequest.
De eigenschap onreadystatechange definieert een functie die moet worden uitgevoerd wanneer de readyState verandert.
De eigenschap status en de eigenschap statusText bevatten de status van het object XMLHttpRequest.
| 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") |
De functie onreadystatechange wordt elke keer aangeroepen als de readyState verandert.
Wanneer readyState 4 is en de status 200 is, is het antwoord klaar:
Voorbeeld
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();
}
Het bestand "ajax_info.txt" dat in het bovenstaande voorbeeld wordt gebruikt, is een eenvoudig tekstbestand en ziet er als volgt uit:
<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>
De gebeurtenis onreadystatechange wordt vier keer geactiveerd (1-4), één keer voor elke wijziging in de readyState.
Een terugbelfunctie gebruiken
Een callback-functie is een functie die als parameter wordt doorgegeven aan een andere functie.
Als u meer dan één AJAX-taak op een website heeft, moet u één functie maken voor het uitvoeren van het XMLHttpRequest-object en één callback-functie voor elke AJAX-taak.
De functieaanroep moet de URL bevatten en welke functie moet worden aangeroepen als het antwoord gereed is.
Voorbeeld
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
}
Eigenschappen serverrespons
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Serverreactiemethoden
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
De responseText Property
De eigenschap responseText retourneert de serverrespons als een JavaScript-tekenreeks en u kunt deze dienovereenkomstig gebruiken:
Voorbeeld
document.getElementById("demo").innerHTML = xhttp.responseText;
De responseXML-eigenschap
Het XML HttpRequest-object heeft een ingebouwde XML-parser.
De eigenschap responseXML retourneert de serverrespons als een XML DOM-object.
Met behulp van deze eigenschap kunt u het antwoord ontleden als een XML DOM-object:
Voorbeeld
Vraag het bestand cd_catalog.xml aan en ontleden het antwoord:
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 de DOM-hoofdstukken van deze tutorial leer je veel meer over XML DOM.
De methode getAllResponseHeaders()
De methode getAllResponseHeaders() retourneert alle header-informatie van het serverantwoord.
Voorbeeld
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
De methode getResponseHeader()
De methode getResponseHeader() retourneert specifieke header-informatie van het serverantwoord.
Voorbeeld
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();