Création XHR selon navigateur

Document Sample
Création XHR selon navigateur Powered By Docstoc
					    Mode de fonctionnement AJAX :




                                                                        Code source de la page « Fonction Ajax.Js »


    Création XHR selon navigateur :
function creationXHR() {

 var resultat=null;

 try {              //test pour les navigateurs : Mozilla, Opéra, ...

          resultat= new XMLHttpRequest();

  }

  catch (Error) {

  try {        //test pour les navigateurs Internet Explorer > 5.0

  resultat= new ActiveXObject("Msxml2.XMLHTTP");

  }

  catch (Error) {
            try {          //test pour le navigateur Internet Explorer 5.0

            resultat= new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (Error) {

                resultat= null;

            }

        }

    }

return resultat;

}

          Fonction de gestion du dom(solution alternative à innerHTML):
function remplacerContenu(id, texte) {

    var element = document.getElementById(id);

    if (element != null) {

        supprimerContenu(element);

        var nouveauContenu = document.createTextNode(texte);

        element.appendChild(nouveauContenu);

    }

}



function supprimerContenu(element) {

if (element != null) {

        while(element.firstChild)

            element.removeChild(element.firstChild);

    }

}
     Fonction encodage
//code en UTF8, la valeur d'un élément dont id passé en parametre, pour que le navigateur affiche le caractére
spéciaux (é,è,à,…) tel qu’elle est.

function codeContenu(id) {

       var valeur=document.getElementById(id).value;

       return encodeURIComponent(valeur);

}

                                                               Code source de la page « Fonction Machine.Js »

// lors du chargement de page en premier lieu on lance le fonction testerNavigateur.

window.onload=testerNavigateur;

function testerNavigateur() {

       objetXHR = creationXHR();

       if(objetXHR==null) {       // si l’objetXHR n’est pas créer

               document.getElementById("button").disabled= true;

               var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";

               remplacerContenu("info", erreurNavigateur);

           document.getElementById("info").style.visibility="visible";

       }

}

     Configuration et l’envoi de la requette ASYNCHRONE

function jouer() {

//verif si nom du joueur est bien saisi

document.getElementById("nom").style.backgroundColor="white";

var nom=document.getElementById("nom").value;

        if(nom==""){
                  //-------------change la couleur du champ

            document.getElementById("nom").style.backgroundColor="red";

            //-----------affiche message Alert

            alert("Attention : vous devez saisir votre nom avant de jouer");

            return null;

        }

        //création d'un objet XHR multi-navigateurs

        objetXHR = creationXHR();

        var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache

        //construction de la chaine des parametres

        var parametres = "nom="+ codeContenu("nom") +

                      "&anticache="+temps ;

        //Config. objet XHR

    objetXHR.open("get","gainAleatoire.php?"+parametres, true);

        objetXHR.onreadystatechange = actualiserPage;//désignation de la fonction de rappel

        //gestion du bouton et du chargeur

        document.getElementById("button").disabled= true;

        document.getElementById("charge").style.visibility="visible";

    objetXHR.send(null); //envoi de la requete

}

function actualiserPage() {

        if (objetXHR.readyState == 4) { //test si le résultat est disponible

        if (objetXHR.status == 200) {

            var nouveauResultatXML = objetXHR.responseXML; //recup du résulat au format XML

            //récupération des valeurs dans l'arbre XML

            var gainTxt=nouveauResultatXML.getElementsByTagName("gain")[0].firstChild.nodeValue;

            var gagnantTxt=nouveauResultatXML.getElementsByTagName("nom")[0].firstChild.nodeValue;

            //actualisation des résultats

            remplacerContenu("resultat",gainTxt);
        remplacerContenu("gagnant",gagnantTxt);

        //affiche la zone info

        document.getElementById("info").style.visibility="visible";

        //gestion du bouton et du chargeur

        document.getElementById("button").disabled= false;

        document.getElementById("charge").style.visibility="hidden";

    }else{

        //message d'erreur serveur

        var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;

        remplacerContenu("info", erreurServeur);

        document.getElementById("info").style.visibility="visible";

        //gestion du bouton et du chargeur

        document.getElementById("button").disabled= false;

        document.getElementById("charge").style.visibility="hidden";

        //annule la requete en cours

        objetXHR.abort();

        objetXHR=null;

        }

    }

}

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:9
posted:10/11/2012
language:French
pages:5