La communauté ALL HTML c'est 60442 membres à ce jour dont 0 inscrits aujourd'hui et 5 depuis une semaine.

Le retour du XMLHttpRequest

Photo de Liko Article publié le mardi 22 août 2006 par Liko.
Cet article est classé dans les catégories « Javascript, PHP, web 2.0 »

Le javascript n'est pas mort et relance même la tendance actuelle. En effet le mot à la mode qui est Ajax relance l'utilisation d'objet javascript comme XMLHttpRequest, qui sans etre récent devient quasi incontournable. Quel interet ? C'est tout simple aller transferer des informations de maniere asynchrone sans avoir à recharger sa page.

Cet objet échange donc des données XML ou XSLT de manière asynchrone.

Dans la pratique cela peut vous servir par exemple à remplir un bloc par du contenu chargé sur une autre page, ce même contenu pouvant être rechargé sans avoir à recharger toute la page.

Exemple :

<script> function charge() { aleatoire = Math.random(); var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } var method = "GET"; var filename = "variable.php?a="+escape(aleatoire); xhr_object.open(method, filename, true); xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 1) { var tmp = xhr_object.responseText; document.getElementById('le_div').innerHTML = "Chargement en cours"; } if(xhr_object.readyState == 4) { var tmp = xhr_object.responseText; document.getElementById('le_div').innerHTML = tmp; } } xhr_object.send(); setTimeout("charge()", 1000); } </script> <body onLoad="charge();"> <div id="le_div"></div> </body>

Ici le contenu du bloc "le_div" sera rafraichi toutes les secondes (setTimeout("charge()", 1000);) et on contournera le probleme de la mise en cache du contenu venant de la page variable.php en passant une variable aleatoire lors de l'appel, avec une variable en javascript ici "aleatoire" (aleatoire = Math.random();) que l'on attribu au fichier distant (var filename = "variable.php?a="+escape(aleatoire);).

Vous remarquerez également ici deux valeur pour xhr_object.readyState, la valuer "1" signifie que le chargement des données est en cours, et la velur "4" retourne les données une fois chargées.

Attention ceci n'est en aucun cas de l'Ajax en tant que tel.

VOS COMMENTAIRES ...

Commenter cette publication

Photo de RaoulChatigre Commentaire publié le mardi 22 août 2006 à 10 h 13 par RaoulChatigre
Afin d'être bien clair : dixit Wikipedia, (http://fr.wikipedia.org/wiki/AJAX)
"À l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web"

Le frontière entre faire de l'AJAX et faire de l'HTTP asynchrone est en réalité vite franchie, et l'on dis souvent à tort "je fais de l'ajax" (moi le premier)

Or si les données transférées sont par exemple du code XHTML, c'est du XML :P on peu dire que c'est de l'AJAX !

Pour ma part je suis actuellement en train de développer une application web lourde où l'AJAX est omniprésent.
Et bien croyez moi :cela devient vite une usine à gaz, AJAX est une parade finalement assez vieille qui n'apporte que de la convivialité à une interface WEB et le web 2.0 a encore beaucoup de progrès à faire.
Photo de DrHelmut Commentaire publié le lundi 04 septembre 2006 à 19 h 35 par DrHelmut
Je suis d'accord avec Raoul : le nom "AJAX" c'est pour faire beau & marketing (ça veut quand même dire tout simplement JS+XmlHtpRequest, mot à mot...)

Je préfère le terme de "web 2.0" qui désigne des apllications web réactives, donc usant de DHTML et éventuellement d'appels asynchrones vers le serveur. D'ailleurs même si le DHTML compatible tout navigateurs est bien plus facile à faire qu'il y a 5 ans, la manipulation des appels asynchrones est toujours à manier avec prudence !

Il faut par exemple penser à "vérrouiller" les formulaires à leur validation pour éviter que l'utilisateur ne re-click indéfiniment sur "ok", ect...

Donc à mon avis c'est à utiliser uniquement lorsque cela apporte un vrai plus, pas pour le style !

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans nos forums Javascript - DHTML - VBScript, PHP - SQL.

Liens sponsorisés

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.