Glossaire, xmlhttprequest et notes de bas de page

Evolution du glossaire du site avec l'expérimentation d'une technique faisant appel à l'objet xmlhttprequest chère aux tenants d'Ajax. Quoi ? Serais-je passé du côté obscur de la force ?! Pas tout à fait...

Comment fonctionnait la version originale du glossaire :

  • L'utilisateur cliquait sur un lien-définition.
  • Une fonction javascript ouvrait une nouvelle fenêtre avec la page glossaire construite en PHP.
  • Une seconde fonction javascript manipulait l'architecture de la page via le DOM pour n'afficher que la définition demandée.

Si le javascript était désactivé, le lien-définition emmenait l'internaute à la définition sur la page du glossaire comme n'importe quel lien web.

Comment fonctionne maintenant le nouveau glossaire :

  • L'utilisateur clique sur le lien-définition.
  • Une fonction javascript adresse une requête XMLHttpRequest à la page du glossaire mais le script PHP ne va plus construire la page dans son intégralité, simplement récupérer la définition demandée.
  • La fonction javascript reçoit cette définition et l'insère dans la page courante via le DOM.
var defId = 'définition demandée';
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
    if (xmlhttp.status == 200) {
      // récupération des données
      var def = xmlhttp.responseText;
      // Créer un élément popup
      var Popup = document.createElement('p');
      // insérer le contenu de def dans le popup
      Popup.appendChild(document.createTextNode(def));
      // insérer le popup dans la page web
      document.body.appendChild(Popup);
    }
  }
}
xmlhttp.open("GET", "/glossaire.php?def="+defId,true); 
xmlhttp.send(null);
1. Version simplifiée de la requête XMLHttpRequest à la page glossaire pour récupérer une définition.

Si l'objet XMLHttpRequest n'est pas compris par le navigateur, c'est l'ancien script qui prend le relais. Si le javascript est désactivé, le lien se comporte comme un lien normal.

Le changement est important : dans le premier cas, le javascript ne faisait en fait « qu'habiller » un appel de lien tout ce qui a de plus classique : au lieu d'afficher la page cible (le glossaire) dans la fenêtre courante, il ouvrait une autre fenêtre plus petite et manipulait l'affichage de la page. Avec l'objet xmlhttprequest, le script ajoute un nouveau contenu à la page courante.

Alors, on peut effectivement dire que je fait de l'Ajax, simplement parce que j'utilise l'objet xmlhttprequest. Il y a cependant une différence notable par rapport à certaines utilisations abusives. Le script - comme tous les autres du site - obéit à une règle simple : il facilite l'affichage et/ou la navigation mais son absence (javascript désactivé) n'interdit en rien l'accès au contenu.

Ma position vis-à-vis d'Ajax n'a donc pas changé : ce ne sont pas les technologies derrière cette expression (javascript, xmlhttprequest et DOM) qui sont critiquables, bien au contraire puisqu'elles existent et sont utilisées - à bon escient - depuis des années ; c'est le buzz marketing autour d'un concept fourre-tout, amplifié par la « Web 2.0 » mania, et son utilisation pour tout et n'importe quoi qui sont discutables.

Le script est encore en phase beta. Je dois notamment trouver le moyen d'insérer une définition quand celle-ci possède des balises HTML comme des liens (non, je n'utiliserais pas innerhtml). Pour l'instant, le script n'affiche que du texte brut. Par ailleurs, la définition peut rester figer sur place si l'on passe la souris trop rapidement au dessus du lien.

Enfin, j'ai profité de l'écriture de ce script pour modifier celui qui gère l'affichage des notes de bas de page. En fait, j'ai repris l'idée que j'esquissais à la fin de l'article ancienne version : le popup note n'est plus une copie de la note originale mais la note elle-même à laquelle j'applique les styles popup. Le script gère maintenant aussi la dualité over / click : passer la souris au dessus de l'appel de note affiche le popup note ; cliquer sur le dit appel affiche définitivement le popup.

Ressources et références :

GOSSET, P.-Y.. Ajax : le retour des lessiviers. Framasoft, . Un article du collègue PYG pour comprendre ce qu'est Ajax.

HARDY, D.. Applis Web/Request. Xulfr,

SVAY, M.. L'objet XMLHttpRequest. OpenWeb, . Comment utiliser l'objet xmlhttprequest.