L’objet XMLHttpRequest | Développement Web
Accueil Premiers pas en Ajax L’objet XMLHttpRequest

L’objet XMLHttpRequest

L’objet XMLHttpRequest est l’objet qui va vous permettre d’utiliser la technologie Ajax au sein de vos pages web.

Création de l’objet XMLHttpRequest

//Création de l'objet XHR
function new_xhr(){
   var xhrObject = null;
   if(window.XMLHttpRequest) // Firefox et autres
     xhrObject = new XMLHttpRequest();
   else if(window.ActiveXObject) {// Internet Explorer
     try{
	   xhrObject = new ActiveXObject("Msxml2.XMLHTTP");
	 }
	catch (e){
	   xhrObject = new ActiveXObject("Microsoft.XMLHTTP");
	}
    } else {// XMLHttpRequest non supporté par le navigateur
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	xhrObject = false;
    }
    return xhrObject;
}

Une fois l’objet XMLHttpRequest créé, il est possible d’effectuer autant d’appel que nécessaire à cet objet par le biais des fonctions.

Fonction faisant appel à l’objet XMLHttpRequest

function appelAjax(a){
   xhrObject = new_xhr();
   //Instanciation de l'objet XMLHttpRequest

   xhrObject.open('get','page_a_appeler.php?'+a, true);
  //Paramètre de l'appel ajax :
   méthode = GET, page = page_a_appeler.php, paramètre = a, asynchrone = true

   xhrObject.onreadystatechange = traiteReponse;
   //onreadystatechange correspond à l'état de la réponse Ajax.
   Cet état passe successivement de 0 à 4.
   S'il est égal à 4, cela signifie qu'il est prêt à renvoyer une réponse.
   Ici, lorsque cet état change, on appelle la fonction traiteReponse

   xhrObject.send(null);
   //send('variable') pour envoyer des variables au serveur.
   On renseigne NULL pour un appel en GET.

 }

Il reste maintenant à créer la fonction que s’occupera de traiter la réponse de l’appel Ajax.

Fonction de traitement de l’appel ajax

 function traiteReponse(){
    if(xhrObject.readyState==4){
    // On teste si la page est prête à renvoyer une réponse

        if(xhrObject.status  == 200)
        // Signifie que tout a l'air OK

         document.getElementById('zone').innerHTML = xhrObject.responseText;
         // On insère la réponse dans l'élément HTML qui a pour id zone

    }else{
      // L'appel Ajax n'est pas encore prêt à fournir une réponse

     document.getElementById('zone').innerHTML ="Chargement en cours...";
     // En attendant la réponse, on affiche "chargement en cours..."
      à l'endroit ou devra apparaître la réponse	

    }
}

Récapitulatif

new XMLHttpRequest()

Constructeur qui permet de créer un objet de type XMLHttpRequest pour tous les navigateurs sauf IE.

new ActiveXObject( »Msxml2.XMLHTTP ») et new ActiveXObject( »Microsoft.XMLHTTP »)

Constructeur qui permet de créer un objet de type XMLHttpRequest pour Internet Explorer.

xhrObject.open(’GET’,'page_a_appeler.php?’+a, true);

Création de l’appel Ajax.
- Paramètres passés en GET ou POST.
- L’URL de la page de traitement (page_a_appeler.php).
- Puisqu’ici la méthode choisie est GET, on ajoute le paramètre a.
- Mode asynchrone donc true. Renseigner false pour mode synchrone.

xhrObject.onreadystatechange

Lorsque l’état de l’appel Ajax change (il passe de 0 à 4), on appelle une fonction, ici traireReponse. Lorsque l’état est égal à 4, cela signifie que le retour de l’appel Ajax est prêt à être renvoyé / analysé.

xhrObject.send(null) ou xhrObject.send(document.getElementById(MON_ELEMENT).value)

Cette méthode de l’objet permet d’envoyer des données au serveur. Si la méthode choisie est GET, on renseigne NULL. Si c’est POST, on envoie la valeur de l’élément HTML qui a pour id: ELEMENT.

if(xhrObject.readyState == 4)

Teste si la réponse renvoyée par le serveur est prête à être analysée.

if(xhrObject.status == 200)

Teste si le statut est égal 200. Cela signifie que tout est ok. En revanche, si la page appelée n’existe pas, l’appel renverra un code 404.

xhrObject.responseText

On récupère la réponse (responseText) que l’on peut alors exploiter.

Mots clés connexes: , ,
BOOKMARK