Depuis quelques mois, un mot est dans la bouche de tous les développeurs web : Ajax.
Popularisé par les outils Google Mail et Maps, et d'autres frameworks, on rencontre
de plus en plus de sites offrant des fonctionnalités dynamiques, sans pour cela que
l'on change de page. La version 2 d'ASP.NET intègre en standard ces fonctionnalités,
qui sont par exemple utilisées pour peupler dynamiquement un TreeView, sans changer
de page à chaque ouverture d'un noeud. Le terme Ajax est un terme générique pour
ces techniques dynamiques.
J'avais ouvert une catégorie Ruby, en espérant prendre le temps de vous parler de ce
langage et de tous les outils qu'on trouve autour, je ne l'ai jamais fais. Pas très
grave, il faut juste savoir qu'un outil commence à faire du buzz, et que les grandes
gens en parlent. Il n'en faut pas plus en général pour que les gens commencent à s'y
intéresser. Cet outil c'est Ruby on Rails, un framework léger de développement web,
entièrement écrit en Ruby, qui offre une rapidité et une puissance de développement
assez impressionante, tout en gardant le côté script qui plait tant aux développeurs
php. Un bon compromis pour des applications ne nécessitant pas de dégainer les outils
lourds comme les Tapestry, Struts, JSF de chez Java, ou encore de l'ASP.NET. En tout
cas, c'est un framework qui mérite qu'on y jete un coup d'oeil !
Il y a quelques temps, Ruby on Rails s'est dotée d'une librairie JavaScript à la pointe,
pour pouvoir bénéficier de fonctionnalités Ajax : Prototype. Cette librairie écrite dans
un excellent JavaScript, est disponible gratuitement dans une license proche de la MIT,
ce qui signifie que vous pouvez tout à fait l'intégrer dans tous vos développements,
aussi bien libres que commerciaux, tant que vous laissez le copyright. Nous allons tout
de suite en voir un petit exemple.
Imaginons un tout début de lecteur RSS en mode web. C'est un besoin où une utilisation
de la méthodologie Ajax est tout à fait appliquable : pas besoin de réferencer le contenu
de l'aggrégateur, besoin d'une interface sympa et réactive, bref, allons-y.
Tout d'abord la partie serveur, simpliste, qui renvoie sous forme de document XML un item
d'un flux RSS. On passe un indice, et hop, l'élement est extrait avant d'être renvoyé au
client. Cette partie a été réalisée en Ruby, parce que je le vaux bien. La source se passe
de commentaire et est disponible ici : la source du serveur Ruby.
Ce qui nous intéresse c'est bien sur le client, voyons un peu ce qu'il s'y passe, quand on
demande au serveur un item en particulier :
var url = "http://evain.net/ajax/item.rbx";
function setArticle(id) {
var opts = { method : "get",
parameters : "id=" + id,
onComplete : receivedHandler,
asynchronous : true };
var req = new Ajax.Request(url, opts);
}
Le code est simpliste, on ne fait qu'utiliser un objet Ajax.Request, fourni par la libraire
Prototype. La partie intéressante se situe dans la
déclaration des options, où l'on spécifie une fonction qui sera déclenchée quand le flux aura
été téléchargé entièrement : receivedHandler. Regardons son implémentation :
function nodeValue(node, name) {
var childs = node.getElementsByTagName(name);
if (childs.length > 0 && childs.item(0).childNodes.length > 0)
return childs.item(0).childNodes.item(0).nodeValue;
return "";
}
function receivedHandler(remote) {
var doc = remote.responseXML.documentElement;
if (doc) {
$("auteur").innerHTML = nodeValue(doc, "author");
$("article").innerHTML = "<a href=\"" + nodeValue(doc, "link") +
"\">" + nodeValue(doc, "title") + "</" + "a>";
$("date").innerHTML = nodeValue(doc, "pubDate");
$("desc").innerHTML = nodeValue(doc, "description");
}
}
Ici, tout simplement, on récupère le flux de retour sous forme d'un document XML manipulable selon
le standard DOM, terrain connu donc. Tricky, la librairie Prototype nous
fourni une fonction $ pour récupérer directement un élement en fonction de son id, ensuite on va chercher
le corps d'un noeud, pour l'attribuer comme corps des éléments correspondants. Easy :)
Bon, si on voyait un résultat "fini" qui marche ? C'est par ici : la démonstration finale.
Normalement ça devrait marcher sous IE6, FireFox et Safari, donc bonne démo. Il reste que bien que trivial, l'exemple de la démo je pense, représente un marché d'avenir, gageons qu'un ponte comme Google, muni de moyens éprouvés pour la recherche, améliore bientôt son GMail, ou nous fasse un GFeed, où nous pourrions se balader simplement dans nos feeds préférés, rechercher dedans, et le tout, avec une interface de "killer app".
Voila, nous avons vu rapidement comment mettre en place d'une manière simpliste une méthodologie Ajax dans
une page internet, libre à vous de l'implémenter maintenant dans vos applications.