AJAX (Asynchronous Javascript And XML)
Page 3: Objet XMLHttpRequest
Toutes les pages 
AJAX (Asynchronous Javascript And XML)
Page 3
Objet XMLHttpRequest
Objet XMLHttpRequest
Echanger les données avec le serveur à l'aide du XMLHttpRequest
Présentation
XMLHttpRequest est l'objet sur lequel AJAX est fondé. Il s'agit d'un objet Javascript dont le rôle est d'échanger les données entre le client et le serveur sans que la page ne soit entièrement rechargée.XMLHttpRequest a été développé par Microsoft qui l'a initialement intégré dans son navigateur Internet Explorer depuis sa version 5 en tant qu'objet ActiveX. Peu de temps après, il a été repris par d'autres navigateurs tel que Mozilla, Opera et Safari. De nous jours, cet objet est supporté par tous les navigateurs connus et est devenu un standard recommandé par W3C.
Création de l'objet XMLHttpRequest sur le navigateur
L'objet XMLHttpRequest est implémenté différemment selon le navigateur. Il est reconnu en tant qu'ActiveX sur Internet Explorer et en tant qu'objet sur les navigateurs restants. En plus, il existe plusieurs versions de l'ActiveX pour Internet Explorer qui vont avec les versions du navigateur lui même.Avant d'aller plus loin, nous allons écrire un code qui permet de vérifier si le navigateur supporte l'objet XMLHttpRequest ou l'ActiveX du nom de ActiveXObject.
<!DOCYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function test(){
if(window.ActiveXObject)
alert("Votre navigateur supporte ActiveXObject.");
else{
if(window.XMLHttpRequest)
alert("Votre navigateur supporte XMLHttpRequest.");
}
}
</script>
</head>
<body>
<input type="button" value="Tester le navigateur" onClick="test()" />
</body>
</html>
Il suffit de cliquer sur le bouton pour voir si votre navigateur supporte l'un ou l'autre:
<html>
<head>
<meta charset="UTF-8" />
<script>
function test(){
if(window.ActiveXObject)
alert("Votre navigateur supporte ActiveXObject.");
else{
if(window.XMLHttpRequest)
alert("Votre navigateur supporte XMLHttpRequest.");
}
}
</script>
</head>
<body>
<input type="button" value="Tester le navigateur" onClick="test()" />
</body>
</html>
Notez que l'objet a été standardisé par W3C sous le nom de XMLHttpRequest. Le navigateur Internet Explorer (à partir de sa version 7) le reconnait ainsi par ce nom.
Maintenant nous allons voir comment créer l'objet XMLHttpRequest quelque soit le navigateur. Au lieu de faire des tests sur la présence de l'objet ou de l'activeX qui peut lui même avoir plusieurs versions, nous allons simplement recourir à la gestion des exceptions pour gérer les erreurs éventuelles au cas où on tente de créer un objet qui n'est pas pris en charge par le navigateur.
Le code que je propose est le suivant:
<script>
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;
}
</script>
Des explications s'imposent:
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;
}
</script>
A l'appel de la fonction getxhr(), le navigateur tentera tout d'abord (à l'aide de la structure try()) de créer l'objet xhr à partir de XMLHttpRequest. Il s'agit d'ailleurs de l'objet le plus probable vu que tous les navigateurs le supportent et même les versions supérieures à 7 d'Interner Explorer. Si cet objet n'est pas supporté par le navigateur (ce qui est peu probable) alors une exception est lancée et rattrapée (structure catch()) et le navigateur tente de créer l'objet xhr à partir de l'ActiveX ActiveXObject. La version de l'ActiveX est renseignée par l'argument qui lui est passé:
- Microsoft.XMLHTTP: pour la version 6 ou plus d'Internet Explorer.
- Msxml2.XMLHTTP: pour la version 5 d'Internet Explorer.
Si malgré tout l'objet xhr n'est pas créé alors on affiche le message "AJAX n'est pas supposrté par votre navigateur!".
La fonction getxhr() retourne l'objet xhr ainsi crée.
Au lieu d'afficher le message "AJAX n'est pas supposrté par votre navigateur!", il serait utile de rediriger le client vers une version de la page Web qui n'utilise pas AJAX.
Une fois l'objet xhr créé, l'exploitation de celui-ci se fait par des attributs et méthodes qui sont reconnus de la même façon par tous les navigateurs.
Exploration de l'objet XMLHttpRequest en vidéo
Page 3
Objet XMLHttpRequest
Objet XMLHttpRequest
