2006_-_eyrolles_-_developpez_en_ajax

Dv

elop

pez

en A

jax

DveloppezenAjax

9782212

119657

Cod

e d

iteur

:G

11965

ISB

N:

2-2

12

-11

96

5-8

M. PlasseMichel Plasse estformateur et consultant. Il a une exprience de plusde dix ans des projetsinformatiques chez des grands comptes et diteurs de logiciels.Depuis 1999, il organiseet anime pour un public de dveloppeurs et de chefs de projets des formationsapprofondies (cinq mois)sur Java et lobjet, les technologies Web et J2EE, XML et Ajax. Il peut tre joint sur son sitehttp://mplasse.free.fr.

M.

Pla

sse

Conc

eptio

n:

Nor

d Co

mpo

36

M i c h e l P l a s s e

DveloppezenAjax

Avec quinze exemples de composants rutilisables et une tude de cas dtaille

Sur le site www.editions-eyrolles.comTlchargez le code source des exemples du livre.@

Des applications Web plus ractives et plus richesPopularis par des sites innovants tels que les webmails de Google et Yahoo, Google Maps, Flickr, Writelyou NetVibes, Ajax est un ensemble de technologies permettant de construire des applications Web denouvelle gnration, plus ractives et aux interfaces utilisateur plus riches, comparables en fonctionnalitaux applications natives Windows ou Mac OS.

Matriser les technologies sous-jacentes et les frameworks AjaxAprs avoir prsent des exemples typiques dutilisation dAjax, cet ouvrage tudie en profondeur les techniquessous-jacentes (CSS et DOM, JavaScript objet, XMLHttpRequest, JSON, XML et XSLT) en les illustrantdexemples dapplications varies et de complexit croissante.

Il prsente galement plusieurs des frameworks qui facilitent le dveloppement dapplications Ajax, notammentprototype, dojo et script.aculo.us.

Acqurir par lexemple les meilleures pratiques de dveloppement AjaxLouvrage donne des rponses prcises aux questions dlicates souleves par Ajax, notamment la gestion desappels asynchrones (paralllisme et mise en cache), le choix des formats dchange et les actions Pageprcdente ou Ajouter aux favoris.

Lauteur souligne limportance du dveloppement par composants en lillustrant de quinze exemples facilementrutilisables. Il insiste tout particulirement sur les bonnes pratiques de conception et montre travers unetude de cas dtaille, un site de vente en ligne ajaxifi , comment intgrer Ajax dans larchitecture MVC.

Au sommaireQuest-ce quAjax ? Exemples typiques dutilisation Un premier exemple simple Le HTML dyna-mique avec DOM et CSS Les composants JavaScript : outils daide au dveloppement, fonction-nalits objet de JavaScript, exemples de cration de composants rutilisables Communicationasynchrone avec le serveur : lobjet XMLHttpRequest, scurit, gestion du cache, appels parallles,problmes dencodage, exemples dapplication (suggestion de saisie, mise jour dun fragment depage) changes de donnes XML et JSON vs HTML, exemples dapplication (lecteur de flux RSSavec DOM puis avec XSLT) Les frameworks Ajax et Web 2.0 (prototype, script.aculo.us, Rico,dojo), exemples dutilisation (glisser-dposer, widgets, dition de texte WYSIWYG) Questionsfonctionnelles souleves par Ajax Intgration dAjax dans les architecture Web tude de casdtaille.

G11965_Ajax_XP 28/08/06 10:13 Page 1

Remerciements

Mes remerciements vont aux personnes suivantes :Tout dabord Olivier Salvatori, qui sest charg de la relecture de cet ouvrage et delimportant travail dindexation. Sa relecture constructive et prcise, sa ractivit et laqualit de son coute ont t motivantes et instructives.Eric Pruvost, qui ma suggr dcrire un livre sur Ajax. Nos discussions frquentes etnotre troite collaboration depuis des annes ont aliment ma rflexion, notammentconcernant les architectures Web et les bonnes pratiques de dveloppement.Paul Athanassiadis, qui a suivi de prs les investigations sur les diffrentes questionssouleves par Ajax, tant techniques que conceptuelles ou fonctionnelles, et a examin lesexemples et le code dune grande partie de louvrage.Benot Gandon, qui a galement examin les exemples et le code dune partie delouvrage.Enfin, Emmanuelle Gautier et Jol Rigoult, qui mont mis en relation avec les ditionsEyrolles.

Avant-propos

Popularis par des sites innovants tels que Google Suggest, Google Maps, les webmailsde Google et Yahoo, writely, iRows ou netvibes, Ajax (Asynchronous JavaScript AndXML) est un ensemble de technologies permettant de construire des applications Web denouvelle gnration, comparables en fonctionnalits aux applications natives Windowsou Mac OS.Ajax associe le HTML dynamique, qui permet de modifier le contenu ou lapparence dela page localement (sans redemander une nouvelle page au serveur), avec des appelsasynchrones au serveur, qui rcuprent juste les fragments mettre jour. Ces technolo-gies existant depuis plusieurs annes, Ajax est disponible aujourdhui dans les naviga-teurs installs, tels Internet Explorer 6, Firefox 1.x, Safari 1.3, Opera 8.5, etc.Ajax rend les applications Web plus ractives et leurs interfaces utilisateur plus riches.La ractivit tient trois facteurs : Fluidit : les changes avec le serveur sont la fois plus frquents et dun volume plus

rduit, ce qui lisse la mise jour dans le temps. De plus, ces mises jour tantasynchrones, elles peuvent se drouler en parallle et ne bloquent pas lutilisateur.

Rapidit : les changes tant dun volume plus rduit, le transfert est plus rapide, demme que le traitement local pour mettre jour laffichage.

Sensibilit : les application peuvent ragir plus dvnements, notamment ceux lis la saisie clavier.

La richesse dinterface tient aussi trois facteurs : Richesse des composants graphiques : en plus des formulaires et des liens, qui sont, en

HTML, les principaux lments ractifs, il est possible de disposer donglets, de botesflottantes, darborescences, de menus, dinfo-bulles, de calendriers, etc.

Support du glisser-dposer et, dans une certaine mesure, de mcanismes de dfaire/refaire. Support de ldition WYSIWYG.Les applications Ajax combinent ainsi la puissance et la qualit de linterface utilisateurdu client lourd avec labsence de dploiement du client lger, constituant par l ce quonappelle aujourdhui le client riche.

Dveloppez en AjaxIV

Objectifs de louvrageCet ouvrage vise guider le lecteur dans la ralisation dapplications Ajax. Il couvre troisgrands axes : les technologies constitutives dAjax, les questions fonctionnelles et techni-ques souleves, avec les rponses quil est possible dy apporter, et enfin les mthodes etoutils qui facilitent et rendent plus sr le dveloppement.Les technologies comportent : Le HTML dynamique, cest--dire DOM (Document Object Model), ou modle objet

du document, et les CSS (Cascading Style Sheets), ou feuilles de style en cascade,combins avec JavaScript.

XMLHttpRequest, lobjet JavaScript permettant deffectuer des requtes HTTP asyn-chrones vers le serveur.

JSON (JavaScript Object Notation), ou notation objet en JavaScript, ainsi que XML etles technologies associes, notamment XSLT et XPath.

Les questions souleves concernent la gestion des appels asynchrones, la conception etlutilisation de composants graphiques (comme la suggestion de saisie) ou fonctionnels(comme un panier dans une application de vente en ligne), la complexit du codeJavaScript induite par la richesse des fonctionnalits du client et lintgration dAjaxdans les applications Web existantes.Les solutions ces problmes reposent en grande partie sur des mthodes et desframeworks : pour faire face la complexit du code, celui-ci doit tre conu de faonmodulaire, en faisant appel la programmation objet de JavaScript, des bibliothquesde composants JavaScript et une architecture MVC (modle, vue, contrleur).Cette dernire, qui a dmontr sa valeur ct serveur ainsi que dans les applications client lourd, se rvle dsormais utile aussi ct client en Web. Elle se prolonge par lasparation nette entre le code HTML, concentr sur la structure et le contenu, le codeJavaScript en charge du comportement, et les CSS, qui gouvernent lapparence.Les mthodes valant avant tout par lexemple ( faites ce que je fais tant en cettematire plus efficace que faites ce que je dis ), elles sont constamment mises en prati-que dans cet ouvrage.Lobjectif de celui-ci est en effet double : installer chez le lecteur des bases solides et lerendre oprationnel rapidement travers des ralisations dampleur progressive, ledernier chapitre incluant une tude de cas illustrant comment concevoir et raliser uneapplication ajaxifie .

Organisation de louvrageDans chaque chapitre, louvrage part du besoin, lobjectif atteindre, et guide progressi-vement le lecteur vers cet objectif. La succession des chapitres vise galement facilitercette progression. Lexplication des techniques est illustre par des exemples, que le

Avant-propos V

lecteur pourra, dans certains cas, rutiliser dans ses propres projets. Lauteur insiste surles fondements de chaque technologie et les pratiques conseilles et indique les pointsdlicats, facteurs de bogues frquents.

Le chapitre 1 examine ce quapporte Ajax et liste notamment les cas typiques o il offreun rel avantage. Une grande partie des exemples prsents ici sont dvelopps dans leschapitres suivants. Les fonctions et le code dun exemple simple sont examins en dtailafin de montrer comment simbriquent les diffrentes composantes du code.

Il nest pas possible de faire de lAjax sans faire du HTML dynamique, qui consiste modifier le contenu, la structure ou lapparence dune page Web sans aucun appel auserveur. La rciproque est fausse. Aussi est-il plus facile de commencer par le HTMLdynamique, auquel le chapitre 2 est consacr. Ce chapitre fait un point sur les feuilles destyle CSS et sur lAPI DOM, qui permet de manipuler la structure, le contenu et lappa-rence de la page Web et de grer les vnements lis aux actions de lutilisateur.

Les applications Ajax faisant massivement appel des composants, le chapitre 3 sepenche sur les aspects objet et avancs de JavaScript, qui sont trs particuliers et peuventtre droutants tant pour les dveloppeurs Java ou C# que pour ceux qui nont pas unegrande habitude de la programmation objet. Le chapitre est illustr par la cration decomposants graphiques et dune suggestion de saisie en local (comme sur le site de laRATP). Ce chapitre est fondamental, car tous les exemples des chapitres suivants cons-truisent (ou font appel ) des composants JavaScript.Le chapitre 4 est ddi la communication avec le serveur via des requtes XMLHttpRequest.Aprs un point sur le protocole HTTP, il examine les questions souleves par les appelsAjax : gestion du cache, mthodes GET et POST, requtes parallles, cookies, scurit. Lesexemples incluent une suggestion de saisie par appels au serveur et la mise jour dyna-mique dune liste droulante, ralises sous forme de composants.

Le chapitre 5 traite de lchange de donnes XML ou JSON entre le client et le serveur.Il examine et compare les diffrents formats dchanges (texte, HTML, XML et JSON).Les spcificits de XML et de son DOM par rapport au HTML y sont indiques. Il traiteaussi de XSLT (transformations XML) et XPath. Les technologies sont illustres par unlecteur RSS, dabord dans une version simple faisant appel DOM, puis dans uneversion plus labore faisant appel XSLT.

Le chapitre 6 aborde les frameworks Ajax. Il commence par diffrencier biblioth-ques et frameworks, puis examine les critres de choix prendre en compte et compareles produits disponibles. Il tudie en particulier dojo et prototype.js, les deux biblioth-ques les plus anciennes et, semble-t-il, les plus utilises actuellement. Le chapitre estillustr de nombreux exemples dutilisation, notamment une mise en uvre du glisser-dposer et un diteur WYSIWYG.

Le chapitre 7 et dernier est consacr aux applications Ajax et Web 2.0. Cest le plusimportant du point de vue de la conception et de larchitecture. Il examine les questionssouleves par Ajax, en particulier labsence de support des actions Page prcdente etAjouter aux favoris. Il dtaille limpact dAjax sur les architectures Web, en particulier le

Dveloppez en AjaxVI

modle MVC. Une tude de cas conclut le chapitre et louvrage en montrant quau MVCct serveur sadjoint dans les cas complexes un MVC ct client.Chaque chapitre sappuie sur les connaissances acquises au cours des chapitres prc-dents et les enrichit. lissue de ce parcours, le lecteur aura un bagage solide et dispo-sera de composants directement utilisables, lui permettant daborder ses projets Ajax entant oprationnel.

Table des matiresRemerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IAvant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . III

Objectifs de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IVOrganisation de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IV

CHAPITRE 1

Introduction Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Quest-ce quAjax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Mise jour dune partie de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Communication asynchrone avec le serveur . . . . . . . . . . . . . . . . . . . . . . . . 3Techniques mises en uvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Exemples typiques o Ajax est utile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Validation et mise jour dune partie de la page . . . . . . . . . . . . . . . . . . . . 5Aide la saisie, notamment suggestion de saisie . . . . . . . . . . . . . . . . . . . . 7Lecture de flux RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Tri, filtrage et rorganisation de donnes ct client . . . . . . . . . . . . . . . . . . 9dition WYSIWYG de documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Diaporamas et autres applications documentaires . . . . . . . . . . . . . . . . . . . . 11Dbranchement dans un scnario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Visualisation graphique avec SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Rafrachissement dune branche dune arborescence . . . . . . . . . . . . . . . . . 13Chargement progressif de donnes volumineuses . . . . . . . . . . . . . . . . . . . . 14

Exemple Ajax simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Le code ct serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Le code ct client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18La requte XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Dveloppez en AjaxVIII

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

CHAPITRE 2

Le HTML dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Balises, arbre et botes HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Les CSS (Cascading Style Sheet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Les rgles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Botes et dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Afficher/masquer un lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Les calques et le positionnement des botes . . . . . . . . . . . . . . . . . . . . . . . . 35

DOM (Document Object Model) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Les interfaces DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Peupler une liste de suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Positionnement de la liste de suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . 44Rcupration de nuds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

DOM Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48vnements reconnus par les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . 49Programmation vnementielle mais traitement squentiel . . . . . . . . . . . . 50Association dune raction un vnement . . . . . . . . . . . . . . . . . . . . . . . . 51Ordre des vnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Propagation des vnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Les vnements clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Les vnements lis la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

CHAPITRE 3

Les composants JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Outils daide au dveloppement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Fonctionnalits objet de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Diffrences avec Java, Eiffel et C# . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Les objets JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71La notation JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Les fonctions anonymes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Le mot-cl this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Les constructeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Table des matires IX

Les prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Le mcanisme de fermeture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91this et les vnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Cration de composants JavaScript rutilisables . . . . . . . . . . . . . . . . . . 94La bote dinformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Suggestion de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

CHAPITRE 4

Communication avec le serveur via XMLHttpRequest . . . . . . 129Lobjet XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Rappels sur HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Instanciation dune requte XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . 135Requtes synchrones ou asynchrones ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Cycle de vie de la requte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138XMLHttpRequest et la scurit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143Gestion du cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143Les problmes dencodage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148Les requtes parallles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Applications exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Suggestion de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Mise jour dune partie de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

CHAPITRE 5

change de donnes en XML ou JSON . . . . . . . . . . . . . . . . . . . . . . 177XML (eXtensible Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Documents bien forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178Choix de la structure des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182Le DOM XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186La mise jour partielle avec XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

JSON (JavaScript Object Notation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189Communication JSON entre JavaScript et PHP . . . . . . . . . . . . . . . . . . . . . 191

Dveloppez en AjaxX

La mise jour partielle avec JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193Comparaison des formats dchange . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195Exemple dapplication avec les flux RSS . . . . . . . . . . . . . . . . . . . . . . . . . 197

Les formats RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198Le serveur comme mandataire HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200Le composant lecteur de RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201Affichage du flux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

XSLT (eXtensible Stylesheet Language Transformations) . . . . . . . . . . 208XPath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Fonctionnement de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211La syntaxe XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Les espaces de noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215Exemple de transformation XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Exemple dapplication de lecteur RSS avec XSLT . . . . . . . . . . . . . . . . . 219Le composant XSLView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221La transformation XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224La page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

CHAPITRE 6

Les frameworks Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233Botes outils, bibliothques et frameworks . . . . . . . . . . . . . . . . . . . . . . 233Les bibliothques JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235prototype.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Fonctions et objets utilitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Encapsulation et extensions de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240Les appels XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

script.aculo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245rico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Fonctions et objets utilitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Encapsulation et extensions de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Les appels Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256Les widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Table des matires XI

dition WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264En rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Yahoo User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

CHAPITRE 7Les applications Ajax et Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Questions fonctionnelles souleves par Ajax . . . . . . . . . . . . . . . . . . . . . . 272Single Page Application, ou navigation classique ? . . . . . . . . . . . . . . . . . . 272Historique dune session utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Laction Page prcdente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274Laction Ajouter aux favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Lhistorique de navigation en dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Architecture des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279tude de cas : application de vente en ligne . . . . . . . . . . . . . . . . . . . . . . . 281

Fonctionnalits porter en Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281Portage du panier en Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284Conception du panier en Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287Gestion du panier ct serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289Gestion du panier ct client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294Affichage des produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299Vue du panier sous forme de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Annexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Couleurs systme prdfinies dans les CSS . . . . . . . . . . . . . . . . . . . . . . . 307Statut des rponses HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308Lobjet XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

1Introduction Ajax

Invent dbut 2005 par Jesse J. Garrett, le terme Ajax (Asynchronous JavaScript AndXML) dsigne un ensemble de technologies existant depuis plusieurs annes, dont uneutilisation ingnieuse rend possibles des fonctionnalits Web novatrices et utiles, quirencontrent un succs grandissant depuis lapparition dapplications telles que GoogleSuggest, Google Maps, writely, etc.Grce Ajax, il est possible de btir des applications Web au comportement trs prochede celui des applications Windows ou MacOS natives. Lavantage essentiel dAjax rsidedans une plus grande ractivit de linterface par rapport au Web classique.Ce chapitre vise situer Ajax dans le monde du dveloppement Web. Il servira en outrede base aux chapitres ultrieurs.Il commence par expliquer ce quest Ajax et les avantages quil apporte aux utilisateurs,puis rpertorie les cas typiques o il leur est utile. Plusieurs des exemples cits sont misen uvre dans le reste de louvrage. Le chapitre est illustr par un exemple simple etdmonstratif, dont le code est dtaill.

Quest-ce quAjax ?Nous allons tout dabord considrer laspect fonctionnel dAjax, afin de montrer ce quilapporte par rapport au Web classique.Nous dtaillerons ensuite les technologies mises en uvre, puisque Ajax nest pas en lui-mme une technologie, mais un ensemble de technologies existantes, combines defaon nouvelle.

Dveloppez en Ajax2

Mise jour dune partie de la pageDans une application Web classique, lorsque lutilisateur clique sur un lien ou valide unformulaire, le navigateur envoie une requte au serveur HTTP, qui lui retourne enrponse une nouvelle page, qui remplace purement et simplement la page courante,comme lillustre la figure 1.1.

Par exemple, sur un site de commerce en ligne, lutilisateur demande une page, dans laquelleil saisit ses critres de recherche de produits. Lorsquil valide le formulaire, une nouvelle pagelui indique les rsultats. Il peut alors, en cliquant sur le lien adquat, ajouter tel produit sonpanier, ce qui ramne une nouvelle page, par exemple la vue du panier, etc.Dans la plupart des sites Web, les pages ont gnralement des parties communes. Il sagitnotamment des liens vers les actions possibles sur le site, lesquels conservent le contexteet permettent lutilisateur de savoir o il en est et daccder rapidement aux informa-tions ou aux actions possibles. Ces liens forment une sorte de menu, situ le plus souventen haut ou gauche des pages. Par exemple, pour un site de commerce, le panier delutilisateur est visible sur toutes les pages ou est accessible depuis un lien (souvent sousla forme dune icne reprsentant un Caddie).Avec le Web classique, ces parties communes sont envoyes avec chaque rponse HTTP.Lorsque le volume de donnes des lments communs est faible par rapport celle deslments propres la page, cest sans grande consquence. Dans le cas contraire, cefonctionnement consomme inutilement une partie de la bande passante et ralentit lappli-cation. Par exemple, si lutilisateur modifie la quantit dun article dans son panier, seulsdeux ou trois petites portions de la page devraient tre mises jour : la quantit (unchamp de saisie) et le nouveau montant de la ligne et du total. Le rapport est dans ce castotalement disproportionn.

Figure 1.1Communication client/serveur en Web classique

Requte HTTP

Rponse HTTP

Requte HTTP

PageHTML

PageHTML

Rponse HTTP

Client Serveur

Introduction AjaxCHAPITRE 1 3

Avec Ajax, il est possible de ne mettre jour quune partie de la page, comme lillustre lafigure 1.2. Les requtes HTTP sont envoyes par une instruction JavaScript en raction une action de lutilisateur. La rponse HTTP est galement rcupre par JavaScript, quipeut ds lors mettre jour la page courante, grce DOM et aux CSS, qui constituent cequon appelle le HTML dynamique.

Plusieurs requtes peuvent ainsi tre mises depuis une mme page, laquelle se met jour partiellement chaque rponse. Le cas extrme est constitu par une applicationrduite une seule page, toutes les requtes tant mises en Ajax. Nous verrons auchapitre 7 dans quels cas ce choix se montre judicieux.Dans lexemple prcdent, lorsque lutilisateur change la quantit dun produit dans sonpanier, une requte HTTP est envoye par JavaScript. rception de la rponse, seulesles trois zones concernes sont mises jour. Le volume transitant sur le rseau est ainsirduit (drastiquement dans cet exemple), de mme que le travail demand au serveur, quina plus reconstruire toute la page. La communication peut ds lors tre plus rapide.

Communication asynchrone avec le serveurLa deuxime caractristique dAjax est que la communication avec le serveur viaJavaScript peut tre asynchrone. La requte est envoye au serveur sans attendre larponse, le traitement effectuer la rception de celle-ci tant spcifi auparavant.JavaScript se charge dexcuter ce traitement quand la rponse arrive. Lutilisateur peutde la sorte continuer interagir avec lapplication, sans tre bloqu par lattente de larponse, contrairement au Web classique. Cette caractristique est aussi importante quela mise jour partielle des pages.

Figure 1.2 Communication client-serveur en Ajax

Requte HTTP

Rponse HTTP

Requte HTTP

PageHTML

Rponse HTTP

Requte HTTP

Rponse HTTP

Client Serveur

Dveloppez en Ajax4

Pour reprendre notre exemple, si nous ralisons en Ajax lajout dun produit au panier, lutili-sateur peut ajouter un premier article, puis un second, sans devoir attendre que le premier soiteffectivement ajout. Si la mise jour des quantits achets est galement ralise en Ajax,lutilisateur peut, sur la mme page, mettre jour cette quantit et continuer ajouter des arti-cles (ou en enlever). Nous mettrons dailleurs en uvre ce cas au chapitre 7.Les requtes peuvent ainsi se chevaucher dans le temps, comme lillustre la figure 1.3.Les applications gagnent ainsi en rapidit et ractivit.

Le paralllisme des requtes HTTP en Ajax est trs utile dans la plupart des cas. Il exigecependant parfois de prendre certaines prcautions, comme nous le verrons au chapitre 4.

Par exemple, si lutilisateur valide le panier, il faut lui interdire de le modifier tant que lavalidation nest pas termine ou abandonne, afin dviter de possibles incohrences. Demme, cette validation doit tre impossible tant que des requtes modifiant ce panier sonten cours. Avant dutiliser des requtes asynchrones, il convient donc de vrifier quellesninduisent aucun problme fonctionnel.

Techniques mises en uvreLa communication avec le serveur repose sur lobjet JavaScript XMLHttpRequest, qui permetdmettre une requte, de lannuler (cest parfois utile) et de spcifier le traitement effectuer la rception de sa rponse.

Le chapitre 4 examine en dtail les problmatiques relatives cet objet. Disponible depuis1998 dans Microsoft Internet Explorer, il lest dsormais dans tous les navigateurs rcents.

Figure 1.3 Requtes Ajax asynchrones sexcutant en parallle

Envoi de la

requte

Requte 2

Envoi de la

requte

Rception et traitement

de la rponse

Requte 1

Envoi de la

requte

Requte 3

Temps


de la rponse


de la rponse


Le traitement effectuer lors de la rception de la rponse implique gnralement demettre jour le contenu, la structure ou lapparence dune ou de plusieurs parties de lapage. Cest prcisment en quoi consiste le HTML dynamique.Apparu ds 1996, le HTML dynamique a longtemps souffert dincompatibilits des navi-gateurs, aujourdhui limites, et de laspect gadget de ce qui lui tait souvent demand(animations sans utilit fonctionnelle, rollovers, etc.). Le HTML dynamique repose surDOM (Document Object Model), ou modle objet du document, et les CSS (CascadingStyle Sheets), ou feuilles de style en cascade, deux normes du Web Consortiumaujourdhui assez bien supportes par les navigateurs. Le HTML dynamique est prsenten dtail au chapitre 2.Avec Ajax, beaucoup de code peut tre dport du serveur vers le client. Le codeJavaScript devient donc plus complexe, ce qui rend ncessaire de bien le structurer. Cestpourquoi les applications Ajax induisent une programmation objet en JavaScript, ainsique lutilisation daspects avancs de ce langage, lesquels sont couverts au chapitre 3.Les rponses Ajax en HTTP peuvent tre au format HTML, comme en Web classique,mais avec cette diffrence quil sagit de fragments HTML, et non de pages entire, seulela portion de page remplacer tant renvoye.Dans certains cas, cela se rvle tout fait adapt, mais il peut tre prfrable dansdautres cas de renvoyer la rponse sous forme structure, de faon pouvoir lexploiterde plusieurs manires ct client. Cest l quintervient XML, qui prfixe lobjetXMLHttpRequest, ainsi que les techniques qui laccompagnent, notamment XSLT. Cestaussi l quintervient JSON, un format dchange adapt aux donnes, qui lest parfoisplus encore que XML. Le chapitre 5 se penche en dtail sur ces deux formats.Ajax repose ainsi sur tous ces piliers : DOM et CSS, JavaScript, XMLHttpRequest, XML etXSLT, ainsi que JSON.

Exemples typiques o Ajax est utileAjax est bien adapt certains besoins mais pas dautres. Sans attendre davoir une ideapprofondie de ses tenants et aboutissants, nous dressons dans cette section une liste dessituations o il se rvle utile, voire prcieux.Plusieurs des exemples qui suivent seront mis en uvre dans la suite de louvrage.

Validation et mise jour dune partie de la pageReprenons notre exemple de boutique en ligne.Lutilisateur consulte un catalogue, ajoute des articles son panier puis valide celui-ci etpaie la commande gnre. Lors de la validation du panier, si lutilisateur ne sest pasencore identifi, lapplication lui demande de saisir son identifiant et son mot de passe oude senregistrer si ce nest dj fait.

Dveloppez en Ajax6

Prenons le cas dun utilisateur dj enregistr. Il est dirig vers une page didentification,puis, aprs validation, vers son panier. En Web classique, le serveur doit construire etrenvoyer deux fois la page de validation du panier. Avec Ajax, nous pouvons rester surcette page, y afficher le formulaire didentification, et, lorsque lutilisateur valide sasaisie, lancer en sous-main une requte au serveur, rcuprer le rsultat et lafficher. Cestalors que lutilisateur peut valider son panier.Les figures 1.4 et 1.5 illustrent cet usage. Notons la figure 1.5 licne indiquant que larequte est en cours de traitement.

Lavantage apport par Ajax est ici double : lapplication va plus vite, puisque nous rdui-sons le nombre de requtes et la taille de la rponse (un simple OK, ou un message Utilisateur inconnu ), et le droulement est plus fluide pour lutilisateur, qui peut mmecontinuer sa saisie et changer, par exemple, la quantit commander pour un article.Dautres avantages dAjax se retrouvent dans dautres parties du site. Lidentification estgnralement un prrequis pour des oprations telles que consulter ses commandespasses, spcifier des prfrences (Ma recherche, Mon profil). Si la requte didentifica-tion et sa rponse sont rduites au minimum, nous pouvons lgitimement esprer un all-gement non seulement dune opration, mais de lensemble de celles qui sont concernespar lidentification.

Figure 1.4 Validation dun formulaire sans changer de page

Figure 1.5 Lutilisateur a valid le formulaire, qui attend la rponse


Ce cas de figure se prsente dans toutes les situations o une partie dun formulaire peuttre valide ou utilise indpendamment du reste, notamment les suivantes : Quand lutilisateur enregistre un client, pour vrifier lexistence de son code postal et

proposer la ou les communes correspondantes. Le plus souvent, il y ny en a une seule,mais, en France, il peut y en avoir jusqu 46 pour un mme code postal.

Dans une application dassurance, pour dclarer un sinistre sur un vhicule. Lutilisa-teur indique lidentifiant du vhicule, puis, pendant quil saisit les informationsconcernant le sinistre, lapplication interroge le serveur et ramne les donnes corres-pondant au vhicule.

videmment, si la requte au serveur est asynchrone, cest--dire si elle ne bloque paslutilisateur, il faut lui montrer par un petit signe, comme le GIF anim de Mozilla pourle chargement, que la donne est en train dtre rcupre. Ce feedback est trs important.Cet exemple est trait en dtail la fin de ce chapitre.

Aide la saisie, notamment suggestion de saisieGoogle Suggest a popularis lusage de laide la saisie : lutilisateur commence saisirune expression, puis, chaque caractre saisi, lapplication interroge le serveur de faonasynchrone, rcupre les 10 expressions les plus demandes commenant par lexpres-sion saisie et les affiche sous forme de liste. Lutilisateur peut ds lors slectionner lunedelles, qui se place dans le champ de saisie.La figure 1.6 illustre un exemple de suggestion de saisie o lutilisateur a entr ajax .

Figure 1.6 Google Suggest

Dveloppez en Ajax8

Les serveurs de Google sont si rapides que les rponses aux requtes sont quasimentinstantanes. Toutes les applications ne disposent cependant pas dune telle puissance. Ilfaut en tenir compte quand nous implmentons cette technique, en ne lanant des requ-tes que tous les n caractres saisis, ou lorsque la saisie comprend dj n caractres.Si nous reprenons lexemple de la saisie dun code postal, nous pouvons ne dclencher larequte destine rcuprer les communes correspondantes que lorsque la saisie a atteint5 caractres et annuler cette requte ds que lutilisateur efface un caractre.Nous pouvons mme dans certains cas viter tous les allers-retours vers le serveur, limage du site de la RATP. Pour fournir litinraire dune station de mtro une autre,cette application suggre les stations dont le nom commence par la saisie de lutilisateur,et ce chaque caractre entr. Cest aussi instantan que pratique. Il suffit, lors du char-gement de la page, denvoyer au navigateur un fichier contenant le nom de toutes lesstations. Le poids de ce fichier ntant que de 14 Ko, cest une ide particulirement judi-cieuse.La question cl dterminer pour savoir sil faut envoyer les requtes au serveur ou auclient rside dans le volume des donnes dans lesquelles il faut rechercher. Pour lesstations, il est si petit quil peut tre envoy intgralement sur le client. Pour les commu-nes, ou des noms de clients dans une application dassurance, il existe des dizaines ou descentaines de milliers denregistrements, si bien que des requtes au serveur sont indis-pensables.Cet usage dAjax si avantageux pour les utilisateurs exige en contrepartie une vrifica-tion attentive des performances ainsi que de sa pertinence dans chaque cas. Faire dessuggestions quand lutilisateur saisit un numro de contrat napporte pas ncessairementgrand-chose, alors que, pour le nom dun produit ou dun client, cela offre une sorte devisibilit de lensemble des valeurs, qui peut guider lutilisateur.La suggestion de saisie est traite en dtail aux chapitres 3 (en version locale) et 4 (enversion communiquant avec le serveur).

Lecture de flux RSSLes flux RSS sont une composante majeure de ce que lon appelle le Web 2.0. Commeune page HTML, un flux RSS est la rponse une requte faite un serveur Web, dont laspcificit est de transmettre des nouvelles (agences de presse, journaux en ligne, blogs,nouvelles dun site) ayant une structure prdfinie. Cette structure contient essentielle-ment une liste darticles portant un titre, un rsum, une date de mise en ligne et ladressede larticle complet. Qui dit information structure, dit XML, si bien quun flux RSS estun document XML.Avec Ajax, il est possible de rcuprer de tels flux dans une page Web, de les afficher enHTML selon la forme souhaite et de les faire se mettre jour intervalles rguliers.Le site www.netvibes.com illustr la figure 1.7 donne un exemple dun tel usage. Nous yvoyons plusieurs botes, une par flux : gauche, un flux provenant de techno-science.net


et, ct, un flux provenant du blog de netvibes, llment de droite tant simplementune zone de contenu statique.Le site netvibes ajoute cette fonctionnalit la possibilit de dplacer les botes sur lapage par glisser-dposer, ce qui amliore encore son ergonomie. Lintgration dune forteproportion de HTML dynamique est une constante des applications Ajax.Une lecture de flux RSS proche de celle de netvibes.com est dtaille au chapitre 5.

Tri, filtrage et rorganisation de donnes ct clientIl est trs frquent dafficher lutilisateur les rsultats dune recherche sous forme detableau, en lui permettant de trier les rsultats par un clic sur une colonne, comme danslExplorateur de Windows, les logiciels de messagerie et bien dautres applications. Il estaussi parfois utile de lui permettre de filtrer les rsultats suivant tel ou tel critre.Il arrive assez frquemment que ces rsultats ne dpassent pas la centaine ou un volumede lordre de 50 Ko, par exemple quand les donnes correspondent une sous-catgorietelle que salaris dun dpartement dans une application de ressources humaines,produits dun rayon dans une gestion de stock, etc.Comme les donnes sont sur le client, ce serait du gchis que de lancer chaque fois unerequte au serveur. Une excellente faon de lviter est de transmettre les donnes enXML et de les afficher au moyen de transformations XSLT effectues ct client. Les triset filtrages tant instantans, cest l lun des emplois les plus puissants dAjax et quiillustre non le A (asynchronous) de lacronyme mais le X (XML).

Figure 1.7 Affichage de flux RSS par le site netvibes

Dveloppez en Ajax10

La figure 1.8 illustre une page affichant des lments dune liste en fonction de critresde recherche.

Ds que lutilisateur modifie un critre, le tableau change instantanment : seuls lestablissements ouverts aux heures et jours indiqus sont affichs, et la colonne corres-pondant au jour courant (jeudi dans lexemple) est mise en exergue (son fond change decouleur).Nous traitons en dtail au chapitre 5 un exemple quivalent, o les donnes sont des fluxRSS.

dition WYSIWYG de documentsIl sagit ici de sauvegarder des documents plutt que de soumettre des formulaires. Ilpeut sagir de documents HTML ou de toutes sortes de documents structurs rgulire-ment manipuls par les entreprises, comme les notes de frais. Lutilisateur peut cliquersur un bouton pour sauvegarder son document, tout en continuant lditer. Pour lesauvegarder, lapplication lance une requte asynchrone, dont le corps contient le docu-ment. Ldition fait pour sa part un recours massif au HTML dynamique.

Figure 1.8 Filtrage de donnes sur le poste client


Il faut prvoir un bouton Editer/Terminer ldition, afin de verrouiller/dverrouiller ledocument en criture au niveau serveur. Cela se rvle trs pratique pour des documentsassez riches et partags, pour lesquels un formulaire aurait une structure trop rigide.Wikipedia est fournit un bon exemple.Plusieurs sites proposent aujourd hui des applications bureautiques en ligne fonctionnant decette mani re gr ce Ajax : traitement de texte (par exemple, writely), tableur, gestionnaired agenda, sans parler des messageries. La figure 1.9 illustre l diteur de texte fourni par leframework Ajax dojo toolkit.

Nous indiquons au chapitre 6 comment raliser un tel diteur.

Diaporamas et autres applications documentairesLes applications documentaires se dveloppent de plus en plus sur Internet. Il sagit enparticulier de disposer de diffrentes vues dun mme document : table des matires,fragment du document (page n dun article dcoup en x parties), intgralit du docu-ment sous forme imprimable. Nous pouvons, par exemple, avoir, gauche dune page, latable des matires et, droite, la partie du document correspondant lentre de la tabledes matires sur laquelle lutilisateur a cliqu. Nous pouvons aussi faire dfiler lensem-ble du document sous forme de diaporama.Jutilise moi-mme souvent cette technique pour des prsentations. Le document mledes lments destins la prsentation orale (titres et listes puces) et du commentairedestin lcrit. Il est possible dimprimer tout le document sous forme de manuel et delafficher sous la forme dun diaporama, avec en ce cas un affichage des caractres beau-coup plus gros.La figure 1.10 illustre la cration dun diaporama sur le site thumbstacks.com.

Figure 1.9 Lditeur Ajax fourni par le framework dojo toolkit

Dveloppez en Ajax12

Nous pouvons avoir des documents structure libre (bureautique) ou souhaiter structurerplus fortement les documents grce XML en proposant la consultation diffrentes vuersultant de transformations DOM ou XSLT ct client.Pour lutilisateur, lavantage est l encore la rapidit de raction que cela lui apporte. Ledocument volumineux est charg en une fois, et le passage dune vue une autre estinstantan. Pour lditeur du document, lavantage est la garantie dune cohrence entreles diffrentes vues, puisque toutes les vues sont obtenues partir dun unique document.Transpos dans le monde documentaire, nous retrouvons l le mcanisme des vues desbases de donnes relationnelles.

Dbranchement dans un scnarioReprenons lexemple du panier dans une boutique en ligne.Lorsque lutilisateur commande sur le site pour la premire fois, il doit senregistrer.Dans de nombreux sites, lorsque, sur la page du panier, il clique sur le bouton Valider lepanier, il est redirig vers une nouvelle page pour saisir son profil. Il remplit alors leformulaire et le soumet au serveur, aprs quoi lapplication le connecte puis le ramnevers la page de commande (ou lui dit simplement Vous tes connect , lutilisateurdevant encore cliquer sur Mon panier).Cet usage est en quelque sorte une variante du premier (validation et mise jour partielle).Cela prsente les deux inconvnients suivants : Performance. Le serveur doit traiter deux requtes : laffichage du formulaire denregis-

trement, dune part, et sa validation et sa redirection vers la page du panier, dautre part. Ergonomie. Du fait du changement de contexte (panier puis enregistrement), la fluidit

du scnario est rompue.

Figure 1.10 dition dun diaporama sur le site thumbstacks.com


Nous pouvons amliorer lergonomie dun tel site en affichant le formulaire dinscriptiondans une fentre pop-up ou dans un cadre interne. Dans les deux cas, nous rduisons letrafic puisque nous vitons le renvoi de la page du panier. Une autre faon de procderconsiste dployer le formulaire denregistrement dans la fentre grce un clic sur unbouton ou un lien Senregistrer et ne soumettre au serveur que ce formulaire, par lebiais dune requte XMLHttpRequest.Pour cela, il faut modifier dynamiquement le contenu ou laffichage de la page et passerdes requtes partielles, cest--dire sans redemander au serveur de reconstruire toute lapage.Un tel usage est troitement li une rgle de bonne conception des IHM : quand il y aplusieurs objets sur une page, nous rservons chacun une zone sur cette page, et nous yplaons les actions associes. Ici, nous avons les objets catalogue, panier et utilisateur.Nous pouvons disposer les trois objets sur la page, avec ventuellement une zone detravail additionnelle, et ne rafrachir que ce qui est ncessaire.

Visualisation graphique avec SVGDans des applications daide la dcision (tableau de bord, analyse de donnes, prvi-sion) ou de simulation, il est souvent trs utile de prsenter les donnes sous formegraphique : courbes, histogrammes, camemberts. Avant Ajax, nous tions rduits gn-rer ces graphiques ct serveur sous forme de fichiers GIF ou PNG et les envoyer sur leclient.Nous pouvons aujourdhui envisager de faire beaucoup mieux. SVG (Scalable VectorGraphics), une norme du W3C, est un type de documents XML qui dcrit des graphiquesvectoriels ainsi que leur animation. Comme il sagit de XML, nous pouvons transformerles donnes en SVG au moyen de XSLT, en particulier sur le client et construire ainsi desapplications dans lesquelles nous pouvons manipuler ces donnes ct client et en voirimmdiatement le rendu graphique. Cela peut se faire directement dans Firefox partirde la version 1.5 et dans Internet Explorer au moyen dun plug-in comme le visualiseurSVG dAdobe.

Rafrachissement dune branche dune arborescenceCertaines applications prsentent des informations sous forme arborescente. Un forum,par exemple, peut afficher une liste darticles (news), dont chacun peut donner lieu unfil de discussion, chaque rponse dans un fil pouvant son tour donner lieu un autre fil,etc. Dautres exemples de ce type sont fournis par les catalogues, avec leurs rubriques etsous-rubriques, les organigrammes dentreprise (voir figure 1.11) ou encore les tablesdes matires des documentations.

Dveloppez en Ajax14

Quand lutilisateur cherche un lment de larborescence (dans notre exemple, LoginDurand), nous laffichons avec les nuds anctres (service, direction) et voisins. Quandil veut dtailler une branche de larborescence, nous rcuprons par une requte asyn-chrone le dtail de la branche et lajoutons simplement larborescence, en conservantltat dploy ou repli des autres branches.Lutilisateur peut de la sorte parcourir tout larbre de faon flexible. Quand larbre estparticulirement imposant, cest trs utile. Cest ce que fait Microsoft pour la table desmatires de son site de documentation technique (msdn.microsoft.com).

Chargement progressif de donnes volumineusesIl arrive que les donnes transmettre soient volumineuses. Lapplication Google Mapsen est un bon exemple. Elle affiche une zone dune carte, quil est possible de faire glisserde faon afficher les zones voisines, et ce indfiniment, et sur laquelle il est possible defaire des zooms avant et arrire. Cela fonctionne un peu comme Mappy, sauf que lutili-sateur peut faire glisser la carte sans aucune contrainte.Grce Ajax, la carte afficher est en fait dcoupe en petits morceaux. Quand lutilisa-teur la dplace, le navigateur demande les morceaux voisins par des requtes asynchro-nes. Le serveur rpondant trs vite, lutilisateur a une impression de fluidit.

Exemple Ajax simpleAprs avoir parcouru les diffrents usages dAjax dans les applications, nous allons nouspencher plus en dtail sur un premier exemple simple, du point de vue tant fonctionnelque du code.Nous reprenons le cas indiqu prcdemment de la page affichant le panier dune bouti-que en ligne et permettant de le valider. Lutilisateur dispose dun formulaire pour cela,

Figure 1.11 Organigramme Ajax


mais il lui faut au pralable stre identifi. La page sait sil lest en stockant cette infor-mation dans un champ cach ou dans une variable.Sil nest pas encore identifi, lapplication lui propose de le faire travers un autreformulaire ddi cela. La page a alors laspect illustr la figure 1.12 (lemplacementdu panier est simplement mentionn).

Lutilisateur remplit le petit formulaire puis le valide. Lapplication interroge alors leserveur sans demander une nouvelle page. En attendant la rponse (si le serveur est lent),lutilisateur peut changer la quantit des articles quil a choisis. Il faut alors lavertirvisuellement que la requte est en cours de traitement, de mme quil faudra lavertirquand elle sera termine.Un moyen simple pour raliser cela consiste changer lapparence du bouton de valida-tion, en remplaant le texte par une image anime suggrant le chargement, comme celledu navigateur Firefox. Il faut en outre donner lutilisateur la possibilit dabandonner larequte, comme pour le Web classique, ce qui est lobjet du bouton Annuler, qui devientactiv, ainsi que lillustre la figure 1.13.

Si lutilisateur annule la requte, le bouton Sidentifier affiche nouveau le texte initial,et le bouton Annuler est dsactiv, comme lillustre la figure 1.14.

Figure 1.12 Formulaire didentification

Figure 1.13 Attente de la rponse du serveur indique par une image anime

Dveloppez en Ajax16

Sil laisse le traitement se poursuivre, une fois celui-ci termin, la bouton Annuler est nouveau dsactiv. Si lutilisateur a saisi les bons identifiant et mot de passe, lapplica-tion len avertit (voir figure 1.15), lui permettant de valider son panier en modifiantlinformation correspondante stocke au niveau de la page. Dans le cas contraire, elleaffiche un message derreur (voir figure 1.16).

Figure 1.14 Abandon de la requte

Figure 1.15 Saisie valide par le serveur

Figure 1.16 Erreur indique par le serveur


Le code ct serveurBien que simple, cet exemple met dj en uvre plusieurs briques essentielles dAjax.Nous allons examiner comment celles-ci simbriquent afin de bien faire comprendre lesmcanismes mis en jeu dans Ajax. Nous tudions en dtail chacune de ces briques aucours des chapitres suivants.Nous crivons le code serveur en PHP.Nous avons les deux pages suivantes : panier.php, qui affiche le panier de lutilisateur. identifier.php, qui identifie lutilisateur, lenregistre dans la session ct serveur sil

est reconnu et informe en retour sil est connect ou si les informations sont invalides.Ce service peut bien entendu tre appel depuis dautres pages que panier.php.

Considrons rapidement le code de laction identifier.php. Nous sommes dans du Webclassique, avec une forme assez MVC (modle, vue, contrleur). La vue se charge derenvoyer le rsultat lutilisateur. tandis que le modle maintient ltat du serveur(session utilisateur, base de donnes). Pour la simplicit de lexemple, il est rduit auminimum indispensable. Le contrleur rcupre les paramtres, interroge ou commandele modle et demande la vue de renvoyer la rponse.Voici le code du contrleur :

Dveloppez en Ajax18

function get_user($login, $motPasse) { // Le seul utilisateur valide sera Haddock/Archibald $user = null; if ($login == "Haddock" && $motPasse == "Archibald") { $user = array("id" => 1, "login" => "Haddock"); } return $user;}

function connecter_user($user) { // Enregistrer l'utilisateur dans la session web}

Nous constatons que le code est vraiment rduit au minimum. La fonction get_usernaccepte quun utilisateur crit en dur, sans aucun accs la base de donnes. Si lesparamtres lui correspondent, elle le renvoie, sinon elle renvoie null. De mme,connecter_user a un corps vide.La vue renvoie au client un simple message texte, sans aucun enrobage HTML ou XML(cest lui qui est affich sur le client, lequel le reprend purement et simplement) :

/** Vue */function repondre($user) { if ($user) { print "Utilisateur '$user[login]' connect"; } else { print "Utilisateur inconnu ou mot de passe invalide"; }}?>

Le code ct clientExaminons maintenant le code ct client de la page panier.php.Au niveau HTML, nous avons un en-tte classique, pourvu dune feuille de style rduite :

Panier button { width: 12ex; height: 2em; margin: 0ex 1ex 0ex 1ex; }


#panier { text-align: center; font-size:120%; background: #FAF0F5; }

Suit du code JavaScript (examin plus loin), puis le corps de la page, avec le panier (icisimplifi en un div) et un formulaire, dont laction (ligne ) est un appel la fonctionJavaScript identifier() :

Zone affichant le panier Identifiant Mot de passe S'identifier Annuler

Dtaillons les trois fonctions JavaScript principales : identifier(), appele en , qui construit la requte HTTP et la lance. Le traitement est

dclench par le bouton Sidentifier. onIdentifier(), qui correspond au traitement lorsque la rponse est compltement

rcupre.

Dveloppez en Ajax20

abandonnerIdentifier(), qui abandonne la requte en cours dexcution (quivalent dubouton Stop du navigateur). Cette fonction est dclenche par le bouton Annuler (ligne foursansinv).

Voici le code de ces fonctions : // La requete HTTPvar requete;

function identifier() { requete = getRequete(); if (requete != null) { // Constituer le corps de la requete (la chaine de requete) var login = document.getElementById("login").value; var motPasse = document.getElementById("motPasse").value; var corps = "login=" + encodeURIComponent(login) + "&motPasse=" + encodeURIComponent(motPasse); try { // Ouvrir une connexion asynchrone requete.open("POST", "identifier.php", true); // Positionner une en-tete indispensable // quand les parametres sont passes par POST requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Traitement a effectuer quand l'etat de la requete changera requete.onreadystatechange = onIdentifier; // Lancer la requete requete.send(corps); // Montrer que la requete est en cours montrerActivite(); } catch (exc) { montrerInactivite(); } } else { setMessage("Impossible de se connecter au serveur"); }}

// Ce qui s'executera lorsque la reponse arriverafunction onIdentifier() { if (requete.readyState == 4 && requete.status == 200) { // Montrer que la requete est terminee montrerInactivite(); // Afficher le message de reponse recu setMessage(requete.responseText); }}

// Abandonner la requete

Dveloppez en Ajax22

// Afficher un messagefunction setMessage(msg) { document.getElementById("message").innerHTML = msg;}

La requte XMLHttpRequestTout au long de linteraction avec lutilisateur, nous avons besoin de manipuler la requteau serveur Web. Aussi la stockons-nous au niveau de la page dans la variable requete.Nous grons une requte unique afin de pouvoir lannuler quand lutilisateur clique surAnnuler ou de lannuler et la relancer avec la nouvelle saisie si lutilisateur soumet nouveau le formulaire (cela vite des requtes et rponses inutiles).La fonction getRequete() renvoie cette requte et la cre si elle nexiste pas dj. Silnest pas possible de crer un tel objet, la fonction renvoie null (le navigateur nest pascompatible Ajax).Avec cette fonction, nous butons demble sur les incompatibilits des navigateurs, quiest une des difficults dutilisation dAjax. Pour crer un objet de type XMLHttpRequest,nous sommes obligs davoir deux codes diffrents selon que nous sommes dans InternetExplorer ou dans un navigateur compatible Mozilla.La fonction identifier() commence par rcuprer un objet de type XMLHttpRequest. Dansle cas o il existe, elle constitue le corps de la requte en rcuprant la saisie de lutilisa-teur. Il faut cependant bien prendre garde encoder les paramtres saisis par lutilisa-teur, grce la fonction encodeURIComponent(), car cest impos par HTTP. Quand lappli-cation utilise le mcanisme standard du navigateur, celui-ci encode automatiquement lesparamtres. Ici, cest au dveloppeur de le faire.Ensuite, la fonction ouvre la connexion en mode asynchrone (le troisime paramtre de open()vaut true), puis elle spcifie le traitement quil faudra excuter lorsque la rponse sera reue.Cest ce que fait linstruction suivante :

requete.onreadystatechange = onIdentifier;

qui signifie que, lorsque ltat de la requte (indiqu par lattribut readyState) changera,le navigateur devra excuter la fonction onIdentifier(). Il ne faut surtout pas mettre deparenthses aprs onIdentifier, faute de quoi la ligne appellerait onIdentifier() et asso-cierait le rsultat obtenu, et non la fonction elle-mme, au changement dtat.Il ne reste plus qu indiquer lutilisateur que la requte est lance, ce que nous faisonsen appelant montrerActivite().

Traitement asynchrone ce stade, la fonction identifier() a termin son travail. Le fait que la requte soit asyn-chrone signifie quune tche indpendante a t lance. Le dveloppeur en contrle ledroulement dans la fonction onIdentifier().


La requte passe par plusieurs tats, numrots de 0 4, dont la valeur est accessible danslattribut readyState. Ltat qui nous intresse est 4, le dernier, quand lintgralit de larponse a t rcupre. Nous vrifions aussi que le statut de la rponse HTTP vaut bien200 (qui signifie OK). Dans ce cas, la fonction rcupre le texte de la rponse et laffichesimplement dans la zone de message.

HTML dynamiqueTerminons cet examen du code avec les fonctions montrerActivite(), montrerInactivite()et setMessage(), qui utilisent deux mthodes du DOM HTML : getElementById("unId"), qui rcupre llment de la page did unId. innerHTML, qui donne le contenu de llment sous la forme de son texte HTML. Cet

attribut est en lecture-criture (sauf exceptions).Plusieurs lments HTML sont justement pourvus dun id : Le bouton Annuler. Le div (message) prvu pour afficher les messages. Les champs des formulaire login et motPasse. Les deux span (identifierOff et identifierOn) lintrieur du bouton de validation. Le

premier contient le texte du bouton, et le second limage indiquant que les donnessont en cours de transfert depuis le serveur.

Au chargement de la page, le texte (span identifierOff) est visible, tandis que limage(span IndentifierOff) est masque (son style indique que la directive display vaut none).Limage doit tre rcupre au chargement de la page, de faon apparatre instantan-ment lorsque lutilisateur valide le formulaire.La fonction montrerActivite() montre limage et cache le texte, tandis que la fonctionmontrerInactivite() fait linverse.

ConclusionLe code JavaScript que nous venons de parcourir est reprsentatif de ce que fait Ajax.Nous y retrouvons la mise jour partielle de la page, ainsi que le mcanisme dappelsasynchrones au serveur. Nous savons ainsi concrtement en quoi consiste du code Ajax.Pour des raisons pdagogiques, nous avons conserv ce code un style semblable ceque nous trouvons habituellement dans les pages Web. Il faut toutefois savoir quavecAjax, nous codons la plupart du temps en objet, car cest notre intrt. Pour cela, il fautbien connatre lobjet en JavaScript, qui est trs particulier. Nous dtaillons cette questionau chapitre 3, et les chapitres 4 7 suivront ce style orient objet.Ajax peut tre intgr des applications existantes. Il faut pour cela ajouter du codeJavaScript des pages existantes, afin de grer la communication via XMLHttpRequest ainsi

Dveloppez en Ajax24

que la mise jour de la page la rception de la rponse. Cela peut ncessiter beaucoupde code JavaScript.Il faut en outre modifier le code des ractions ct serveur, lesquelles, au lieu dune pagecomplte, doivent renvoyer un fragment HTML ou bien du XML, ou encore du JSON. Sinotre application suit larchitecture MVC (modle, vue, contrleur), ces modificationssont cantonnes la vue, quil sagit alors de simplifier.Nous nous retrouvons ainsi avec des vues plus complexes, comme panier.php, quicontiennent beaucoup de JavaScript, et dautres rduites leur plus simple expression,comme la fonction repondre de identifier.php.Lune des parties les plus dlicates concerne le HTML dynamique, auquel le Web 2.0 faitun appel massif. Pour cela, il faut bien connatre les techniques sous-jacentes et disposerde bibliothques de composants graphiques. Il faut en outre tre laise avec les aspectobjet et avancs de JavaScript.Toutes les questions abordes dans ce chapitre seront donc approfondies tout au long deschapitres suivants. Nous commencerons par le HTML dynamique, sur lequel repose lamodification des pages, puis nous passerons aux aspects avancs de JavaScript, de faon tre ensuite laise pour traiter ce qui appartient en propre Ajax, cest--dire lacommunication avec le serveur via lobjet XMLHttpRequest, lchange et la manipulationde donnes structures et les bibliothques JavaScript, parfois appeles abusivementframeworks Ajax.

2Le HTML dynamique

Le HTML dynamique, dont la premire implmentation remonte 1997, consiste modifier lapparence, le contenu ou la structure dune page Web sur le poste client, sansredemander la page au serveur.Une page comme celle illustre la figure 2.1 contient, gauche, une liste dlments et, droite, une zone de dtails. Quand lutilisateur clique sur lun des lments, celui-ci estmis en exergue, et les informations le concernant sont affiches dans la zone de dtails.Ces informations peuvent tre rcupres la vole grce Ajax ou tre incluses audpart dans la page. Dans ce dernier cas, toutes les informations sont masques au char-gement, puis, lors dun clic sur un des lments de la liste dans notre exemple,llment Castafiore , celles qui lui correspondent sont affiches.Pour raliser cela en JavaScript, nous associons des vnements (clic, dplacement dela souris, saisie dun caractre, etc.) des manipulations du style ou de larborescence deslments de la page.Les premires implmentations de Netscape et de Microsoft Internet Explorer, incompa-tibles entre elles, ont fait place des normes dfinies par le W3C (disponibles surwww.w3.org), notamment les suivantes : CSS (Cascading Style Sheet) : feuilles de style en cascade, qui permettent de dfinir

finement lapparence des lments de la page. DOM (Document Object Model) : API pour lire et modifier larborescence des

lments dune page, leur style et leur contenu. Cette API est subdivise en DOM Core(commune XML et au HTML), DOM HTML (spcifique au HTML), DOM Style(manipulation de CSS en DOM), DOM Events (gestion des vnements), etc.

Les navigateurs rcents, tels Internet Explorer 6, voire 5, Netscape 7.2, Firefox 1.0,Safari 1.2 et leurs successeurs, qui reprsentent aujourdhui la majeure partie du parc

Dveloppez en Ajax26

install, implmentent assez largement ces standards. Il subsiste toutefois des incompl-tudes ou des divergences, qui obligent souvent des contournements fastidieux.

Ces standards constituent une composante majeure dAjax. Nous allons les tudier dansce chapitre, sans nous attarder sur les aspects qui sont dj bien connus. En revanche,nous expliquerons les points dlicats, quil faut connatre pour viter des bogues dcon-certants.

Balises, arbre et botes HTMLCommenons par un retour rapide sur le HTML.Comme le montre le tableau 2.1, un mme document HTML peut tre vu de trois faonsdiffrentes selon quil est sur le disque (ou le rseau), en mmoire ou lcran.Sur le disque, un document HTML est un fichier texte comportant une imbrication debalises. La balise est le texte compris entre < et > et le contenu ce qui est compris entre labalise ouvrante et la balise fermante. Le tout forme un lment, comme lillustre lafigure 2.4.

Le HTML dispose dune version conforme XML, le xHTML. Lintrt de ce dernierlangage est quil permet de produire des documents composites comprenant, en plus deslments HTML, des lments SVG (Scalable Vector Graphics), ou graphiques vecto-riels, ou MathML.

Le passage au xHTML impose plusieurs contraintes au balisage mais aussi au typeMIME du document. Si nous ne produisons que des documents HTML traditionnels,nous pouvons nous en dispenser. Il est cependant recommand de respecter les quelquescontraintes suivantes, qui rendent le code plus propre :

Figure 2.1 Affichage des dtails dun lment dune liste

Le HTML dynamiqueCHAPITRE 2 27

terminer tout lment non vide par sa balise fermante ; mettre les noms de balises et dattributs en minuscules ; terminer les lments vides, comme les champs de saisie, par /> et non simplement par

> ;

donner tous les attributs une valeur comprise entre doubles ou simples cotes.

Tableau 2.1 Les trois aspects dun document HTML

Disque Mmoire cranImbrication de balises ayant pour lment englobant html

Arbre de nuds Imbrication de botes

* { border:solid 1px black; margin:1.4ex; } Du texte comportant un truc important parmi bien d'autres.

Figure 2.2Arbre en mmoire affich grce loutil DOM Inspector, une extension de Firefox disponible gratuitement sur Internet

Figure 2.3Botes imbriques lcran

Figure 2.4 Composants dun lment HTML ou XML

html body p em

techno-science

Attribut

ContenuBalise ouvrante Balisefermante

lment

Dveloppez en Ajax28

Nous crirons ainsi :

et non :

Quand le navigateur ouvre un document HTML, il lanalyse et construit en mmoire unarbre de nuds : un nud par lment, un par attribut et un pour chaque contenu textuel.Dans lexemple de la figure 2.3, llment p a trois nuds enfants : le texte avant le em, leem et le texte aprs le em.Notons que, avec Firefox et dautres navigateurs, mais pas avec Internet Explorer, lescaractres entre et (retour chariot et quelques blancs) forment aussi un nudtexte de larbre. Nous y reviendrons quand nous traiterons de DOM.

Nous pouvons identifier nimporte quel lment dans le fichier HTML en lui ajoutant unattribut id="unId". En JavaScript, nous rcuprons le nud correspondant pardocument.getElementById("unId"), et son contenu par la proprit innerHTML, qui est enlecture/criture :

Quelques dtails.

var ele = document.getElementById("detail");alert(ele.innerHTML); // affiche "Quelques dtails."

Dans lexemple de la figure 2.1, nous avons le HTML suivant :

Haddock Castafiore Tournesol Cliquer sur un personnage pour avoir des dtails

Imbrication des botesLe navigateur cre pour chaque lment une bote quil affiche lcran. Si un lment A englobe unlment B, comme dans notre exemple p englobe em, la bote affichant A englobera la bote affichant B :aux imbrications de balises rpondent les imbrications de botes.Si un lment A contient les lments B puis C, sa bote contiendra la bote de B puis la bote de C, lordredes botes tant identique celui des lments dans le fichier et dans larbre.


Plus loin, nous avons des div dans un div (masqu par style="display:none", comme nousle verrons la section suivante) :

Archibald Haddock, capitaine au long cours Bianca Castafiore, rossignol milanais Tryphon Tournesol, inventeur de gnie

Quant la fonction detailler, voici la partie de son code qui nous intresse :function detailler(index) { var id = "detail" + index; var donnees = document.getElementById(id).innerHTML; document.getElementById("detail").innerHTML = donnees; // Et le code pour mettre en exergue le personnage detaille}

Les CSS (Cascading Style Sheet) lcran, les lments HTML sont rendus par des botes, dont lapparence peut tre fine-ment contrle par les CSS. Nous allons dans cette section en rappeler les aspects princi-paux.Pour les CSS, un style correspond un ensemble de directives, comme background:whiteou margin:2px.

Nous pouvons spcifier le style de llment en trois endroits : En attribut de llment : . Cest le style dit

inline. Dans une feuille de style interne la page, dans llment style enfant de llment

head. Cest le cas de lexemple du tableau 2.1. Dans une feuille de style externe, spcifie par un lment link enfant de head : . Lintrt est bien sr que lafeuille de style peut ds lors tre utilise par un ensemble de pages. Le fichieruneCSS.css ne doit contenir que du CSS, sans balises.

En JavaScript, tout lment de larbre possde un attribut style, et chaque directive CSSen devient une proprit, son nom tant camlis . Par exemple, font-size devientfontSize.

Pour un lment dclar ainsi :Du texte justifi

Nous obtenons en JavaScript :var ele = document.getElementById("exemple");alert(ele.style.textAlign); // affiche "justify"

Dveloppez en Ajax30

Nous pouvons modifier le style de llment de la faon suivante :ele.style.background = "#DDDDDD";

Ainsi, si nous avons :

...

var style = document.getElementById("ex").stylealert(style.color); // affiche "navy"alert(style.textAlign); // affiche ""

Regardons maintenant le code complet de la fonction detailler :// Les ids des zones cliquables var ids = ["id1", "id2", "id3"];

function detailler(index) { // Afficher les details du personnage d'index donne var id = "detail" + index; var donnees = document.getElementById(id).innerHTML; document.getElementById("detail").innerHTML = donnees; // Mettre les personnages au style par defaut for (var i=0 ; i


La rgle suivante, mise dans une feuille de style interne, indique que tous les p et les liauront une couleur navy :

p, li { color: navy;}

Pour le paragraphe suivant :Un paragraphe en vert

la couleur est spcifie la fois dans le style inline et dans la feuille de style interne. Ladirective qui va lemporter sera la plus spcifique. Plus prcisment, si une mme direc-tive sapplique un lment parce quelle figure en plusieurs emplacements, le naviga-teur retient la plus spcifique : dabord celle en attribut, puis en feuille de style interne,puis en feuille de style externe. Sil y a plusieurs feuilles externes, la dernire lemporte.

Il existe trois types de slecteurs de base :

Un nom de balise : les directives sappliquent tous les lments de ce type. Le signetoile (*) plutt quun nom signifie : tout lment.

.nomDeClasse : les directives sappliquent tous les lments portant un attributclass="nomDeClasse".

#idElement : les directives sappliquent seulement llment (unique) de id idElement.Lattribut class a le plus souvent une valeur unique. Cependant, il est possible den indi-quer plusieurs, en les sparant par une espace. Par exemple :

etc.

Les slecteurs de base peuvent tre combins : "p, li" veut dire pour tous les p et tousles li , tandis que "td td" veut dire les td descendants dun td (autrement dit lescellules des tableaux imbriqus).Les slecteurs a:hover ou a:visited indiquent les liens quand la souris est dessus ouquand ils ont dj t visits.Dans lexemple suivant :

p, li { background: white;}.grise, ul.grise li { background: #DDDDDD;}#fonce { background: #BBBBBB;}

Dveloppez en Ajax32

les p et les li ont un fond blanc, les lments dont lattribut class vaut "grise" et les lienfants dun ul de class "grise" ont un fond de couleur #DDDDDD, et llment de id foncea un fond de couleur #BBBBBB.Si nous avons :

Un titre grisDu texte sur fond blancUn texte sur fond fonc

le titre a un fond de couleur #DDDDDD, le paragraphe un fond blanc, et le div un fond decouleur #BBBBBB.Dans lexemple suivant, o plusieurs rgles aussi spcifiques sappliquent un mmelment :

Un paragraphe grisUn paragraphe sur fond fonc

Une ligne sur fond gris

le id lemporte sur le class, qui lemporte sur la balise.Plus prcisment, si, pour un lment et une mme directive, plusieurs rgles sappli-quent, le navigateur retient celle dont la prcdence est la plus grande, celle-ci tantcalcule partir du slecteur de la rgle. Nous ajoutons le nombre de balises, le nombrede classes (par exemple .grise) multipli par 10, et le nombre de id (par exemple #fonce)multipli par 100.Dans notre exemple, nous avons trois rgles pour la directive background du secondparagraphe : celle sur le p, qui pse 1, celle sur le .grise, qui pse 10, et celle sur le#fonce, qui pse 100. Cest donc cette dernire qui lemporte.Quant au li, nous avons la rgle de slecteur li, qui pse 1, et celle du slecteur ul.griseli, qui pse 1 + 10 + 1 = 12. Cest donc cette dernire qui lemporte.

Botes et dimensionsNous pouvons spcifier les marges internes (padding) et externes (margin) des botes, ainsique la bordure (border), par dfaut invisible pour la plupart des lments. Cest ce quemontre la figure 2.5.Les longueurs CSS sexpriment en units absolues, comme le pixel (px), ou relatives.Celles-ci comprennent la hauteur du caractre x dans la police de llment (ex), la taillede la police (em) ou le pourcentage (par exemple, 50%), celui-ci tant rserv certainesdirectives, comme la largeur (width). Lavantage des units relatives est de sadapter auxprfrences de lutilisateur.Par dfaut, les botes saffichent dans un seul flot (nous dirons sur un seul calque). Certainesoccupent toute la largeur de la bote englobante, provoquant un retour la ligne avant et aprselles. Cest le cas des p, div, table et li. Dautres, comme les a, input ou em, restent dans leflot du contenu qui les prcde et les suit. Cest ce que nous constatons la figure 2.6.


En termes CSS, cela signifie que leur directive display vaut block pour les premiers etinline pour les seconds. Dautres valeurs prvues par la norme sont diversement bienimplmentes dans les navigateurs.

Figure 2.5 Marges des botes en CSS

Figure 2.6 Affichage block ou inline des lments

Contenu de l 'lment

margin

border(border-width,border-style ,border-color)

padding

Taille des botes : width et heightLes directives width et height, qui contrlent la taille des botes, sont interprtes diffremment selon lenavigateur : Internet Explorer considre que ces tailles incluent la marge interne et la bordure, aucontraire des autres navigateurs, qui suivent la recommandation W3C, pour qui elles indiquent unique-ment la taille du contenu.Cette diffrence dinterprtation cause des diffrences de rendu, qui fragilisent lutilisation des directives detaille.La signification donne par le W3C est quelque peu bizarre. Il est cependant possible de la changer encelle donne par Microsoft, grce la directive box-sizing, ajoute dans CSS 3 et supporte par Mozillasous le nom moz-box-sizing et par Opera :box-sizing: border-box; /* la taille inclue border et padding */-moz-box-sizing : border-box ; /* pour Mozilla */

Dveloppez en Ajax34

Afficher/masquer un lmentPour cacher un lment ou le mettre sa valeur par dfaut, nous crivons :

element.style.display = "none"; // masque l'elementelement.style.display = ""; // retablit son affichage par defaut

Ces deux lignes sont dusage trs frquent. De nombreux sites montrent des zonescomposes dun titre et dun corps, ce dernier tant affich ou masqu par un clic sur letitre, comme dans lexemple illustr la figure 2.7.

Voici le code de cet exemple :

.infoBox { border: solid 1px #BBCCDD; width: 15em; } .infoBoxHeader { background: #DAEAF0; cursor: pointer; text-align: center; font-weight: bold; } .infoBoxBody { background: #F0F7FA; } // Affiche ou masque les details dune zone// idDetail : id de l'element contenant le detailfunction toggle(idDetail) { var style = document.getElementById(idDetail).style; style.display = (style.display == "none") ? "" : "none";} Afficher/masquer

Figure 2.7 Afficher/masquer des lments


La mto Ici les donnes Mto Temprature, ciel, vent

Nous commenons par dfinir trois classes CSS pour la bote dinformations, son en-tteet son corps, de faon pouvoir rutiliser ces styles. Idalement, il faudrait les mettredans une feuille de style externe.La fonction toggle regarde simplement si llment de id pass en paramtre est masqu,auquel cas elle le met son affichage par dfaut. Sinon, elle le masque. Notons aupassage laffectation conditionnelle :

a = (booleen) ? valeurSiTrue : valeurSiFalse;

Cette criture trs frquente, notamment dans les frameworks et les bibliothques decomposants, a lavantage de la concision, mme si nous pouvons objecter sa lisibilit.En fait, cest une question dhabitude et, bien sr, de complexit du boolen et desvaleurs affecter.

Les calques et le positionnement des botesLa directive visibility est voisine de display. Si elle vaut visible, llment apparatnormalement ; si elle vaut hidden, llment disparat, mais, la diffrence de display, laplace quil occupait demeure, et lutilisateur voit une zone vide la place.Nous pouvons faire sortir une bote du flot normal en donnant la directive position unevaleur autre que la valeur par dfaut static. La bote dfinit alors un nouveau flot pourses lments descendants, pour lesquels elle est considre comme le bloc conteneur(containing block). Un bloc conteneur est la racine dun flot. Pour le flot normal, le blocconteneur est llment html.La position dune bote est dfinie par les coordonnes de son coin suprieur gauche parrapport celui de son bloc conteneur. Pour les botes dans le flot, cette position est calcu-le par le navigateur en fonction des marges et des tailles des botes englobantes ouprcdentes. Pour les autres, ces coordonnes sont spcifies par les directives left ettop, dune part, et la directive position, dautre part.Si la directive position vaut : absolute : les coordonnes sont relatives au bloc conteneur. La bote disparat du flot de

ce bloc et ny occupe plus aucune place.

Dveloppez en Ajax36

fixed : les coordonnes sont relatives au coin suprieur gauche de la fentre. Lutilisa-teur voit toujours la bote au mme endroit de la fentre, mme sil fait dfiler la page.Notons que cela ne fonctionne pas dans Internet Explorer 6.

relative : les coordonnes sont relatives la position quaurait la bote si elle tait dansle flot. La place quelle y occuperait est remplace par une zone vide, un peu commepour visibility:hidden.

Si la page contient plusieurs flots, cest--dire au moins un lment avec une positiondiffrente de static, ceux-ci peuvent se superposer, comme lillustre la figure 2.9 (posi-tion absolute). Certains les appellent pour cela des calques. La directive z-index permetde spcifier lordre de superposition. Elle prend pour valeur un entier : si le z-index duncalque A est suprieur celui dun calque B, A est au-dessus de B. Par dfaut, le flotnormal a un z-index de 0, spcifiant que tout lment sortant du flot se retrouve en avant-plan du flot normal.Cest du moins ce que prvoit la norme, mais nous pouvons avoir des surprises. Si nousouvrons dans Internet Explorer la page illustre aux figures 2.8 2.10 et que la zone quenous positionnons de faon absolue se retrouve sur du texte, pas de problme. Par contre,si elle chevauche une des listes droules, elle se retrouve en dessous de cette dernire.Dune faon gnrale, il est prudent en matire de CSS de vrifier dans les navigateursque nous obtenons bien leffet escompt.Les figures 2.8 2.10 montrent leffet de la directive position sur une bote. Sur lafigure 2.8, la bote 2e div est dans le flot, entre 1er div et 3e div. Les directives top et leftsont sans aucun effet sur la bote.

Figure 2.8 Positionnement dans le flot


La figure 2.10 illustre le positionnement relatif. Avec les mmes valeurs de top et leftque pour le positionnement absolu, la bote se trouve un endroit trs diffrent : elle est60 pixels en dessous de la place quelle occuperait dans le flot. Celle-ci est toujours visi-ble, remplie simplement par du vide.