AJAX - Bediener reaksie
Die onreadystatechange Eiendom
Die readyState- eienskap hou die status van die XMLHttpRequest.
Die onreadystatechange- eienskap definieer 'n funksie wat uitgevoer moet word wanneer die readyState verander.
Die status - eienskap en die statusText- eienskap hou die status van die XMLHttpRequest-objek.
| 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 onreadystatechange-funksie word geroep elke keer as die readyState verander.
Wanneer readyState 4 is en status 200 is, is die antwoord gereed:
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();
}
Die "ajax_info.txt"-lêer wat in die voorbeeld hierbo gebruik word, is 'n eenvoudige tekslêer en lyk soos volg:
<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>
Die onreadystatechange-gebeurtenis word vier keer geaktiveer (1-4), een keer vir elke verandering in die readyState.
Gebruik 'n terugbelfunksie
'n Terugbelfunksie is 'n funksie wat as 'n parameter na 'n ander funksie oorgedra word.
As jy meer as een AJAX-taak op 'n webwerf het, moet jy een funksie skep om die XMLHttpRequest-objek uit te voer, en een terugbelfunksie vir elke AJAX-taak.
Die funksie-oproep moet die URL bevat en watter funksie om te roep wanneer die 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
}
Bedienerreaksie-eienskappe
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Bedienerreaksiemetodes
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Die responseText Property
Die responseText- eienskap gee die bedienerantwoord as 'n JavaScript-string terug, en jy kan dit dienooreenkomstig gebruik:
Voorbeeld
document.getElementById("demo").innerHTML = xhttp.responseText;
Die responseXML Eiendom
Die XML HttpRequest-objek het 'n ingeboude XML-ontleder.
Die responseXML- eienskap gee die bedienerrespons terug as 'n XML DOM-objek.
Deur hierdie eienskap te gebruik, kan jy die antwoord as 'n XML DOM-objek ontleed:
Voorbeeld
Versoek die lêer cd_catalog.xml en ontleed die 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();
Jy sal baie meer oor XML DOM in die DOM-hoofstukke van hierdie tutoriaal leer.
Die getAllResponseHeaders()-metode
Die getAllResponseHeaders() metode gee alle kopinligting van die bedienerantwoord terug.
Voorbeeld
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Die getResponseHeader()-metode
Die getResponseHeader() metode gee spesifieke kopinligting van die bedienerantwoord terug.
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();