AJAX - Réponse du serveur
La propriété onreadystatechange
La propriété readyState contient le statut de XMLHttpRequest.
La propriété onreadystatechange définit une fonction à exécuter lorsque le readyState change.
La propriété status et la propriété statusText contiennent le statut de l'objet 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 fonction onreadystatechange est appelée chaque fois que readyState change.
Lorsque readyState est 4 et que status est 200, la réponse est prête :
Exemple
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();
}
Le fichier "ajax_info.txt" utilisé dans l'exemple ci-dessus est un simple fichier texte et ressemble à ceci :
<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'événement onreadystatechange est déclenché quatre fois (1-4), une fois pour chaque modification de readyState.
Utilisation d'une fonction de rappel
Une fonction de rappel est une fonction passée en paramètre à une autre fonction.
Si vous avez plusieurs tâches AJAX sur un site Web, vous devez créer une fonction pour exécuter l'objet XMLHttpRequest et une fonction de rappel pour chaque tâche AJAX.
L'appel de fonction doit contenir l'URL et la fonction à appeler lorsque la réponse est prête.
Exemple
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
}
Propriétés de la réponse du serveur
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Méthodes de réponse du serveur
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
La propriété responseText
La propriété responseText renvoie la réponse du serveur sous forme de chaîne JavaScript et vous pouvez l'utiliser en conséquence :
Exemple
document.getElementById("demo").innerHTML = xhttp.responseText;
La propriété responseXML
L'objet XML HttpRequest possède un analyseur XML intégré.
La propriété responseXML renvoie la réponse du serveur sous la forme d'un objet DOM XML.
À l'aide de cette propriété, vous pouvez analyser la réponse en tant qu'objet DOM XML :
Exemple
Demandez le fichier cd_catalog.xml et analysez la réponse :
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();
Vous en apprendrez beaucoup plus sur XML DOM dans les chapitres DOM de ce tutoriel.
La méthode getAllResponseHeaders()
La méthode getAllResponseHeaders() renvoie toutes les informations d'en-tête de la réponse du serveur.
Exemple
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
La méthode getResponseHeader()
La méthode getResponseHeader() renvoie des informations d'en-tête spécifiques à partir de la réponse du serveur.
Exemple
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();