AJAX (Asynchronous Javascript And XML)
Page 5: Explorer l'objet XMLHttpRequest - Partie 2
Toutes les pages 
AJAX (Asynchronous Javascript And XML)
Page 5
Explorer l'objet XMLHttpRequest - Partie 2
Explorer l'objet XMLHttpRequest - Partie 2
Méthodes de l'objet XMLHttpRequest
Méthode open()
La méthode open() permet de spécifier le document à ouvrir sur le serveur. Il s'agit du document qui contient la réponse à renvoyer au client. Elle est déclarée ainsi:xhr.open( Méthode , Document , Booléen)
Voici la signification des arguments de cette méthode:
- Méthode: Peut prendre comme valeur soit GET ou POST. On utilise la méthode GET quand il n'y a pas de paramètres à envoyer au serveur. POST quant à elle, est utilisée quand on veut envoyer des paramètres avec la requête.
- Document: Désigne le chemin du document qui contient la réponse au format texte, HTML, ou XML.
- Booléen: Prend soit la valeur true qui signifie l'envoie des requêtes en mode asynchrone ou false qui sous-entend le mode synchrone. Bien entendu, il faut le fixer en true pour bénéficier de la puissance du mode asynchrone qui est l’essence même d'AJAX.
Il serait utile de mentionner que l'objet XMLHttpRequest figure en version 1 et 2. La version 1 est la plus utilisée actuellement, cependant elle ne permet pas de se déplacer de domaine en domaine. Autrement dit, le chemin du document de la réponse doit figurer dans le domaine courant. La version 2 par contre, permet d'aller de domaine en domaine. Or, elle n'est pas encore supportée par tous les navigateurs.
Méthode send()
La méthode send() permet d'envoyer des paramètres avec la requête au serveur. Quand on utilise GET dans la méthode open() on n'envoie pas de paramètres, mais il faut quand même déclarer la méthode send() en lui passant comme argument la chaîne "null" comme ceci:xhr.send("null");
Si par contre on souhaite envoyer des paramètres au serveur, on déclare la méthode open() avec POST et on passe comme argument à la méthode send() une chaîne de caractères qui contient la liste des paramètres séparés par le caractère &.
Par exemple, supposons qu'on veut envoyer au serveur les paramètres cours et niveau qui ont comme valeurs respectives AJAX et Moyen. On suppose que le document qui sera exécuté par le serveur (celui qui contient la réponse) s'appelle cours.php. Le code devrait ressembler à ceci:
xhr.open("POST" , "cours.php" , true);
xhr.send("cours=AJAX&niveau=Moyen");
xhr.send("cours=AJAX&niveau=Moyen");
Méthode setRequestHeader()
La méthode setRequestHeader() permet de définir les entêtes sur la requête avant de l'envoyer au serveur. Elle accepte deux arguments qui signifient respectivement le nom de l'entête et la valeur qui lui est attribuée.Cette méthode est obligatoire quand on veut envoyer des paramètres au serveur. En général elle est déclarée comme ceci:
xhr.open("POST" , "cours.php" , true);
xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xhr.send("cours=AJAX&niveau=Moyen");
xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xhr.send("cours=AJAX&niveau=Moyen");
Le deuxième argument de setRequestHeader() est déclaré de la même manière que l'attribut enctype de la balise <form>.
Méthode abort()
La méthode abort() met fin à l'instance AJAX et arrête ainsi l'activité en cours. En général elle est appelée quand la réponse met beaucoup de temps à parvenir au client.Exemple:
<script language="javascript">
function getxhr(){
try{xhr=new XMLHttpRequest();}
catch(e){
try{xhr=new ActiveXObject("Microsoft.XMLHTTP");}
catch(e1){
try{xhr=new ActiveXObject("Msxml2.XMLHTTTP");}
catch(e2){
alert("AJAX n'est pas supporté par votre navigateur!");
}
}
}
return xhr;
}
function stop(){
xhr.abort();
alert("Délai d'attente dépassé!");
}
function ajaxing(){
xhr=getxhr();
t = setTimeout("stop()",3000);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById("divi").innerHTML = xhr.responseText;
clearTimeout(t);
}
else{
document.getElementById("divi").innerHTML = "<img src='images/loading.gif' />";
}
}
xhr.open("POST" , "cours.php" , true);
xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xhr.send("cours=AJAX&niveau=Moyen");
}
</script>
Dans cet exemple j'ai défini trois fonctions:
function getxhr(){
try{xhr=new XMLHttpRequest();}
catch(e){
try{xhr=new ActiveXObject("Microsoft.XMLHTTP");}
catch(e1){
try{xhr=new ActiveXObject("Msxml2.XMLHTTTP");}
catch(e2){
alert("AJAX n'est pas supporté par votre navigateur!");
}
}
}
return xhr;
}
function stop(){
xhr.abort();
alert("Délai d'attente dépassé!");
}
function ajaxing(){
xhr=getxhr();
t = setTimeout("stop()",3000);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById("divi").innerHTML = xhr.responseText;
clearTimeout(t);
}
else{
document.getElementById("divi").innerHTML = "<img src='images/loading.gif' />";
}
}
xhr.open("POST" , "cours.php" , true);
xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xhr.send("cours=AJAX&niveau=Moyen");
}
</script>
- getxhr() qui retourne l'objet xhr.
- stop() qui met fin à l'instance AJAX et affiche le message "Délai d'attente dépassé!".
- ajaxing() qui sera exécutée suite à l'événement qui sollicitera le traitement AJAX.
Dans la fonction ajaxing() j'ai prévu un temporisateur à l'aide de la méthode setTimeout() (vue dans le cours de Javascript) qui appellera la méthode stop() après 3 secondes de l'appel de la fonction ajaxing(). Si la réponse n'est pas affichée dans 3 secondes, alors la fonction stop() est appelée et met fin à l'instance AJAX en cours. Si par contre la réponse est reçue avant l'expiration du temporisateur alors on annule celui ci à l'aide de la méthode clearTimeout().
Vous avez sans doute remarqué qu'en attendant la réponse du serveur j'ai affiché une GIF annimée à l'aide da la balise d'image: <img src='images/loading.gif' />
Page 5
Explorer l'objet XMLHttpRequest - Partie 2
Explorer l'objet XMLHttpRequest - Partie 2
