AJAX — odpowiedź serwera
Właściwość onreadystatechange
Właściwość readyState przechowuje status XMLHttpRequest.
Właściwość onreadystatechange definiuje funkcję, która ma zostać wykonana, gdy zmieni się readyState.
Właściwość status i statusText przechowują status obiektu 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") |
Funkcja onreadystatechange jest wywoływana za każdym razem, gdy zmienia się readyState.
Gdy readyState ma wartość 4, a status to 200, odpowiedź jest gotowa:
Przykład
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();
}
Plik "ajax_info.txt" użyty w powyższym przykładzie jest prostym plikiem tekstowym i wygląda tak:
<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>
Zdarzenie onreadystatechange jest wyzwalane cztery razy (1-4), jeden raz dla każdej zmiany w readyState.
Korzystanie z funkcji oddzwaniania
Funkcja wywołania zwrotnego to funkcja przekazana jako parametr do innej funkcji.
Jeśli masz więcej niż jedno zadanie AJAX w witrynie, powinieneś utworzyć jedną funkcję do wykonywania obiektu XMLHttpRequest i jedną funkcję wywołania zwrotnego dla każdego zadania AJAX.
Wywołanie funkcji powinno zawierać adres URL i funkcję do wywołania, gdy odpowiedź jest gotowa.
Przykład
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
}
Właściwości odpowiedzi serwera
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Metody odpowiedzi serwera
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Właściwość responseText
Właściwość responseText zwraca odpowiedź serwera jako ciąg JavaScript i możesz jej użyć odpowiednio:
Przykład
document.getElementById("demo").innerHTML = xhttp.responseText;
Właściwość responseXML
Obiekt XML HttpRequest ma wbudowany parser XML.
Właściwość responseXML zwraca odpowiedź serwera jako obiekt XML DOM.
Korzystając z tej właściwości, możesz przeanalizować odpowiedź jako obiekt XML DOM:
Przykład
Poproś o plik cd_catalog.xml i przeanalizuj odpowiedź:
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();
Dużo więcej o XML DOM dowiesz się z rozdziałów tego samouczka na temat DOM.
Metoda getAllResponseHeaders()
Metoda getAllResponseHeaders() zwraca wszystkie informacje nagłówka z odpowiedzi serwera.
Przykład
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Metoda getResponseHeader()
Metoda getResponseHeader() zwraca określone informacje nagłówka z odpowiedzi serwera.
Przykład
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();