AJAX contre AHAH
Publi� le 6 mars 2006

Voici la traduction d'un article AJAX vs AHAH visant à comparer les deux technologies asynchrones. A la fin, je vous montre comment utiliser AHAH avec un bout de code. L'intérêt pour AJAX date d'à peine un an, alors qu'il était déjà possible de l'utiliser sous IE en 2000.

Les liens dirigent vers des articles en anglais.


Quelques semaines auparavant quelques gusses ont découvert la section RESTdu wiki microformats qui discute du “comment utiliser de manière optimale les Microformats comme encodage pour les services web REST”. Cette section s'est etoffée pour inclure des discussions plus large, afin d'appliquer les principes des microformats aux protocoles et au javascript.

Un de ces principes pourrait se résumer en : Pourquoi utiliser XML quand (X)HTML suffit ?

On pourrait ajouter : Pourquoi s'embêter à parser/convertir quand tout ce que l'on souhaite est de présenter la donnée ? Après tout, tout le monde sait que moins de code il y a, mieux c'est.

AHAH [1] est le résultat de l'application de ces principes à l'incroyable WEB2.0 de la HYPE nommé AJAX. Concrètement, AHAH n'est qu'un sous ensemble d'AJAX, quoiqu'un ce sous ensemble enlève l'emphase au X de AJAX.

Le Magazine AJAX a publié une bonne introduction aux avantages de AHAH par rapport au couple traditionnel AJAX et XML.

Keith Devens le résume bien :

plutôt que de récupérer arbitrairement le XML et le traiter côté client avec Javascript ou XSLT et insérer les données dans le DOM, vous récupérez seulement quelques octets d'(X)HTML du serveur et l'injectez directement dans votre page. Doncn du côté client on ne s'occupe que de la logique et nous lui demandons basiquement de “remplacer le contenu d'un élément avec cet ID par du (X)HTML à cette URL.

Alors si vous vous demandez ce qu'est cette variante d'AJAX, alors jetez un oeil à AHAH, et vous découvrirez qu'il vous fera atteindre 90% des besoins de l'interface utilisateur avec seulement 10% du "hype" (et de l'effort). C'est une sorte de règle 90/10 dont nous aimons parler.

Mais ne nous prenez pas au mot, allez voir par vous même ce que d'autres ont dit à propos d'AJAX et AHAH.

Fin de l'article.


Je dois avouer que cette présentation m'a laissé sur ma faim alors, afin d'illustrer combien il est facile d'utiliser AHAH, voici un exemple de code.

Avant toute chose il faut insérer dans la page HTML deux fonctions javascript que l'on pourra insérer dans un .JS par préférence.


<script type="text/javascript">
function
ahah(url,target) {
  
// native XMLHttpRequest object
  
document.getElementById(target).innerHTML = 'sending...';
   if (
window.XMLHttpRequest) {
      
req = new XMLHttpRequest();
      
req.onreadystatechange = function() {ahahDone(target);};
      
req.open("GET", url, true);
      
req.send(null);
  
// IE/Windows ActiveX version
  
} else if (window.ActiveXObject) {
      
req = new ActiveXObject("Microsoft.XMLHTTP");
       if (
req) {
          
req.onreadystatechange = function() {ahahDone(target);};
          
req.open("GET", url, true);
          
req.send();
       }
   }
}

function
ahahDone(target) {
  
// only if req is "loaded"
  
if (req.readyState == 4) {
      
// only if "OK"
      
if (req.status == 200 || req.status == 304) {
          
results = req.responseText;
          
document.getElementById(target).innerHTML = results;
       } else {
          
document.getElementById(target).innerHTML="ahah error:\n" +
              
req.statusText;
       }
   }
}

Ces fonctions sont simples à comprendre :

-  ahah () : appelle la page web passée en paramètre (demande serveur) sur un élément nommé (paramètre ID)
-  ahahDone () : remplace l'élément nommé par le texte de retour de la fonction ahah.

Et c'est tout !!

Cas concret :


<div id="toto">toto</div> <input type="button" value="AHAH !" onclick="ahah('ahah.php?action=1','toto');ahahDone('toto');" />

En cliquant sur le bouton "AHAH !", toto est remplacé par "ahah".


[1] Asychronous HTML and HTTP