AJAX - Risposta del server
La proprietà onreadystatechange
La proprietà readyState mantiene lo stato di XMLHttpRequest.
La proprietà onreadystatechange definisce una funzione da eseguire quando readyState cambia.
La proprietà status e la proprietà statusText conservano lo stato dell'oggetto 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") |
La funzione onreadystatechange viene chiamata ogni volta che readyState cambia.
Quando readyState è 4 e status è 200, la risposta è pronta:
Esempio
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();
}
Il file "ajax_info.txt" utilizzato nell'esempio sopra, è un semplice file di testo e si presenta così:
<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>
L'evento onreadystatechange viene attivato quattro volte (1-4), una volta per ogni modifica in readyState.
Utilizzo di una funzione di richiamata
Una funzione di callback è una funzione passata come parametro a un'altra funzione.
Se in un sito Web sono presenti più attività AJAX, è necessario creare una funzione per l'esecuzione dell'oggetto XMLHttpRequest e una funzione di callback per ciascuna attività AJAX.
La chiamata di funzione dovrebbe contenere l'URL e quale funzione chiamare quando la risposta è pronta.
Esempio
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
}
Proprietà di risposta del server
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Metodi di risposta del server
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
La proprietà responseText
La proprietà responseText restituisce la risposta del server come stringa JavaScript e puoi utilizzarla di conseguenza:
Esempio
document.getElementById("demo").innerHTML = xhttp.responseText;
La proprietà responseXML
L'oggetto XML HttpRequest ha un parser XML integrato.
La proprietà responseXML restituisce la risposta del server come oggetto DOM XML.
Usando questa proprietà puoi analizzare la risposta come un oggetto DOM XML:
Esempio
Richiedi il file cd_catalog.xml e analizza la risposta:
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();
Imparerai molto di più su XML DOM nei capitoli DOM di questo tutorial.
Il metodo getAllResponseHeaders()
Il metodo getAllResponseHeaders() restituisce tutte le informazioni di intestazione dalla risposta del server.
Esempio
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Il metodo getResponseHeader()
Il metodo getResponseHeader() restituisce informazioni di intestazione specifiche dalla risposta del server.
Esempio
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();