XmlHttpRequest : AJAX en 4 temps
Ajax ? Fastoche… Un vulgaire JavaScript (mal) nommé XmlHtpRequest ^^
Comment créer un « Loading… » à la Gmail sur une requête de type » remote scripting » : mode d’emploi en 4 temps (comme les valses !) […]
Dans le <head> de sa page, on déclare un script JavaScript avec les fonctions d’appel :
1ere étape : la déclaration est différente suivant le navigateur du visiteur :
if(document.all && !window.opera) {
//si Internet Explorer ou Opera
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; }
else {
//si Mozilla
var XhrObj = new XMLHttpRequest(); }
2eme étape : on déclare la fonction qui va afficher ou cacher la calque du « loading… »
// Fonction de gestion du calque de loading pendant le chargement de la requete
// les alert() ne sont là que pour visualiser l'évolution du processus. A supprimer ensuite 
function gestionstatechange() {
var elt = document.getElementById('loading');
switch (XhrObj.readyState) {
case 1:
// 1 (loading) début du transfert des données : loading visible
elt.style.display="block";
// test à supprimer
alert('1');
break;
case 2:
// 2 (loaded) données transférées : loading visible
elt.style.display="block";
// test à supprimer
alert('2');
break;
case 3:
// 3 (interactive) les données reçues sont accssibles en partie : loading visible
elt.style.display="block";
// test à supprimer
alert('3');
break;
case 4:
//si la page cible est OK (code HTTP 200) et 4 (complete :les données sont complètement accessibles), loading caché
// NB : Firefox declanche avec "status" tant que le code de chargement n'est pas à 4
if (XhrObj.status == 200) {
//définition de l'endroit d'affichage:
var content = document.getElementById("contenu");
//on affecte à l'endroit d'affichage la valeur du fichier distant recupéré avec la propriété .responseText
content.innerHTML = XhrObj.responseText ;
// s'il y avait un Javascript à interpreter dans le fichier distant, on ecrirait : eval(XhrObj.responseText);
}
elt.style.display="none";
// test à supprimer
alert('4');
break;
default:
// 0 (uninitialized) non initialisé
alert('Le serveur est bloqué. Veuillez recommencer.'); break;
}
}
3eme étape : on peut maintenant déclarer la fonction de lancement de la requête distante dans le fichier php par un lien
<div>
<!-- on appelle de script distant de test-requete.php -->
<a href="javascript:envoi('blabla=OK', 'test_requete.php')"> GO </a>
<!-- Et on l'affiche là, par exemple (ici on afficherait : OK) -->
<span id="contenu"></span>
</div>
Dans l’exemple, elle est appelée par un lien (NB : l’appel du JavaScript se fait sur un lien et non sur le Submit du formulaire)
Dernière étape : on crée un fichier PHP (ou ASP) contenant la requête elle même :
ici la page test_requete.php
<?php
// preciser le type de données transférées depuis le serveur
header('Content-type: text/html; charset=iso-8859-1');
// et affichage des chaînes de données qui vont être reprises par XhrObj.responseText
echo $_POST['blabla'];
?>
C’est tout ! Le résultat du traitement de requête.php va s’afficher (sans recharger la page initiale) dans le calque nommé « contenu » que vous placez où vous voulez.
Pour plus de « raffinement » et si votre script est lourd, vous pouvez afficher un petit « loading… » en insérant où vous voulez le calque suivant :
<!-- Message de chargement ajax -->
<div id="loading" style="display:none;position:absolute; left:150px; top:15px; width:200px;padding:3px;background-color:#FC9;">
Chargement ...
</div>
Tous commentaires, ou amélioration du script, seront bienvenus 
No Responses to “XmlHttpRequest : AJAX en 4 temps”