AJAX

 : 

la technologie

AJAX signifie Asynchronous JavaScript + XML.

Ajax utilise en fait le Javascript pour émettre une requête Http en direction du serveur, et ce dernier renvoie un résultat que l'on pourra afficher dans une zone de la page déjà chargée.







Commençons par la page HTML dans laquelle on voudra recharger dynamiquement une partie :

var xhr_object = null;
var pageAjax = 'http://monsiteamoi.fr/page1ajax.php';
// page qui sera appelée sur le serveur et qui renverra le résultat

function envoiRequete()
{
  if ( window.XMLHttpRequest )
  {
    // Objet XmlHttpRequest pour les moteurs GECKO comme Firefox
    xhr_object = new XMLHttpRequest();
  }
  else if ( window.ActiveXObject )
  {
     // Objet XmlHttpRequest pour Internet Explorer
    xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
  }
  else
  {
    // navigateur incompatible
    return;
  }
  // On "ouvre" la requête vers la page désirée
  xhr_object.open('GET', pageAjax, false);
  // On lui donne le pointeur de fonction à exécuter quand
  le serveur renverra le résultat
	xhr_object.onreadystatechange = CallBackRequest;
  // On envoie la requête
  xhr_object.send(null);
}

function CallBackRequest() {
  // Le résultat est renvoyé
   if ( xhr_object.readyState == 4 )
   {
     // On injecte le résultat dans un div conçu dans ce but
     document.getElementById('divResultat').innerHTML = xhr_object.responseText;
   }
}

Dans cette même page, on trouve par exemple un bouton qui va appeler la fonction précédente, ainsi qu'un div qui recevra le résultat :

<input type="button" value="XMLHttpRequest" onclick="envoiRequete();" />

<div id="divResultat">
</div>

---

Ensuite, il faut créer le fichier sur le serveur qui calculera le résultat qui sera affiché dans le div.
Par exemple, plusieurs appels au serveur pourront être effectués à partir d'une page dans lequel un menu ne sera jamais rechargé, d'où des gains de temps de chargement.
Exemple de page Serveur en PHP (n'importe quel langage peut être choisi). Il faut juste penser que le code renvoyé sera intégré à un code html déjà existant, on ne remet pas entre autres les balises html, head et body.

<?
//affichage de l'heure
  echo "Bonjour, il est actuellement ".date("h:i:s");
?>

On peut faire ce que l'on veut dans cette page de traitement, comme des calculs, des requêtes sur une base de données, ...