 |
|
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX Cours de JavaScript Liste de discussion Forums CountUs myCircle ClickInText XooIt HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kit graphique Foire aux questions Les membres Devenir annonceur Faire un lien Contact Compteur live Créer un forum Le PHP facile Comscripts Liens sponsorisés Blog Page Rank Poésie et cita... Gifs animés, f... Easy-script.com Azote.org - no... Web creation ... K i s s design Outils de créa... Electroniq... Je crée mon site Créer son site... Les autres Votre site ici
? |
 Ajax : synchrone et asynchrone ? Des exemples !
Nous avons vu dans le précédent article sur le sujet qu'AJAX voulait dire "Asynchronous Javascript And Xml". Asynchronous est un terme moche et barbare qui, basé sur synchrone, veut dire qu'AJAX peut, au choix, etre executé de façon synchrone (le script va attendre que la requete AJAX vers le serveur soit faite pour se poursuivre) ou asynchrone (le script n'attend pas la fin de la requete). Voyons pas l'exemple : AJAX executé de façon synchrone
Reprennons le code de notre précédent article, et ajoutons-y un evenement déclencheur. Au clic, le notre script va verifier le contenu dans fichier PHP (ajax_test.php, contenant le texte « Ceci est un test ») et l'afficher dans un "div". Pour bien montrer le fonctionnement du script, notre fichier PHP contient un "sleep(2)" qui va retarder sa lecture. A chaque étape du script, des lignes seront ajoutées dans le div
<script type="text/javascript"> function exemple() { obj = document.getElementById("resultat"); // ON AFFICHE UNE PREMIERE LIGNE DANS LE DIV obj.innerHTML = "Avant la requete : OK<br />"; if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); // ON APPELLE LA PAGE xhr_object.open("GET", "/misc/ajax_test.php", false); xhr_object.send(null); // ON AFFICHE UNE SECONDE LIGNE DANS LE DIV obj.innerHTML += "Apres la requete : OK<br />"; // ON AFFICHE LE RESULTAT DANS LE DIV res = "Contenu du fichier : "+xhr_object.responseText; obj.innerHTML += res; } </script> <a href="javascript:exemple()">Hop, on essaye !</a> <div id="resultat"></div> Rien d'extraordinnaire dans ce bout de code. A noter simplement que le "false" dans l'appel de "xhr_object.open" signifie que nous sommes en mode synchrone. Nous passerons cet élément à "true" dans notre prochain exemple. Resultat : Hop, on essaye ! On voit bien dans cet exemple que le script attend la fin du chargement de la page pour continuer. Cela peut être pratique, mais certaines fois, on aura envie d'executer diverses actions pendant le chargement du fichier, et a chaque étape de sa lecture. Nous allons donc passer en mode "asynchrone". AJAX executé de façon asynchrone
Reprennons le code précédent et passons le simplemet en mode asynchrone (en changer le parametre cité précedement à "true") :
<script type="text/javascript"> function exemple() { obj = document.getElementById("resultat"); // ON AFFICHE UNE PREMIERE LIGNE DANS LE DIV obj.innerHTML = "Avant la requete : OK<br />"; if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); // ON APPELLE LA PAGE xhr_object.open("GET", "/misc/ajax_test.php", true); xhr_object.send(null); // ON AFFICHE UNE SECONDE LIGNE DANS LE DIV obj.innerHTML += "Apres la requete : OK<br />"; // ON AFFICHE LE RESULTAT DANS LE DIV res = "Contenu du fichier : "+xhr_object.responseText; obj.innerHTML += res; } </script> <a href="javascript:exemple()">Hop, on essaye !</a> <div id="resultat"></div> Essayons : Hop, on essaye ! Tout s'est executé avant la fin du chargement. Resultat notre script n'affiche pas le contenu du fichier appelé. Avouons que le résultat n'est pas tres interessant dans l'immediat. Pour tirer partie de « l'asynchronisime » (je me suis lancé, n'hésitez pas à me dire si ce mot existe ou non), nous allons ajouter a ce bout de code « des controles » pour verifier chaque étape de la requete vers le serveur, et d'y associer, si on le désire, des actions. Les controles de requetes :
Lorsque nous créons une requete vers un fichier, nous créons un objet "XMLHttpRequest", dans notre exemple, il correspond a la variable "xhr_object". Un attribut de cet objet, "readyState" va nous permettre de connaître l'état de notre requete en temps réèl. En effet, cet attribut retourne un code different pour chaque disponibilité des données :
<script type="text/javascript"> function exemple() { obj = document.getElementById("resultat"); // ON EFFACE LE CONTENU DU DUV obj.innerHTML = ""; if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); // CONTROLE DE L'ETAT DE LA REQUETE // CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE DANS NOTRE DIV xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 1) obj.innerHTML += "connexion établie<br />"; if(xhr_object.readyState == 2) obj.innerHTML+= "requête reçue<br />"; if(xhr_object.readyState == 3) obj.innerHTML += "réponse en cours<br />"; if(xhr_object.readyState == 4) { // ON CONTROLE LE STATUS (ERREUR 404, ETC) if(xhr_object.status == 200) obj.innerHTML += "Fichier : " + xhr_object.responseText; else obj.innerHTML +="Error code " + xhr_object.status; } }; // ON APPELLE LA PAGE xhr_object.open("GET", "/misc/ajax_test.php", true); xhr_object.send(null); } </script> <a href="javascript:exemple()">Hop, on essaye !</a> <div id="resultat"></div> Voyons ce que ca donne : Hop, on essaye ! Et voilà, tout s'offre à vous désormais ! On peut imaginer afficher une petite image d'attente pendant le chargement, etc ... Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "Divers" du jour par mirage Simplifiez-vous les forums : http://update.mozilla.org/extensions/moreinfo.php?id=128&vid=196&category=Miscellaneous ! Avec ce petit menu ajouté à vos options du clic droit, vous avez toutes les balises BBCode ! Très pratique pour le forum de l'EJS ;) Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2012 EJS - Tous droits réservés | CNIL N° 844440 | 13/02/2012 11:55:55 | Design by | Gen. en 0.494 sec.
|
 |