XMLHTTPRequest
Déclaration d'une variable XMLHTTPRequest
Différent selon Firefox ou IE
var xmlHttpRequest = null;
if(window.XMLHttpRequest) // Firefox
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté
alert("Les objets XMLHTTPRequest ne sont pas supportés par votre navigateur!");
return;
}
Préparation de la transmission
Paramètres :- Méthode : GET ou POST
- URL à appeler
- Mode de transmission : false pour synchrone, true pour asynchrone
Pour transmettre des paramètres, il faut les concaténer sous la forme nomParam1=ValueParam1&nomParam2=ValueParam2...
Avec la méthode GET, ils sont concaténés à l'url après le ?
xmlHttpRequest.open("GET", "http://url?nomParam1=ValueParam1&nomParam2=ValueParam2...", true);
Avec la méthode POST, il passé en paramètre à la méthode send()
xmlHttpRequest.open("POST", "http://url", true);
La méthode open peut indiquer des informations d'identification
xmlHttpRequest.open("POST", "http://url", true, "user", "pwd");
Exécution de la requête
Pour une requête GET, aucun paramètre dans send() car il sont contenu dans l'url passé à la méthode open()
xmlHttpRequest.send(null);
Pour une requête POST, il faut modifier le header et passé les paramètres à la méthode send()
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("nomParam1=ValueParam1&nomParam2=ValueParam2...");
Traitement du résultat
La propriété onreadystatechange nous permet d'exécuter une requête en mode asynchrone et de définir une fonction de traitement lorsque celle-ci est terminée. Elle est appelée lors de chaque changement d'état de readyState
Les informations du serveur sont contenues dans la variable responseText ou responseXML, selon que le résultat est au format texte ou XML.
Le code du statut HTTP retourné par la requête est stocké dans la propriété status
xmlHttpRequest.onreadystatechange = function() {
if(xmlHttpRequest.readyState == 4) {
alert(xmlHttpRequest.responseText);
}
}
Il est aussi possible de récupérer les entêtes HTTP vis getAllResponseHeaders() ou getResponseHeader(headerName).
Annulation de la requête
xmlHttpRequest.abort();
Valeurs de la propriété readyState
La valeurs de la propriété readyState sont :
| Valeur | Texte | Description |
| 0 | uninitialized | Non initialisé |
| 1 | loading | Début du transfert des données |
| 2 | loaded | Données transférées |
| 3 | interactive | Données reçues en partie accessibles |
| 4 | complete | Données complétement accessibles |