picture picture
octobre 25, 2013 JavaScript 0 Commentaire

XmlHttpRequest : AJAX en 4 temps

ajaxAjax ? 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”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: