Les cadres d'applications Ajax

La meilleure technique pour construire des pages web dynamiques est Ajax . Le code JavaScript imbriqué dans la page est utilisé pour envoyer des requêtes au serveur et pour modifier la page. Du coté serveur, des traitements sont nécessaires pour répondre aux requêtes: trouver les informations, ou enregistrer des données. Pour cela on a besoin d'un cadre d'application spécialisé. Il se compose toujours de fonctions JavaScript, et éventuellement d'une bibliothèque coté serveur. Il en existe dans de nombreux langages de programmation et sous différents environnement, mais seuls les principaux sont pris en compte ici.

Pourquoi un framework?

Le framework est en fait le moteur dont parle l'article de J. J. Garrett, qui supprime l'attente du lecteur envers le serveur.
Il fournit les fonctions classiques JavaScript pour utiliser l'objet XMLHttpRequest, pour tous les navigateurs, et toutes les fonctions d'interaction avec le serveur.
En fait, certains frameworks peuvent aller plus loin et permettre de créer ce que l'on appelle des "applications clients riches", des applications fonctionnant à distance, sur un navigateur, dotée d'une interface graphique et des mêmes fonctionnalités qu'une application locale.

Fonctionnalités d'un framework Ajax

Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des données ou de passer des commandes à exécuter sur le serveur, ce qui suppose l'emploi d'un script coté serveur.
Les frameworks proposent souvent des composants qui tirent parti de la communication asynchrone avec le serveur.
Les exemples classiques sont les bouton, panels à ongles, grilles, listes déroulantes et autres widgets.
Un exemple plus innovateurs, les "box" tendent à se répandre, avec comme exemples Lightbox et Slimbox. Ce sont des galeries d'images qui les placent côte à côte à l'écran et utilisent Ajax pour un affichage instantané.

Les frameworks peuvent être commandés du coté du serveur et dans ce cas, les composants sont créés sur le serveur avec un langage de scripts comme PHP et envoyés au navigateur. Ajax sert à transmettre les actions de l'utilisateur et prendre en charge les résultats.

La capacité de fonctionner hors-ligne, comme cela est permis par HTML 5 complète le framework aussi bien.

Quel framework Ajax choisir?

Si l'on veut utiliser un framework Ajax pour faire des pages dynamiques sans avoir a réécrire soi-même toutes les fonctions Ajax et les tester sur tous les navigateurs reste à choisir quel framework!
Ils sont si nombreux que l'on se demande lequel utiliser. Si l'on se trompe dans mon choix on sera obligé plus tard de refaire ses pages avec un framework différent!

On a moins de chance de regretter le choix d'un framework si l'on adopte un des plus utilisés car ils sont continuellement complétés de nouvelles extensions et disposent d'un support important par les utilisateurs.
Parmi ceux-ci, on peut distinguer jQuery, bien documenté, Mootools qui est modulaire, Ext JS qui offre de nombreux widgets de RIA.
L'interaction avec un langage coté serveur guidera aussi le choix.

Bibliothèques JavaScript

Un grand nombre de frameworks sont constitués en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur.
La plupart d'entre eux utilisent XML comme format de données, et quelquefois JSON, un autre format textuel.
Une librairie JavaScript s'utilise simplement à partir d'une page Web avec une balise de la forme:

 <script src="prototype.js" type="text/javascript></script>

Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur.

• jQuery.
  Librairie JavaScript qui contient Ajax. Alternative populaire à Script Aculo mais avec un code plus léger. JQuery est intégré aux CMS Wordpress et Drupal.
  jQuery offre la documentation la plus complète. La version 1.3.2 est deux fois plus rapide que les précédentes. Il permet un accès complet au DOM.
  Il est utilisé par défaut par le CMS Wordpress.
  jQuip est une version plus modulaire de JQuery avec seulement 4k pour le code de base.
• Closure Library.
  Le framework JavaScript de Google est accompagné d'un compilateur et d'un système de templates pour générer les pages. Présentation (anglais).
• Prototype.
  C'est la base de nombreuses autres librairies, dont celle de Yahoo. La librairie semble se donner pour but de réduire la taille du code Ajax.
• Script Aculous.
  Un des premiers frameworks, Script Aculous a très tôt développé de nombreux effets graphiques et dynamiques pour agrémenter les pages Web.
  Les bibliothèques concurrentes plus récentes sont mieux optimisées.
• Mootools.
  Alternative à JQuery, propose des effets graphiques.
  Mootools dispose de fonctionnalités similaires à celle de jQuery. Il est modulaire. De nombreuses extensions fournissent des widgets graphiques tels que Lightbox, galeries d'images...
• ExtJS.
  Plateforme JavaScript de développement d'applications Web conformes aux standards. Fournit un ensemble de composants graphiques.
  Dédié aux applications Web riches, les RIAs, Ext JS dispose de nombreux plugins et composants d'interface utilisateurs, les widgets.
  En outre il peut sans difficulté être combiné avec un autre framework (il faut que ce soit réciproque) ou des bibliothèques JavaScript.
  Il est modulaire.
  
• Rico.
  Basé aussi sur prototype, ajoute des effets spéciaux aux pages HTML.
• Dojo Toolkit.
  Propose des packages et un mécanisme qui les charges en bloc avec la page. Il peut créer des composants (graphiques ou non) réutilisables dont un ensemble est fourni sur le site. Il permet de manipuler le DOM plus facilement, de faire des animations.
• Qooxdoo.
  Permet de créer des interfaces utilisateur en JavaScript similaires à celle d'un logiciel local. Un ensemble de composants graphiques étant fournis avec les fonctions pour les gérer au clavier ou à la souris. Du code coté serveur en PHP ou Java est fourni par des tiers pour l'interaction par XMLHttpRequest.
• Yahoo UI.
  Librairie du moteur de recherche Yahoo. Elle inclut des ressources CSS. Plutôt imposante, c'est une combinaison de Script Aculous et de Ext JS ou comme jQuery UI un ensemble de widgets au-dessus d'un framework de bas niveau.
• Anaa.
  Une librairie simple pour un GET ou POST avec callback. Implémente responseHTML, dispose de l'extension A.E.P.
  Anaa est un framework minimal, il permet les opérations de lecture et écriture, et peut se combiner avec toute bibliothèque JavaScript. Il convient pour apprendre Ajax et pour l'ajout occasionnel de fonctionnalités asynchrones.

Frameworks PHP

Coté serveur, il serait possible au programmeur d'utiliser les fonctions et classes PHP pour répondre aux requêtes du navigateur. PHP 5 notamment dispose de la classe SimpleXML qui facilite le chargement d'un fichier XML et l'accès au contenu ainsi que les modifications. Cela nécessite des connaissances spéciales, et l'écriture de fonctions nouvelles, c'est pourquoi l'usage d'un framework peut faciliter la tâche.

• Tiny Ajax.
  Une petite classe en PHP 5.

Frameworks Java

Java est le langage le plus utilisé par les entreprises qui proposent des services web. L'utilisation d'un framework permet alors d'ajouter aux services les avantages que procure Ajax: modification instantanée de la page et utilisation de fichiers XML pour échanger de l'information
Les frameworks les plus communs, propres à java sont:

• DWR (Direct Web Remoting).
  Il permet au code dans une page HTML, grâce à son interface, d'utiliser des fonctions Java comme si le langage faisait partie du navigateur. Il propose en JavaScript une partie pour la mise à jour de la page et une autre pour obtenir les données par des servlets.
  Le principe consiste à générer en temps réel du code Java à partir de code JavaScript, l'envoyer au serveur et l'exécuter.
• Google Web Toolkit.
  Une boite à outils pour développer des applications en Java, lesquelles seront compilées en code JavaScript, qui opère sur la page HTML en utilisant le DOM.

Il est aussi possible d'utiliser JavaServer Faces qui propose maintenant des possibilités propres à Ajax.
Le framework ThinWire permet d'écrire une application Web comme s'il s'agissait d'une application locale, le framework gérant l'interaction avec le navigateur.

Frameworks .NET

• Microsoft Ajax Library (anciennement ATLAS), se compose d'une partie coté client: Microsoft Ajax Library, et d'une partie coté serveur: ASP.NET 2.0 Ajax Extensions, à quoi s'ajoute une librairie de composants, notamment graphiques: ASP.NET Ajax Control Toolkit.
• Ajax.NET Professional "sérialise" (enregistre en les convertissant) les données .NET au format textuel JSON.

Ajax et XUL

Ajax est fondé sur JavaScript, et XUL insère aussi du code JavaScript dans le code XML pour définir l'interaction d'une interface graphique. Les deux systèmes fonctionnent sur le navigateur Mozilla. Le premier fait interagir une page web avec des programmes sur le serveur et le second affiche une interface soit sur un poste local soit sur un poste distant avec le navigateur.
La principale différence est dans l'utilisation de Canvas (balise HTML) pour étendre Ajax, et pour étendre XUL, XPCom et XBL.

Au-delà d'Ajax

Certains développements en cours vont renforcer l'importance d'Ajax sur le Web en fournissant des standards pour les applications Web riches, principalement HTML 5, qui ajoute des fonctionnalités d'applications à HTML et qui permet de faire fonctionner les applications Web hors connexion.

• Voir les bibliothèques JavaScript pour réaliser des applications Web.

Plus d'informations

• Le tutoriel Ajax. Apprendre Ajax et XMLHttpRequest avec des exemples.
• JSON. Une description de ce format de données alternatif à XML.
• Ajax API library. Google centralise le chargement d'un framework aux choix parmi les plus populaire et s'engage à tenir indéfiniment à disposition en ligne.
  Cela semble devoir ralentir le chargement de faire appel à un site extérieur, mais si le code JavaScript est mis en cache, comme c'est normalement le cas, cela pourrait au contraire l'accélérer.
• Frameworks HTML 5. APIs JavaScript utilisant Canvas.

Event.observe(window,'load',function()
{
    Event.observe($('container'), 'DOMNodeInserted', init);
}.bindAsEventListener());
 
var init = function()
{
    Event.observe($('buttAlert'), 'click', function()
    {
        alert('alert !!');
    }.bindAsEventListener());
}