ALL HTML - Le retour du XMLHttpRequest

Communauté ALL HTML : Liko

Le retour du XMLHttpRequest

Cet article est actuellement publié sur le site.

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.

all html : Le portail des webmaster

Communauté ALL HTML : Liko

Le retour du XMLHttpRequest