Conception et transformation d'une application web en application mobile

IV.2.2. AJAX

IV.2.2.1 Préambule

On parle beaucoup d'AJAX en ce moment dans le buzz Word Web 2.0. En effet la technologie Web entière est basée sur le modèle de l'aller-retour : pour une requête serveur, vous avez un retour qui se traduit par un rafraîchissement des données (la page Web affichée).

Ce modèle de fonctionnement est fiable car existant depuis très longtemps mais il pose aussi des problèmes d'interaction homme machine et de performances.

D'un point de vue utilisateur, le rafraîchissement de toute la page au moindre clic est synonyme de temps d'attente et de scintillement qui n'est pas toujours du meilleur effet dans une application professionnelle.

74

Du point de vue des performances, à la moindre modification, vous rechargez une page entière avec toutes ses balises HTML, ce qui génère un trafic important.

La technologie AJAX n'est pas nouvelle en soi. A signifie Asynchronous (Asynchrone), JA pour JavaScript et X pour XML. La nouveauté d'AJAX est bel et bien de tirer parti des trois outils pour faire des applications dynamiques.

Les puristes ne vont sûrement pas aimer ce que je vais dire, mais on peut tout à fait faire de l'AJAX au sens large sans forcément faire de l'asynchrone ni du XML. Nous allons détailler les différentes possibilités fournies par AJAX dans ce document puis nous verrons comment interfacer tout cela avec PHP et une base MySQL.

IV2.2. Fonctionnement³⁷

AJAX est basé sur l'objet XMLHttpRequest qui permet de faire une requête via JavaScript à un serveur HTTP. Le but est donc, comme dans le "Web 1.0", de faire une requête au serveur et d'en attendre le retour. Cependant, dans notre cas, le navigateur du client n'est pas nécessairement rafraîchi et tout est transparent pour l'utilisateur.

2.2.1 Mise à jour d'une partie de la page³⁸

Dans une application Web classique, lorsque l'utilisateur clique sur un lien ou valide un formulaire, le navigateur envoie une requête au serveur HTTP, qui lui retourne en réponse une nouvelle page, qui remplace purement et simplement la page courante, comme l'illustre la figure

³⁷ http://gael-donat.developpez.com/web/intro-ajax/

³⁸ http://www.eyrolles.com/Chapitres/9782212119657/Chap1_Plasse

75

³⁹ Michel Plasse, Développez en Ajax Avec quinze exemples de composants réutilisables et une étude de cas détaillée,Groupe eirolle en 2006.

2.2.2 Techniques mises en oeuvre³⁹

La communication avec le serveur repose sur l'objet JavaScript XMLHttpRequest, qui permet d'émettre une requête, de l'annuler (c'est parfois utile) et de spécifier le traitement à effectuer à la réception de sa réponse. Le chapitre 4 examine en détail les problématiques relatives à cet objet. Disponible depuis 1998 dans Microsoft Internet Explorer, il l'est désormais dans tous les navigateurs récents. Le traitement à effectuer lors de la réception de la réponse implique généralement de mettre à jour le contenu, la structure ou l'apparence d'une ou de plusieurs parties de la page. C'est précisément en quoi consiste le HTML dynamique. Apparu dés 1996, le HTML dynamique a longtemps souffert d'incompatibilités des navigateurs, aujourd'hui limitées, et de l'aspect gadget de ce qui lui était souvent demandé (animations sans utilité fonctionnelle, rollovers, etc.). Le HTML dynamique repose sur DOM (Document Object Model), ou modèle objet du document, et les CSS (Cascading Style Sheets), ou feuilles de style en cascade, deux normes du Web Consortium aujourd'hui assez bien supportées par les navigateurs. Le HTML dynamique est présenté en détail au chapitre 2. Avec Ajax, beaucoup de code peut être déporté du serveur vers le client. Le code JavaScript devient donc plus complexe, ce qui rend nécessaire de bien le structurer. C'est pourquoi les applications Ajax induisent une programmation objet en JavaScript, ainsi que l'utilisation d'aspects avancés de

76

ce langage, lesquels sont couverts au chapitre 3. Les réponses Ajax en HTTP peuvent être au format HTML, comme en Web classique, mais avec cette différence qu'il s'agit de fragments HTML, et non de pages entière, seule la portion de page à remplacer étant renvoyée. Dans certains cas, cela se révèle tout à fait adapté, mais il peut être préférable dans d'autres cas de renvoyer la réponse sous forme structurée, de façon à pouvoir l'exploiter de plusieurs manières côté client. C'est là qu'intervient XML, qui préfixe l'objet XMLHttpRequest, ainsi que les techniques qui l'accompagnent, notamment XSLT. C'est aussi là qu'intervient JSON, un format d'échange adapté aux données, qui l'est parfois plus encore que XML. Le chapitre 5 se penche en détail sur ces deux formats. Ajax repose ainsi sur tous ces piliers : DOM et CSS, JavaScript, XMLHttpRequest, XML et XSLT, ainsi que JSON.