AJAX – odezva serveru
Vlastnost onreadystatechange
Vlastnost readyState uchovává stav XMLHttpRequest.
Vlastnost onreadystatechange definuje funkci, která se má provést, když se readyState změní.
Vlastnost status a vlastnost statusText uchovává stav objektu 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") |
Funkce onreadystatechange je volána pokaždé, když se readyState změní.
Když je readyState 4 a stav 200, odpověď je připravena:
Příklad
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();
}
Soubor „ajax_info.txt“ použitý ve výše uvedeném příkladu je jednoduchý textový soubor a vypadá takto:
<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>
Událost onreadystatechange se spustí čtyřikrát (1-4), jednou pro každou změnu v readyState.
Použití funkce zpětného volání
Funkce zpětného volání je funkce předaná jako parametr jiné funkci.
Pokud máte na webu více než jednu úlohu AJAX, měli byste vytvořit jednu funkci pro provádění objektu XMLHttpRequest a jednu funkci zpětného volání pro každou úlohu AJAX.
Volání funkce by mělo obsahovat URL a jakou funkci zavolat, když je odpověď připravena.
Příklad
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
}
Vlastnosti odezvy serveru
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Metody odezvy serveru
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Vlastnost responseText
Vlastnost responseText vrací odpověď serveru jako řetězec JavaScriptu a můžete ji odpovídajícím způsobem použít:
Příklad
document.getElementById("demo").innerHTML = xhttp.responseText;
Vlastnost responseXML
Objekt XML HttpRequest má vestavěný analyzátor XML.
Vlastnost responseXML vrací odpověď serveru jako objekt XML DOM.
Pomocí této vlastnosti můžete analyzovat odpověď jako objekt XML DOM:
Příklad
Vyžádejte si soubor cd_catalog.xml a analyzujte odpověď:
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();
Mnohem více o XML DOM se dozvíte v kapitolách DOM tohoto tutoriálu.
Metoda getAllResponseHeaders()
Metoda getAllResponseHeaders() vrací všechny informace záhlaví z odpovědi serveru.
Příklad
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Metoda getResponseHeader().
Metoda getResponseHeader() vrací konkrétní informace záhlaví z odpovědi serveru.
Příklad
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();