Le présent document est le point d’entrée d’une étude sur les technologies WEB 2.0.
Ce document ce propose de présenter le niveau de maturité, de pérennité et d’avenir de ces technologies communément appelée AJAX.

Généralités

Le terme AJAX (Asynchronous Javascript And Xml) désigne l’utilisation de certaines technologies web.

AJAX n’est pas une technologie unique mais l’utilisation de plusieurs technologies tel que :

HTML (XHTML) et CSS pour la présentation des informations.
DOM et JavaScript pour afficher et interagir dynamiquement avec l’information présentée.
XML, XSLT et l’objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web.

Les applications AJAX peuvent aussi utiliser d’autres technologies, comme le HTML pré formaté, les fichiers texte plats, JSON (Javascript Object Notation) « qui permet de transposer les types de données complexes entre les langages serveur et le javascript généralement utilisé pour les approches coté serveur » et JSON-RPC qui permet à partir de javascript d’appeler des méthodes distantes écrites en langage côté serveur.

IL ne s’agit pas véritablement d’une innovation, les techniques utilisées étant existantes et stable depuis quelques années mais plutôt d’un regroupement de méthodes et d’usages permettant d’améliorer significativement le confort et l’interactivité d’un site web.

AJAX est un subtil alliage de Javascript avec du XML.
Il exploite un objet Javascript XMLHttpRequest qui va permettre d’obtenir des données depuis le serveur au format XML sans avoir à recharger la page dans son intégralité.
L’objectif d’AJAX est de modifier des pages web dynamiquement en injectant, au moyen de javascript, du contenu récupéré du serveur, afin d’augmenter l’interactivité, la réactivé et la richesse des applications web.

Le but avoué d’AJAX serait d’obtenir les fonctionnalités qu’un client riche en évitant un chargement initial pénalisant, de simuler un comportement similaire de gestion d’un environnement de type bureautique remplaçant les applications traditionnelles tout cela d’une manière asynchrone et transparente.

Pour cela AJAX permet l’exploitation :
De rafraîchissement des données.
De la gestion des animations.
Du glisser – déplacer.
De la validation des données saisies en temps réel
Des actions de type Blur – Key press – hover …

En contre partie le développement en AJAX pur peut être extrêmement coûteux. Pour y remédier, de nombreuses bibliothèques de fonctions prêtes à l’emploi ont fleuries sur Internet.
Des frameworks payants et open source ont également vu le jour, on citera à titre d’exemple Rico, Rialto, Atlas, Dojo, Zimbra, Backbase.

Ces frameworks exposent un grand nombre de fonctions facilement réutilisables et déclinables.
Les temps de développement sont ainsi réduits et la qualité est assurée par la communauté qui entoure le produit.
C’est d’ailleurs l’apparition de ces frameworks qui ont contribué au renouveau de l’AJAX et à la démocratisation de ces usages.

AJAX et le Web traditionnel

Arhcitecture des applications web traditionnelles

Les applications Web traditionnelles, permettant aux utilisateurs d’effectuer des actions telles que suivre un lien, remplir et valider un formulaire…. ; envoient une requête au serveur http qui répond en fonction de l’action et des données reçues en retournant une nouvelle page.
Ce mécanisme qui aboutit toujours au rechargement de la page entière, même si seulement une partie de la page est concernée, consomme inutilement une partie de la bande passante.
Une requête au serveur http doit être réalisée à chaque interaction avec l’application dont le temps de réponse dépend fortement du temps de réponse du serveur http. Cela conduit à des interfaces utilisateurs plus lentes que leurs équivalents natifs.
Les interfaces sont extrêmement pauvres sous contrainte de temps de chargement initial puisque le chargement se fait de manière synchrone avec la présentation (interprétation par le navigateur).

Architecture d'une application Web traditionnelle

Arhcitecture des applications web AJAX

Les applications Web utilisant les techniques AJAX envoient des requêtes au serveur http pour récupérer uniquement les données nécessaires au format XML en utilisant l’objet XMLHttpRequest, l’interprétation des réponses se fait grâce à la puissance des feuilles de style CSS et du langage Javascript exécuté côté client.
Les applications sont plus réactives, la quantité de données échangées entre le navigateur et le serveur étant fortement réduite.
Le temps de traitement de la requête côté serveur est également légèrement réduit, une partie du traitement étant réalisé sur l’ordinateur d’où provient la requête.
L’accès et le volume de données entre client et serveur est lui aussi fortement réduits puisqu’un grand nombre de fonctionnalités sont proposées par le Framework.
Les interfaces sont plus riches, plus fluides, grâce aux librairies qui offrent de nombreuses possibilités comme le drag & drop, l’animation… le contenu des applications n’est plus figé.
Le chargement de la première page ne devrait pas être pénalisant car tout se passe d’une manière asynchrone.

Architecture d'une application Web traditionnelle

 

En comparaison avec les applications Web traditionnelles, Ajax élimine la notion de « Start-Stop-Start-Stop » concernant le flux de l’interaction avec le serveur par l’intermédiaire des frameworks Ajax entre l’utilisateur et le serveur.
Ajax permet une interaction asynchrone avec les applications Web.

Prenons par exemple une procédure de paiement en ligne, le plus souvent cette procédure est décomposée en plusieurs pages Web :
Une page pour saisir les coordonnées (bancaires, postales,…).
Une page pour valider la commande avant le paiement.
Une page pour valider la procédure finale.

La validation d’une étape se traduit par un chargement complet des éléments de la prochaine étape.
Techniquement le navigateur envoi de multiples requêtes (1 requête par élément !) vers le serveur qui se charge d’envoyer le contenu total de la page.

Pour traiter ce même exemple avec Ajax nous pouvons nous dire « pourquoi faire 3 pages, nécessitant 3 chargements alors qu’une seule partie de la page a besoin d’être modifiée » dans ce cas nous n’avons besoin de recharger que les champs du formulaire pas le logo, les images,…
Ainsi en utilisant DOM, CSS, JavaScript, on peut parfaitement imaginer que le bouton « suivant » aurait pour action non pas de charger le contenu de la page suivante mais de masquer grâce au CSS la partie de formulaire venant d’être remplie et d’afficher la suite du formulaire au même emplacement que le précédent.

Nous voyons plusieurs intérêts dans ce type de fonctionnement, une partie du traitement et de la validation est faite sur le client, les échanges serveur/client sont limités au stricte nécessaire et l’affichage est quasi instantané.

Voici à titre d’exemples des sites mettant en œuvre les principes annoncés

GMAIL : http://gmail.google.com : Son interface utilise massivement Ajax d’où une application très réactive avec un lancement un peu lent. Cette réactivité combinée avec une interface bien pensée fait que de plus en plus d’utilisateur aujourd’hui préfère GMAIL à leur fournisseur habituel.
Google Suggest : http://www.google.com le mécanisme d’auto complétion.
Le portail Netvibes : http://www.netvibes.com
Rialto: http://rialto.application-servers.com
GoogleMaps : http://map.google.com

Techniques d'intégration

Deux approches distinctes sont disponibles pour l’utilisation d’AJAX dans le développement des applications Web, l’une pure javascript qui garantit l’interopérabilité avec tous les serveurs, l’autre basée sur une architecture serveur générant le javascript de communication à la volée.

L’approche javascript

Cette approche consiste à charger des fichiers javascript dans une page HTML et en se reposant sur les fonctions mises à disposition par les librairies préalablement chargées, on développe d’autres fonctions Javascript spécifiques au comportement que l’on souhaite réaliser.
Plusieurs solutions sont offertes pour implémenter cette approche dont les majeures sont :

Dojo
Repose sur le très riche projet DojoToolkit (opensource disponible sur http://dojotoolkit.org), représente une API de développement regroupant un grand nombre de fichiers javascript.

Rico
Développée par Sabre Airline Solution (Entreprise Américaine qui propose des solutions logicielles et matérielle pour les compagnies aériennes), OpenRico est une librairie open source qui offre la possibilité de créer des applications riches en utilisant les techniques sous-jacentes à Ajax.

Ajax Toolkit Zimbra

Ce Framework extrêmement complet, il a été récemment utilisé dans la version du portail et CMS « Jahia » (notamment utilisé pour fluidifier l’interface de contribution).

L’approche côté serveur

Cette approche consiste à manipuler une librairie coté serveur.
En théorie AJAX fonctionne indépendamment du serveur, ce qui implique une indépendance totale du type de langage côté serveur.
Pour expliquer cette approche nous vous présentons les librairies existantes en fonction des langages :

1. PHP
CPAINT est l’une des bibliothèques orientée objet les plus avancées dans le monde PHP, respectant le modèle AJAX pur et idéal pour manipuler des formulaires métiers. (http://cpaint.booleansystems.com )

XAJAX bibliothèque de comportements prêts à l’emploi. (http://www.xajaxproject.org)

XOAD également nommé NAJAX, repose sur l’utilisation de JSON et a reçu le prix de l’innovation en août 2005 par phpclasses.org. (http://wiki.xoad.org )

HTML_AJAX du projet PEAR. (http://pear.php.net )

2. JAVA
DWR est un Framework fonctionnant sur le même principe que SAJAX et il peut être combiné avec d’autres Framework. (http://getaheadf.ltd.uk/dwr )

Ajax Tags est une librairie fournissant un nouveau tag JSP qui simplifie l’utilisation du mode asynchrone. (http://ajaxtags.sourceforge.net )

3. .NET
Atlas est un Framework Microsoft.
Cette librairie est directement intégrée dans l’environnement de développement Visual Studio 2005 et permet au développeur .Net d’intégrer directement dans leurs applications des composants Ajax.
Lancé par le projet expérimental start.com, Atlas est en route pour s’imposer comme le Framework de référence en environnement Microsoft.

4. Framework Multi-langage

Backbase est un Framework Ajax payant, très peu cher. Il existe en (community edition). Ce Framework est assez complet avec un moteur supportant les flux RSS (AJAX RSS Reader). Backbase implémente la technologie AJAX et peut travailler avec toutes langages de programmation orienté web (PHP, ASP.Net, …).

SAJAX supporte ASP / ColdFusion / Perl / PHP / Ruby … (http://modernmethod.com/sajax )

Conclusion

Un site peut être qualifié de niveau WEB 2.0 s'il fait la part belle à un certain nombre des techniques suivantes :

L'utilisation de CSS, d'un balisage XHTML sémantiquement valides.
Les techniques d'applications riches avec AJAX.
La syndication de contenu par RSS.
L'agrégation de contenu RSS.
L'utilisation restreinte des URL.
Une architecture services web XML.

Une constatation lors de cette première étude est que l’approche Web 2.0 a un impact considérable sur la richesse des applications, particulièrement l’interactivité, la réactivité ainsi que la fluidité des interfaces.
Avec la technique application riche AJAX, il est envisageable de remplacer des applications de bureautiques traditionnelles.
AJAX s’impose de plus en plus dans le développement Web, preuve en est de toutes les grosses entreprises s’engageant dans AJAX à l’exemple de Google, Yahoo, SUN, Unilog, Microsoft ainsi qu’IBM (créateur du projet open source « Open AJAX » qui est une plateforme de développement de frameworks AJAX).

L’adoption d’AJAX dans une architecture client serveur permet :
D’améliorer l’interactivité,
D’améliorer la richesse fonctionnelle (notion de service),
D’augmenter la réactivité,
De diminuer le temps de développement par la réutilisation des bibliothèques Javascript existantes,
De moduler la charge des traitements entre le client et le serveur en mariant les deux approches (bibliothèques Javascript coté client et langage côté serveur) afin d’améliorer la performance,
De développer des applications riches facilement portable grâce au client léger.

 

Exemple (Moteur de recherche AJAX)

 

Select Search Category: Web Images Videos Search the Web: Search Results Search Results Search Results