Concepts

Ajax, Web 2.0, wtf ?

Voilà maintenant un peu plus d'un an que le terme Ajax, tête de gondole du si hype Web 2.0, a été "inventé" par les gens de chez Adaptivepath.

Ajax, qui signifie Asynchronous Javascript And XML, se veut une "nouvelle" façon de désigner les applications web afin de les rendre plus dynamiques, plus riches et plus simples à utiliser (enfin ça c'est la théorie). ''Et ton appli, elle est web 2.0 ? Y'a de l'Ajax ? " L'idée est de créer des applications web se comportant de manière de plus en plus proche des applications lourdes que l'on peut trouver sur le poste de travail. On retrouve Ajax dans de nombreuses applications Web comme Gmail, Zimbra, le nouveau Yahoo Mail ...

Dans la pratique, cela passe principalement par la suppression du schéma Chargement du formulaire -> remplissage du formulaire -> soumission du formulaire -> rechargement de la page de résultat.

L'application web-2.0-ajax-powered-wizzbang-inside privilégie plutôt des mises à jour de la page principale sans rechargement à proprement parlé.

Prenons l'exemple d'une application de todo list, lors de l'ajout d'une entrée dans la liste, nul besoin de recharger la page après que l'utilisateur ait cliqué sur le bouton de soumission du formulaire, la liste se met à jour automagiquement (avec un effet graphique de bon alois). Il en va de même pour les suppressions ou l'édition des entrées de la liste, qui se fait en ligne.

C'est beau le progrès non ? Mais comment cela peut-il être possible, comment peut-on "soudainement" faire des applications web vraiment sympas à utiliser alors que l'on se traîne par exemple d'horribles webmails depuis des années ? Le secret d'Ajax repose principalement sur un composant au nom barbare: XmlHttpRequest.

XmlHttpRequest ?

XmlHttpRequest est l'objet Javascript manipulé par les applications Ajax qui permet d'effectuer des requêtes HTTP auprès du serveur web afin de mettre à jour des données ou d'effectuer des actions (comme écrire des données dans une base de données) sans avoir à recharger l'intégralité de la page.

Mais ça ressemble à quoi concrètement ?

var requete = new XMLHttpRequest();
requete.open("GET", "date.php", false);
requete.send(null);
var reponse = requete.responseText;
alert(reponse); // affiche la date

Simple non ? Il suffit d'instancier l'objet XMLHttpRequest (new) puis de spécifier l'url que l'on souhaite interroger (méthode open) et d'envoyer le tout (méthode send). Un fois la requête envoyée, il est possible de lire la réponse en utilisant le paramètre responseText de notre objet. Il est également possible de récupérer la réponse sous forme d'un arbre dom XML en utilisant le membre responseXML à la place de responseText.

Des subtilités entre navigateurs

Tout ceux ayant déjà tenté de developper une application web se sont déjà confrontés aux différences de comportements/rendus/affichages entre navigateurs, XmlHttpRequest ne déroge malheureusement pas à cette régle. Il existe en effet quelques différences dans la façon d'instancier l'objet XmlHttpRequest en fonction du navigateur utilisé. Un moyen facile de se débarrasser de ces différences est d'écrire une fois pour toute une fonction encapsulant la création de l'objet XmlHttpRequest.

function newXMLHttpRequest() {
 try { return new XMLHttpRequest(); } catch(e) {}
 try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
 try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
 alert("XMLHttpRequest n'est pas supporté par ce navigateur");
 return null;
}

Il nous sera ensuite très simple de récupérer un objet, tout beau tout propre:

var xhr = createXMLHttpRequest();

La suite !

Les ingrédients d'une application Web 2.0

Voilà, nous avons fait un très rapide tour d'horizon des concepts sur lesquels se reposent les applications Ajax et nous avons vu techniquement comment était mis en oeuvre tout ça.

Pour obtenir une application Web2.0, il nous faudra rajouter à l'Ajax les ingrédients suivants :

• CSS à tous les étages
• Du javascript
• Une pointe d'effets visuels.

Dans la prochaine partie de cet article, nous entrerons dans le vif du sujet en posant les premières pierres de notre TODO LIST Ajax Powered (tm)