7 jours d'essai offerts
Cet ouvrage et des milliers d'autres sont disponibles en abonnement pour 8,99€/mois
ou
Achetez pour : 25,99 €

Lecture en ligne + Téléchargement

Format(s) : PDF

sans DRM

Publications similaires

XUL

de editions-eyrolles

Bien développer pour le Web 2.0

de editions-eyrolles

Vous aimerez aussi

Pokémon GO 100% non officiel

de editions-eyrolles

J'arrête la malbouffe !

de editions-eyrolles

Le pouvoir des gentils

de editions-eyrolles

suivant

Développez
Ajax
en
Avec quinze exemples de composants
réutilisables et une étude de cas détaillée

M i c h e lP l a s s e

Remerciements

Mes remerciements vont aux personnes suivantes :
ToutdÕabordOlivierSalvatori,quisÕestchargÈdelarelecturedecetouvrageetde
lÕimportanttravaildÕindexation.SarelectureconstructiveetprÈcise,sarÈactivitÈetla
qualitÈ de son Ècoute ont ÈtÈ motivantes et instructives.
EricPruvost,quimÕasuggÈrÈdÕÈcrireunlivresurAjax.NosdiscussionsfrÈquenteset
notreÈtroitecollaborationdepuisdesannÈesontalimentÈmarÈßexion,notamment
concernant les architectures Web et les bonnes pratiques de dÈveloppement.
Paul Athanassiadis, qui a suivi de prËs les investigations sur les diffÈrentes questions
soulevÈes par Ajax, tant techniques que conceptuelles ou fonctionnelles, et a examinÈ les
exemplesetlecodedÕunegrandepartiedelÕouvrage.
BenoÓtGandon,quiaÈgalementexaminÈlesexemplesetlecodedÕunepartiede
lÕouvrage.
EnÞn,EmmanuelleGautieretJoÎlRigoult,quimÕontmisenrelationaveclesÈditions
Eyrolles.

Avantpropos

PopularisÈ par des sites innovants tels que Google Suggest, Google Maps, les webmails
de Google et Yahoo, writely, iRows ou netvibes, Ajax (Asynchronous JavaScript And
XML) est un ensemble de technologies permettant de construire des applications Web de
nouvelle gÈnÈration, comparables en fonctionnalitÈs aux applications natives Windows
ou Mac OS.
Ajax associe le HTML dynamique, qui permet de modiÞer le contenu ou lÕapparence de
la page localement (sans redemander une nouvelle page au serveur), avec des appels
asynchrones au serveur, qui rÈcupËrent juste les fragments ‡ mettre ‡ jour. Ces technolo-
giesexistantdepuisplusieursannÈes,AjaxestdisponibleaujourdÕhuidanslesnaviga-
teurs installÈs, tels Internet Explorer 6, Firefox 1.x,Safari 1.3, Opera 8.5, etc.
Ajax rend les applications Web plus rÈactives et leurs interfaces utilisateur plus riches.
La rÈactivitÈ tient ‡ trois facteurs :
¥FluiditÈ:lesÈchangesavecleserveursont‡lafoisplusfrÈquentsetdÕunvolumeplus
rÈduit, ce qui ´ lisse ª la mise ‡ jour dans le temps. De plus, ces mises ‡ jour Ètant
asynchrones,ellespeuventsedÈroulerenparallËleetnebloquentpaslÕutilisateur.
¥RapiditÈ:lesÈchangesÈtantdÕunvolumeplusrÈduit,letransfertestplusrapide,de
mÍmequeletraitementlocalpourmettre‡jourlÕafÞchage.
¥SensibilitÈ:lesapplicationpeuventrÈagir‡plusdÕÈvÈnements,notamment‡ceuxliÈs
‡ la saisie clavier.
LarichessedÕinterfacetientaussi‡troisfacteurs:
¥ Richessedes composants graphiques : en plus des formulaires et des liens, qui sont, en
HTML, les principaux ÈlÈments rÈactifs, il est possible de disposer dÕonglets, de boÓtes
ßottantes,dÕarborescences,demenus,dÕinfo-bulles,decalendriers,etc.
¥ Supportdu glisser-dÈposer et, dans une certaine mesure, de mÈcanismes de dÈfaire/refaire.
¥ Supportde lÕÈdition WYSIWYG.
Les applications Ajax combinent ainsi la puissance et la qualitÈ de lÕinterface utilisateur
duclientlourdaveclÕabsencededÈploiementduclientlÈger,constituantparl‡cequÕon
appelle aujourdÕhui le client riche.

DŽveloppez en Ajax
IV

Objectifs de lÕouvrage
Cet ouvrage vise ‡ guider le lecteur dans la rÈalisation dÕapplications Ajax. Il couvre trois
grandsaxes:lestechnologiesconstitutivesdÕAjax,lesquestionsfonctionnellesettechni-
quessoulevÈes,aveclesrÈponsesquÕilestpossibledÕyapporter,etenÞnlesmÈthodeset
outilsquifacilitentetrendentpluss˚rledÈveloppement.
Les technologies comportent :
¥ LeHTML dynamique, cÕest-‡-dire DOM (Document Object Model), ou modËle objet
du document, et les CSS (Cascading Style Sheets), ou feuilles de style en cascade,
combinÈs avec JavaScript.
¥XMLHttpRequesttpircSaattemrepÕol,avJetbjays-nutcedredtnffeÕsteTPHTresuÍeq
chrones vers le serveur.
¥ JSON(JavaScript Object Notation), ou notation objet en JavaScript, ainsi que XML et
les technologies associÈes, notamment XSLT et XPath.
Les questions soulevÈes concernent la gestion des appels asynchrones, la conception et
lÕutilisation de composants graphiques (comme la suggestion de saisie) ou fonctionnels
(comme un panier dans une application de vente en ligne), la complexitÈ du code
JavaScriptinduiteparlarichessedesfonctionnalitÈsduclientetlÕintÈgrationdÕAjax
dans les applications Web existantes.
Les solutions ‡ ces problËmes reposent en grande partie sur des mÈthodes et des
frameworks:pourfaireface‡lacomplexitÈducode,celui-cidoitÍtreconÁudefaÁon
modulaire, en faisant appel ‡ la programmation objet de JavaScript, ‡ des bibliothËques
decomposantsJavaScriptet‡unearchitectureMVC(modËle,vue,contrÙleur).
CettederniËre,quiadÈmontrÈsavaleurcÙtÈserveurainsiquedanslesapplications‡
clientlourd,serÈvËledÈsormaisutileaussicÙtÈclientenWeb.Elleseprolongeparla
sÈparation nette entre le code HTML, concentrÈ sur la structure et le contenu, le code
JavaScriptenchargeducomportement,etlesCSS,quigouvernentlÕapparence.
LesmÈthodesvalantavanttoutparlÕexemple(´faitescequejefaisªÈtantencette
matiËreplusefÞcaceque´faitescequejedisª),ellessontconstammentmisesenprati-
que dans cet ouvrage.
LÕobjectifdecelui-ciesteneffetdouble:installerchezlelecteurdesbasessolidesetle
rendreopÈrationnelrapidement‡traversdesrÈalisationsdÕampleurprogressive,le
dernier chapitre incluant une Ètude de cas illustrant comment concevoir et rÈaliser une
application ´ ajaxiÞÈe ª.

Organisation de lÕouvrage

Dans chaque chapitre, lÕouvrage part du besoin, lÕobjectif ‡ atteindre, et guide progressi-
vement le lecteur vers cet objectif. La succession des chapitres vise Ègalement ‡ faciliter
cetteprogression.LÕexplicationdestechniquesestillustrÈepardesexemples,quele

Avantpropos
V

lecteurpourra,danscertainscas,rÈutiliserdanssespropresprojets.LÕauteurinsistesur
les fondements de chaque technologie et les pratiques conseillÈes et indique les points
dÈlicats, facteurs de bogues frÈquents.

Lechapitre1examinecequÕapporteAjaxetlistenotammentlescastypiqueso˘iloffre
un rÈel avantage. Une grande partie des exemples prÈsentÈs ici sont dÈveloppÈs dans les
chapitressuivants.LesfonctionsetlecodedÕunexemplesimplesontexaminÈsendÈtail
aÞndemontrercommentsÕimbriquentlesdiffÈrentescomposantesducode.

IlnÕestpaspossibledefairedelÕAjaxsansfaireduHTMLdynamique,quiconsiste‡
modiÞerlecontenu,lastructureoulÕapparencedÕunepageWebsansaucunappelau
serveur. La rÈciproque est fausse. Aussi est-il plus facile de commencer par le HTML
dynamique, auquel le chapitre 2 est consacrÈ. Ce chapitre fait un point sur les feuilles de
style CSS et sur lÕAPI DOM, qui permet de manipuler la structure, le contenu et lÕappa-
rencedelapageWebetdegÈrerlesÈvÈnementsliÈsauxactionsdelÕutilisateur.

Les applications Ajax faisant massivement appel ‡ des composants, le chapitre3 se
penche sur les aspects objet et avancÈs de JavaScript, qui sont trËs particuliers et peuvent
ÍtredÈroutantstantpourlesdÈveloppeursJavaouC#quepourceuxquinÕontpasune
grande habitude de la programmation objet. Le chapitre est illustrÈ par la crÈation de
composants graphiques et dÕune suggestion de saisie en local (comme sur le site de la
RATP). Ce chapitre est fondamental, car tous les exemples des chapitres suivants cons-
truisent(oufontappel‡)descomposantsJavaScript.

Le chapitre 4 est dÈdiÈ ‡ la communication avec le serveurviades requÍtesXMLHttpRequest.
AprËs un point sur le protocole HTTP, il examine les questions soulevÈes par les appels
Ajax : gestion du cache, mÈthodesGETetPOST, requÍtes parallËles, cookies, sÈcuritÈ. Les
exemples incluent une suggestion de saisie par appels au serveur et la mise ‡ jour dyna-
mique dÕune liste dÈroulante, rÈalisÈes sous forme de composants.

Lechapitre5traitedelÕÈchangededonnÈesXMLouJSONentreleclientetleserveur.
IlexamineetcomparelesdiffÈrentsformatsdÕÈchanges(texte,HTML,XMLetJSON).
Les spÈciÞcitÈs de XML et de son DOM par rapport au HTML y sont indiquÈes. Il traite
aussi de XSLT (transformations XML) et XPath. Les technologies sont illustrÈes par un
lecteurRSS,dÕaborddansuneversionsimplefaisantappel‡DOM,puisdansune
version plus ÈlaborÈe faisant appel ‡ XSLT.

Le chapitre 6 aborde les ´ frameworks ª Ajax. Il commence par diffÈrencier bibliothË-
ques et frameworks, puis examine les critËres de choix ‡ prendre en compte et compare
les produits disponibles. Il Ètudie en particulier dojo et prototype.js, les deux bibliothË-
ques les plus anciennes et, semble-t-il, les plus utilisÈes actuellement. Le chapitre est
illustrÈdenombreuxexemplesdÕutilisation,notammentunemiseenÏuvreduglisser-
dÈposer et un Èditeur WYSIWYG.

Lechapitre7etdernierestconsacrÈauxapplicationsAjaxetWeb2.0.CÕestleplus
importantdupointdevuedelaconceptionetdelÕarchitecture.Ilexaminelesquestions
soulevÈesparAjax,enparticulierlÕabsencedesupportdesactionsPageprÈcÈdenteet
Ajouterauxfavoris.IldÈtaillelÕimpactdÕAjaxsurlesarchitecturesWeb,enparticulierle

DŽveloppez en Ajax
VI

modËle MVC. Une Ètude de cas conclut le chapitre et lÕouvrage en montrant quÕau MVC
cÙtÈserveursÕadjointdanslescascomplexesunMVCcÙtÈclient.
Chaque chapitre sÕappuie sur les connaissances acquises au cours des chapitres prÈcÈ-
dents et les enrichit. ¿ lÕissue de ce parcours, le lecteur aura un bagage solide et dispo-
sera de composants directement utilisables, lui permettant dÕaborder ses projets Ajax en
Ètant opÈrationnel.

Table des matires

RemerciementsI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Avantpropos .III. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Objectifs de lÕouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .IV
OrganisationdelÕouvrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .IV

CHAPITRE 1
Introduction ˆ Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
QuÕest-ce quÕAjax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mise ‡ jour dÕune partie de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Communication asynchrone avec le serveur. . . . . . . . . . . . . . . . . . . . . . . .
TechniquesmisesenÏuvre.....................................
Exemples typiques o˘ Ajax est utile. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Validationetmise‡jourdÕunepartiedelapage....................
Aide ‡ la saisie, notamment suggestion de saisie. . . . . . . . . . . . . . . . . . . .
Lecture de ßux RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tri,ÞltrageetrÈorganisationdedonnÈescÙtÈclient..................
…dition WYSIWYG de documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Diaporamas et autres applications documentaires . . . . . . . . . . . . . . . . . . . .
DÈbranchement dans un scÈnario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Visualisation graphique avec SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
RafraÓchissement dÕune branche dÕune arborescence. . . . . . . . . . . . . . . . .
Chargement progressif de donnÈes volumineuses . . . . . . . . . . . . . . . . . . . .
Exemple Ajax simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
LecodecÙtÈserveur..........................................
Le code cÙtÈ client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La requÍteXMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1
1
2
3
4
5
5
7
8
9
10
11
12
13
13
14
14
17
18
22

DŽveloppez en Ajax
VIII

Conclusion23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 2
Le HTML dynamique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Balises, arbre et boÓtes HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les CSS (Cascading Style Sheet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les rËgles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
BoÓtes et dimensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
AfÞcher/masquerunÈlÈment....................................
Les calques et le positionnement des boÓtes. . . . . . . . . . . . . . . . . . . . . . . .
DOM (Document Object Model) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les interfaces DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Peupler une liste de suggestions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Positionnement de la liste de suggestions. . . . . . . . . . . . . . . . . . . . . . . . . .
RÈcupÈration de nÏuds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DOM Events .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
…vÈnementsreconnusparlesnavigateurs..........................
Programmation ÈvÈnementielle mais traitement sÈquentiel. . . . . . . . . . . .
Association dÕune rÈaction ‡ un ÈvÈnement. . . . . . . . . . . . . . . . . . . . . . . .
Ordre des ÈvÈnements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Propagation des ÈvÈnements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les ÈvÈnements clavier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les ÈvÈnements liÈs ‡ la souris. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
En rÈsumÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 3
Les composants JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
OutilsdÕaideaudÈveloppement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
FonctionnalitÈs objet de JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DiffÈrences avec Java, Eiffel et C#. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les objets JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La notation JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les fonctions anonymes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le mot-clÈthis .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les constructeurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25
26
29
30
32
34
35
40
41
43
44
46
48
49
50
51
53
56
60
63
65
65

67
68
69
70
71
73
74
78
79

Table des matires
IX

Les prototypes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le mÈcanisme de fermeture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
this. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .et les ÈvÈnements
En rÈsumÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CrÈation de composants JavaScript rÈutilisables . . . . . . . . . . . . . . . . . .
La boÓte dÕinformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Suggestion de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 4
Communication avec le serveurvia XMLHttpRequest . . . . . .
LÕobjetXMLHttpRequest. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rappels sur HTTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Instanciation dÕune requÍteXMLHttpRequest. . . . . . . . . . . . . . . . . . . . . . .
RequÍtes synchrones ou asynchrones ? . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cycle de vie de la requÍte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XMLHttpRequestet la sÈcuritÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestion du cache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les problËmes dÕencodage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les requÍtes parallËles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
En rÈsumÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Applications exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Suggestion de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mise ‡ jour dÕune partie de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 5
ƒchange de donnŽes en XML ou JSON. . . . . . . . . . . . . . . . . . . . . .
XML (eXtensible Markup Language) .. . . . . . . . . . . . . . . . . . . . . . . . . .
Documents bien formÈs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Choix de la structure des donnÈes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le DOM XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La mise ‡ jour partielle avec XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
JSON (JavaScript Object Notation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Communication JSON entre JavaScript et PHP. . . . . . . . . . . . . . . . . . . . .

81
91
92
94
94
94
105
112
127

129
130
130
135
137
138
143
143
148
152
157
157
157
166
175

177
178
178
182
186
187
189
191

DŽveloppez en Ajax
X

La mise ‡ jour partielle avec JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ComparaisondesformatsdÕÈchange. . . . . . . . . . . . . . . . . . . . . . . . . . . .
ExempledÕapplicationaveclesßuxRSS .. . . . . . . . . . . . . . . . . . . . . . . .
Les formats RSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le serveur comme mandataire HTTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le composant lecteur de RSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
AfÞchagedußux.............................................
En rÈsumÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XSLT (eXtensible Stylesheet Language Transformations) .. . . . . . . . .
XPath .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fonctionnement de XSLT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La syntaxe XSLT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les espaces de noms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exemple de transformation XSLT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ExempledÕapplicationdelecteurRSSavecXSLT . . . . . . . . . . . . . . . . .
Le composantXSLView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La transformation XSLT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La page HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 6
Les Ç frameworks È Ajax .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
BoÓtes ‡ outils, bibliothËques et frameworks . . . . . . . . . . . . . . . . . . . . . .
Les bibliothËques JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
prototype.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fonctions et objets utilitaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Encapsulation et extensions de DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les appelsXMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
script.aculo.us. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
rico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . .
dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fonctions et objets utilitaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Encapsulation et extensions de DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les appels Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

193
195
197
198
200
201
204
207
208
209
211
212
215
216
219
221
224
226
230

233
233
235
236
237
240
242
245
247
249
252
255
256
261

Table des matires
XI

…dition WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
En rÈsumÈ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Yahoo User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 7
Les applications Ajax et Web 2.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Questions fonctionnelles soulevÈes par Ajax . . . . . . . . . . . . . . . . . . . . . .
Single Page Application, ou navigation classique ?. . . . . . . . . . . . . . . . . .
Historique dÕune session utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
LÕactionPageprÈcÈdente.......................................
LÕactionAjouterauxfavoris....................................
LÕhistoriquedenavigationendojo...............................
Architecture des applications Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
…tude de cas : application de vente en ligne. . . . . . . . . . . . . . . . . . . . . . .
FonctionnalitÈs ‡ porter en Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Portage du panier en Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conception du panier en Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
GestiondupaniercÙtÈserveur..................................
Gestion du panier cÙtÈ client. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
AfÞchagedesproduits.........................................
Vue du panier sous forme de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Annexe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Couleurs systËme prÈdÈÞnies dans les CSS . . . . . . . . . . . . . . . . . . . . . . .
Statut des rÈponses HTTP .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
LÕobjetXMLHttpRequest .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

264
267
267
268

271
272
272
273
274
275
276
279
281
281
284
287
289
294
299
302
305

307
307
308
309

Index311. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

Introduction ˆ Ajax

InventÈ dÈbut2005 par Jesse J.Garrett, le terme Ajax (Asynchronous JavaScript And
XML) dÈsigne un ensemble de technologies existant depuis plusieurs annÈes, dont une
utilisation ingÈnieuse rend possibles des fonctionnalitÈs Web novatrices et utiles, qui
rencontrent un succËs grandissant depuis lÕapparition dÕapplications telles que Google
Suggest, Google Maps, writely, etc.
Gr‚ce‡Ajax,ilestpossibledeb‚tirdesapplicationsWebaucomportementtrËsproche
deceluidesapplicationsWindowsouMacOSnatives.LÕavantageessentieldÕAjaxrÈside
dansuneplusgranderÈactivitÈdelÕinterfaceparrapportauWebclassique.
Ce chapitre vise ‡ situer Ajax dans le monde du dÈveloppement Web. Il servira en outre
de base aux chapitres ultÈrieurs.
IlcommenceparexpliquercequÕestAjaxetlesavantagesquÕilapporteauxutilisateurs,
puis rÈpertorie les cas typiques o˘ il leur est utile. Plusieurs des exemples citÈs sont mis
enÏuvredanslerestedelÕouvrage.LechapitreestillustrÈparunexemplesimpleet
dÈmonstratif, dont le code est dÈtaillÈ.

QuÕestce quÕAjax ?
Nous allons tout dÕabord considÈrer lÕaspect fonctionnel dÕAjax, aÞn de montrer ce quÕil
apporte par rapport au Web classique.
Nous dÈtaillerons ensuite les technologies mises en Ïuvre, puisque Ajax nÕest pas en lui-
mÍmeunetechnologie,maisunensembledetechnologiesexistantes,combinÈesde
faÁonnouvelle.

DŽveloppez en Ajax
2

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 Þgure 1.1.

Figure 1.1
Communication
client/serveur en
Web classique

Client

Page
HTML

Page
HTML

RequÍte HTTP

RÈponse HTTP

RequÍte HTTP

RÈponse HTTP

Serveur

Par exemple, sur un site de commerce en ligne, lÕutilisateur demande une page, dans laquelle
il saisit ses critËres de recherche de produits. LorsquÕil valide le formulaire, une nouvelle page
lui indique les rÈsultats. Il peut alors, en cliquant sur le lien adÈquat, ajouter tel produit ‡ son
panier, ce qui ramËne une nouvelle page, par exemple la vue du panier, etc.
DanslaplupartdessitesWeb,lespagesontgÈnÈralementdespartiescommunes.IlsÕagit
notamment des liens vers les actions possibles sur le site, lesquels conservent le contexte
etpermettent‡lÕutilisateurdesavoiro˘ilenestetdÕaccÈderrapidementauxinforma-
tions ou aux actions possibles. Ces liens forment une sorte de menu, situÈ le plus souvent
en haut ou ‡ gauche des pages. Par exemple, pour un site de commerce, le panier de
lÕutilisateurestvisiblesurtouteslespagesouestaccessibledepuisunlien(souventsous
la forme dÕune icÙne reprÈsentant un Caddie).
Avec le Web classique, ces parties communes sont envoyÈes avec chaque rÈponse HTTP.
Lorsque le volume de donnÈes des ÈlÈments communs est faible par rapport ‡ celle des
ÈlÈments propres ‡ la page, cÕest sans grande consÈquence. Dans le cas contraire, ce
fonctionnement consomme inutilement une partie de la bande passante et ralentit lÕappli-
cation.Parexemple,silÕutilisateurmodiÞelaquantitÈdÕunarticledanssonpanier,seuls
deuxoutroispetitesportionsdelapagedevraientÍtremises‡jour:laquantitÈ(un
champ de saisie) et le nouveau montant de la ligne et du total. Le rapport est dans ce cas
totalement disproportionnÈ.

Introduction ˆ Ajax
3
CHAPITRE1

AvecAjax,ilestpossibledenemettre‡jourquÕunepartiedelapage,commelÕillustrela
Þgure1.2.LesrequÍtesHTTPsontenvoyÈesparuneinstructionJavaScriptenrÈaction‡
uneactiondelÕutilisateur.LarÈponseHTTPestÈgalementrÈcupÈrÈeparJavaScript,qui
peut dÈs lors mettre ‡ jour la page courante, gr‚ce ‡ DOM et aux CSS, qui constituent ce
quÕon appelle le HTML dynamique.

PlusieursrequÍtespeuventainsiÍtreÈmisesdepuisunemÍmepage,laquellesemet‡
jourpartiellement‡chaquerÈponse.LecasextrÍmeestconstituÈparuneapplication
rÈduite‡uneseulepage,touteslesrequÍtesÈtantÈmisesenAjax.Nousverronsau
chapitre 7 dans quels cas ce choix se montre judicieux.

DanslÕexempleprÈcÈdent,lorsquelÕutilisateurchangelaquantitÈdÕunproduitdansson
panier,unerequÍteHTTPestenvoyÈeparJavaScript.¿rÈceptiondelarÈponse,seules
les trois zones concernÈes sont mises ‡ jour. Le volume transitant sur le rÈseau est ainsi
rÈduit(drastiquementdanscetexemple),demÍmequeletravaildemandÈauserveur,qui
nÕa plus ‡ reconstruire toute la page. La communication peut dÈs lors Ítre plus rapide.

Figure 1.2
Communication
clientserveur en
Ajax

Client

Page
HTML

Communication asynchrone avec le serveur

RequÍte HTTP

RÈponse HTTP

RequÍte HTTP

RÈponse HTTP

RequÍte HTTP

RÈponse HTTP

Serveur

LadeuxiËmecaractÈristiquedÕAjaxestquelacommunicationavecleserveurvia
JavaScriptpeutÍtreasynchrone.seuaÈeoynvestnettasnasruevrrdealeteqeÍuaLr
rÈponse,letraitement‡effectuer‡larÈceptiondecelle-ciÈtantspÈciÞÈauparavant.
JavaScriptsechargedÕexÈcutercetraitementquandlarÈponsearrive.LÕutilisateurpeut
delasortecontinuer‡interagiraveclÕapplication,sansÍtrebloquÈparlÕattentedela
rÈponse, contrairement au Web classique. Cette caractÈristique est aussi importante que
la mise ‡ jour partielle des pages.

DŽveloppez en Ajax
4

Pour reprendre notre exemple, si nous rÈalisons en Ajax lÕajout dÕun produit au panier, lÕutili-
sateur peut ajouter un premier article, puis un second, sans devoir attendre que le premier soit
effectivement ajoutÈ. Si la mise ‡ jour des quantitÈs achetÈs est Ègalement rÈalisÈe en Ajax,
lÕutilisateur peut, sur la mÍme page, mettre ‡ jour cette quantitÈ et continuer ‡ ajouter des arti-
cles (ou ‡ en enlever). Nous mettrons dÕailleurs en Ïuvre ce cas au chapitre 7.

LesrequÍtespeuventainsisechevaucherdansletemps,commelÕillustrelaÞgure1.3.
Les applications gagnent ainsi en rapiditÈ et rÈactivitÈ.

Envoi de la
requÍte

RequÍte 1

Envoi de la
requÍte

RÈception et traitement
de la rÈponse

RequÍte 2

Envoi de la
requÍte

RÈception et traitement
de la rÈponse

Temps
Figure 1.3
Requtes Ajax asynchrones sÕexŽcutant en parallle

RequÍte 3

RÈception et traitement
de la rÈponse

LeparallÈlismedesrequÍtesHTTPenAjaxesttrËsutiledanslaplupartdescas.Ilexige
cependant parfois de prendre certaines prÈcautions, comme nous le verrons au chapitre 4.

Parexemple,silÕutilisateurvalidelepanier,ilfautluiinterdiredelemodiÞertantquela
validationnÕestpasterminÈeouabandonnÈe,aÞndÕÈviterdepossiblesincohÈrences.De
mÍme,cettevalidationdoitÍtreimpossibletantquedesrequÍtesmodiÞantcepaniersont
encours.AvantdÕutiliserdesrequÍtesasynchrones,ilconvientdoncdevÈriÞerquÕelles
nÕinduisent aucun problËme fonctionnel.

Techniques mises en Ïuvre
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ÈciÞer 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.

Introduction ˆ Ajax
5
CHAPITRE1

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navi-
gateurs,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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ÈÞxelÕobjet
XMLHttpRequestnt,amotpaomengnC.TtseÕtnemLSXlestechnsiqueiulaÕccinuqseqia,
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.

Exemples typiques o Ajax est utile

AjaxestbienadaptÈ‡certainsbesoinsmaispas‡dÕautres.SansattendredÕavoiruneidÈe
approfondie de ses tenants et aboutissants, nous dressons dans cette section une liste des
situations o˘ il se rÈvËle utile, voire prÈcieux.

PlusieursdesexemplesquisuiventserontmisenÏuvredanslasuitedelÕouvrage.

Validation et mise ˆ jour dÕune partie de la page
Reprenons notre exemple de boutique en ligne.
LÕutilisateurconsulteuncatalogue,ajoutedesarticles‡sonpanierpuisvalidecelui-ciet
paielacommandegÈnÈrÈe.Lorsdelavalidationdupanier,silÕutilisateurnesÕestpas
encore identiÞÈ, lÕapplication lui demande de saisir son identiÞant et son mot de passe ou
desÕenregistrersicenÕestdÈj‡fait.

DŽveloppez en Ajax
6

PrenonslecasdÕunutilisateurdÈj‡enregistrÈ.IlestdirigÈversunepagedÕidentiÞcation,
puis, aprËs validation, vers son panier. En Web classique, le serveur doit construire et
renvoyer deux fois la page de validation du panier. Avec Ajax, nous pouvons rester sur
cettepage,yafÞcherleformulairedÕidentiÞcation,et,lorsquelÕutilisateurvalidesa
saisie,lancerensous-mainunerequÍteauserveur,rÈcupÈrerlerÈsultatetlÕafÞcher.CÕest
alorsquelÕutilisateurpeutvalidersonpanier.
Les Þgures 1.4 et 1.5 illustrent cet usage. Notons ‡ la Þgure 1.5 lÕicÙne indiquant que la
requÍte est en cours de traitement.

Figure 1.4
Validation dÕun
formulaire sans
changer de page

Figure 1.5
LÕutilisateur a
validŽ le formulaire,
qui attend la
rŽponse



LÕavantage apportÈ par Ajax est ici double : lÕapplication va plus vite, puisque nous rÈdui-
sons le nombre de requÍtes et la taille de la rÈponse (un simple OK, ou un message
´ Utilisateur inconnu ª), et le dÈroulement est plus ßuide pour lÕutilisateur, qui peut mÍme
continuer sa saisie et changer, par exemple, la quantitÈ ‡ commander pour un article.
DÕautresavantagesdÕAjaxseretrouventdansdÕautrespartiesdusite.LÕidentiÞcationest
gÈnÈralement un prÈrequis pour des opÈrations telles que consulter ses commandes
passÈes, spÈciÞer des prÈfÈrences (Ma recherche, Mon proÞl). Si la requÍte dÕidentiÞca-
tion et sa rÈponse sont rÈduites au minimum, nous pouvons lÈgitimement espÈrer un allÈ-
gement non seulement dÕune opÈration, mais de lÕensemble de celles qui sont concernÈes
par lÕidentiÞcation.

Introduction ˆ Ajax
7
CHAPITRE1

Ce cas de Þgure se prÈsente dans toutes les situations o˘ une partie dÕun formulaire peut
ÍtrevalidÈeouutilisÈeindÈpendammentdureste,notammentlessuivantes:
¥QuandlÕutilisateurenregistreunclient,pourvÈriÞerlÕexistencedesoncodepostalet
proposerlaoulescommunescorrespondantes.Leplussouvent,ilynÕyenauneseule,
mais,enFrance,ilpeutyenavoirjusquÕ‡46pourunmÍmecodepostal.
¥DansuneapplicationdÕassurance,pourdÈclarerunsinistresurunvÈhicule.LÕutilisa-
teur indique lÕidentiÞant du vÈhicule, puis, pendant quÕil saisit les informations
concernantlesinistre,lÕapplicationinterrogeleserveuretramËnelesdonnÈescorres-
pondant au vÈhicule.
…videmment,silarequÍteauserveurestasynchrone,cÕest-‡-diresiellenebloquepas
lÕutilisateur,ilfautluimontrerparunpetitsigne,commeleGIFanimÈdeMozillapour
lechargement,queladonnÈeestentraindÍÕtrerÈcupÈrÈe.Cefeedbackest trËs important.
CetexempleesttraitÈendÈtail‡laÞndecechapitre.

Aide ˆ la saisie, notamment suggestion de saisie
Google Suggest a popularisÈ lÕusage de lÕaide ‡ la saisie : lÕutilisateur commence ‡ saisir
uneexpression,puis,‡chaquecaractËresaisi,lÕapplicationinterrogeleserveurdefaÁon
asynchrone,rÈcupËreles10expressionslesplusdemandÈescommenÁantparlÕexpres-
sionsaisieetlesafÞchesousformedeliste.LÕutilisateurpeutdÈslorssÈlectionnerlÕune
dÕelles, qui se place dans le champ de saisie.
LaÞgure1.6illustreunexempledesuggestiondesaisieo˘lÕutilisateuraentrÈ´ajaxª.

Figure 1.6
Google Suggest

DŽveloppez en Ajax
8

LesserveursdeGooglesontsirapidesquelesrÈponsesauxrequÍtessontquasiment
instantanÈes.TouteslesapplicationsnedisposentcependantpasdÕunetellepuissance.Il
faut en tenir compte quand nous implÈmentons cette technique, en ne lanÁant des requÍ-
tes que tous lesncaractËres saisis, ou lorsque la saisie comprend dÈj‡ncaractÈres.
SinousreprenonslÕexempledelasaisiedÕuncodepostal,nouspouvonsnedÈclencherla
requÍte destinÈe ‡ rÈcupÈrer les communes correspondantes que lorsque la saisie a atteint
5caractËresetannulercetterequÍtedÈsquelÕutilisateureffaceuncaractÈre.
NouspouvonsmÍmedanscertainscasÈvitertouslesallers-retoursversleserveur,‡
lÕimagedusitedelaRATP.PourfournirlÕitinÈrairedÕunestationdemÈtro‡uneautre,
cetteapplicationsuggËrelesstationsdontlenomcommenceparlasaisiedelÕutilisateur,
etce‡chaquecaractËreentrÈ.CÕestaussiinstantanÈquepratique.IlsufÞt,lorsduchar-
gementdelapage,dÕenvoyeraunavigateurunÞchiercontenantlenomdetoutesles
stations.LepoidsdeceÞchiernÕÈtantquede14Ko,cÕestuneidÈeparticuliËrementjudi-
cieuse.
LaquestionclÈ‡dÈterminerpoursavoirsÕilfautenvoyerlesrequÍtesauserveurouau
client rÈside dans le volume des donnÈes dans lesquelles il faut rechercher. Pour les
stations,ilestsipetitquÕilpeutÍtreenvoyÈintÈgralementsurleclient.Pourlescommu-
nes,oudesnomsdeclientsdansuneapplicationdÕassurance,ilexistedesdizainesoudes
centainesdemilliersdÕenregistrements,sibienquedesrequÍtesauserveursontindis-
pensables.
CetusagedÕAjaxsiavantageuxpourlesutilisateursexigeencontrepartieunevÈriÞca-
tion attentive des performances ainsi que de sa pertinence dans chaque cas. Faire des
suggestions quand lÕutilisateur saisit un numÈro de contrat nÕapporte pas nÈcessairement
grand-chose,alorsque,pourlenomdÕunproduitoudÕunclient,celaoffreunesortede
visibilitÈdelÕensembledesvaleurs,quipeutguiderlÕutilisateur.
La suggestion de saisie est traitÈe en dÈtail aux chapitres 3 (en version locale) et 4 (en
version communiquant avec le serveur).

Lecture de ßux RSS

LesßuxRSSsontunecomposantemajeuredecequelÕonappelleleWeb2.0.Comme
unepageHTML,unßuxRSSestlarÈponse‡unerequÍtefaite‡unserveurWeb,dontla
spÈciÞcitÈestdetransmettredesnouvelles(agencesdepresse,journauxenligne,blogs,
nouvellesdÕunsite)ayantunestructureprÈdÈÞnie.Cettestructurecontientessentielle-
ment une liste dÕarticles portant un titre, un rÈsumÈ, une date de mise en ligne et lÕadresse
de lÕarticle complet. Qui dit information structurÈe, dit XML, si bien quÕun ßux RSS est
un document XML.

AvecAjax,ilestpossiblederÈcupÈrerdetelsßuxdansunepageWeb,delesafÞcheren
HTML selon la forme souhaitÈe et de les faire se mettre ‡ jour ‡ intervalles rÈguliers.

Le sitewww.netvibes.comillustrÈ ‡ la Þgure 1.7 donne un exemple dÕun tel usage. Nous y
voyonsplusieursboÓtes,uneparßux:‡gauche,unßuxprovenantdetechno-science.net

Introduction ˆ Ajax
9
CHAPITRE1

et,‡cÙtÈ,unßuxprovenantdublogdenetvibes,lÕÈlÈmentdedroiteÈtantsimplement
une zone de contenu statique.
Le site netvibes ajoute ‡ cette fonctionnalitÈ la possibilitÈ de dÈplacer les boÓtes sur la
pageparglisser-dÈposer,cequiamÈlioreencoresonergonomie.LÕintÈgrationdÕuneforte
proportion de HTML dynamique est une constante des applications Ajax.
Une lecture de ßux RSS proche de celle denetvibes.comest dÈtaillÈe au chapitre 5.

Figure 1.7
AfÞchage
de ßux RSS par le
site netvibes

Tri, Þltrage et rŽorganisation de donnŽes c™tŽ client

IlesttrËsfrÈquentdÕafÞcher‡lÕutilisateurlesrÈsultatsdÕunerecherchesousformede
tableau, en lui permettant de trier les rÈsultats par un clic sur une colonne, comme dans
lÕExplorateurdeWindows,leslogicielsdemessagerieetbiendÕautresapplications.Ilest
aussiparfoisutiledeluipermettredeÞltrerlesrÈsultatssuivantteloutelcritÈre.

Il arrive assez frÈquemment que ces rÈsultats ne dÈpassent pas la centaine ou un volume
delÕordrede50Ko,parexemplequandlesdonnÈescorrespondent‡unesous-catÈgorie
telle que salariÈs dÕun dÈpartement dans une application de ressources humaines,
produits dÕun rayon dans une gestion de stock, etc.

Comme les donnÈes sont sur le client, ce serait du g‚chis que de lancer chaque fois une
requÍteauserveur.UneexcellentefaÁondelÕÈviterestdetransmettrelesdonnÈesen
XMLetdelesafÞcheraumoyendetransformationsXSLTeffectuÈescÙtÈclient.Lestris
et Þltrages Ètant instantanÈs, cÕest l‡ lÕun des emplois les plus puissants dÕAjax et qui
illustrenonleA(asynchronous)delÕacronymemaisleX(XML).

DŽveloppez en Ajax
10

LaÞgure1.8illustreunepageafÞchantdesÈlÈmentsdÕunelisteenfonctiondecritËres
de recherche.

Figure 1.8
Filtrage de donnŽes sur le poste client

DÈs que lÕutilisateur modiÞe un critËre, le tableau change instantanÈment: seuls les
ÈtablissementsouvertsauxheuresetjoursindiquÈssontafÞchÈs,etlacolonnecorres-
pondantaujourcourant(jeudidanslÕexemple)estmiseenexergue(sonfondchangede
couleur).

NoustraitonsendÈtailauchapitre5unexempleÈquivalent,o˘lesdonnÈessontdesßux
RSS.

ƒdition WYSIWYG de documents

IlsÕagiticidesauvegarderdesdocumentsplutÙtquedesoumettredesformulaires.Il
peut sÕagir de documents HTML ou de toutes sortes de documents structurÈs rÈguliËre-
mentmanipulÈsparlesentreprises,commelesnotesdefrais.LÕutilisateurpeutcliquer
surunboutonpoursauvegardersondocument,toutencontinuant‡lÕÈditer.Pourle
sauvegarder,lÕapplicationlanceunerequÍteasynchrone,dontlecorpscontientledocu-
ment.LÕÈditionfaitpoursapartunrecoursmassifauHTMLdynamique.

Introduction ˆ Ajax
11
CHAPITRE1

IlfautprÈvoirunboutonEditer/TerminerlÕÈdition,aÞndeverrouiller/dÈverrouillerle
document en Ècriture au niveau serveur. Cela se rÈvËle trËs pratique pour des documents
assez riches et partagÈs, 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 de
cette mani re gr ceAjax : traitement de texte (par exemple, writely), tableur, gestionnaire
d agenda, sans parler des messageries. La figure 1.9 illustre lditeur de texte fourni par le
framework Ajax dojo toolkit.

Figure 1.9
LÕŽditeur Ajax
fourni par le
framework dojo
toolkit

Nous indiquons au chapitre 6 comment rÈaliser un tel Èditeur.

Diaporamas et autres applications documentaires
LesapplicationsdocumentairessedÈveloppentdeplusenplussurInternet.IlsÕagiten
particulierdedisposerdediffÈrentesvuesdÕunmÍmedocument:tabledesmatiËres,
fragment du document (pagenarticle dÈcoupÈ en dÕunxparties), intÈgralitÈ du docu-
mentsousformeimprimable.Nouspouvons,parexemple,avoir,‡gauchedÕunepage,la
table des matiËres et, ‡ droite, la partie du document correspondant ‡ lÕentrÈe de la table
desmatiËressurlaquellelÕutilisateuracliquÈ.NouspouvonsaussifairedÈÞlerlÕensem-
ble du document sous forme de diaporama.
JÕutilisemoi-mÍmesouventcettetechniquepourdesprÈsentations.LedocumentmÍle
des ÈlÈments destinÈs ‡ la prÈsentation orale (titres et listes ‡ puces) et du commentaire
destinÈ ‡ lÕÈcrit. Il est possible dÕimprimer tout le document sous forme de manuel et de
lÕafÞchersouslaformedÕundiaporama,avecencecasunafÞchagedescaractËresbeau-
coup plus gros.
La Þgure 1.10 illustre la crÈation dÕun diaporama sur le sitethumbstacks.com.

DŽveloppez en Ajax
12

Figure 1.10
ƒdition
dÕun diaporama
sur le site
thumbstacks.com

Nous pouvons avoir des documents ‡ structure libre (bureautique) ou souhaiter structurer
plusfortementlesdocumentsgr‚ce‡XMLenproposant‡laconsultationdiffÈrentesvue
rÈsultantdetransformationsDOMouXSLTcÙtÈclient.
PourlÕutilisateur,lÕavantageestl‡encorelarapiditÈderÈactionquecelaluiapporte.Le
documentvolumineuxestchargÈenunefois,etlepassagedÕunevue‡uneautreest
instantanÈ.PourlÕÈditeurdudocument,lÕavantageestlagarantiedÕunecohÈrenceentre
lesdiffÈrentesvues,puisquetouteslesvuessontobtenues‡partirdÕununiquedocument.
TransposÈ dans le monde documentaire, nous retrouvons l‡ le mÈcanisme des vues des
bases de donnÈes relationnelles.

DŽbranchement dans un scŽnario
ReprenonslÕexempledupanierdansuneboutiqueenligne.
LorsquelÕutilisateurcommandesurlesitepourlapremiËrefois,ildoitsÕenregistrer.
Dans de nombreux sites, lorsque, sur la page du panier, il clique sur le bouton Valider le
panier,ilestredirigÈversunenouvellepagepoursaisirsonproÞl.Ilremplitalorsle
formulaireetlesoumetauserveur,aprËsquoilÕapplicationleconnectepuisleramËne
verslapagedecommande(ouluiditsimplement´VousÍtesconnectÈª,lÕutilisateur
devant encore cliquer sur Mon panier).
Cet usage est en quelque sorte une variante du premier (validation et mise ‡ jour partielle).
Cela prÈsente les deux inconvÈnients suivants :
¥ Performance.Le serveur doit traiter deux requÍtes : lÕafÞchage du formulaire dÕenregis-
trement, dÕune part, et sa validation et sa redirection vers la page du panier, dÕautre part.
¥Ergonomie.Dufaitduchangementdecontexte(panierpuisenregistrement),laßuiditÈ
du scÈnario est rompue.

Introduction ˆ Ajax
13
CHAPITRE1

NouspouvonsamÈliorerlÕergonomiedÕuntelsiteenafÞchantleformulairedÕinscription
dans une fenÍtre pop-up ou dans un cadre interne. Dans les deux cas, nous rÈduisons le
traÞcpuisquenousÈvitonslerenvoidelapagedupanier.UneautrefaÁondeprocÈder
consiste‡dÈployerleformulairedÕenregistrementdanslafenÍtregr‚ce‡unclicsurun
boutonouunlienSÕenregistreret‡nesoumettreauserveurqueceformulaire,parle
biais dÕune requÍteXMLHttpRequest.
Pourcela,ilfautmodiÞerdynamiquementlecontenuoulÕafÞchagedelapageetpasser
desrequÍtespartielles,cÕest-‡-diresansredemanderauserveurdereconstruiretoutela
page.
Un tel usage est Ètroitement liÈ ‡ une rËgle de bonne conception des IHM : quand il y a
plusieurs objets sur une page, nous rÈservons ‡ chacun une zone sur cette page, et nous y
plaÁonslesactionsassociÈes.Ici,nousavonslesobjetscatalogue,panieretutilisateur.
Nous pouvons disposer les trois objets sur la page, avec Èventuellement une zone de
travail additionnelle, et ne rafraÓchir que ce qui est nÈcessaire.

Visualisation graphique avec SVG

Dans des applications dÕaide ‡ la dÈcision (tableau de bord, analyse de donnÈes, prÈvi-
sion) ou de simulation, il est souvent trËs utile de prÈsenter les donnÈes sous forme
graphique : courbes, histogrammes, camemberts. Avant Ajax, nous Ètions rÈduits ‡ gÈnÈ-
rercesgraphiquescÙtÈserveursousformedeÞchiersGIFouPNGet‡lesenvoyersurle
client.

NouspouvonsaujourdÕhuienvisagerdefairebeaucoupmieux.SVG(ScalableVector
Graphics), une norme du W3C, est un type de documents XML qui dÈcrit des graphiques
vectorielsainsiqueleuranimation.CommeilsÕagitdeXML,nouspouvonstransformer
les donnÈes en SVG au moyen de XSLT, en particulier sur le client et construire ainsi des
applicationsdanslesquellesnouspouvonsmanipulercesdonnÈescÙtÈclientetenvoir
immÈdiatement le rendu graphique. Cela peut se faire directement dans Firefox ‡ partir
delaversion1.5etdansInternetExploreraumoyendÕunplug-incommelevisualiseur
SVGdÕAdobe.

Rafra”chissement dÕune branche dÕune arborescence

Certaines applications prÈsentent des informations sous forme arborescente. Un forum,
parexemple,peutafÞcherunelistedÕarticles(news),dontchacunpeutdonnerlieu‡un
Þldediscussion,chaquerÈponsedansunÞlpouvant‡sontourdonnerlieu‡unautreÞl,
etc.DÕautresexemplesdecetypesontfournisparlescatalogues,avecleursrubriqueset
sous-rubriques,lesorganigrammesdÕentreprise(voir Þgure1.11) ouencore les tables
des matiËres des documentations.

DŽveloppez en Ajax
14

Figure 1.11
Organigramme Ajax

QuandlÕutilisateurchercheunÈlÈmentdelÕarborescence(dansnotreexemple,Login
Durand),nouslÕafÞchonsaveclesnÏudsancÍtres(service,direction)etvoisins.Quand
ilveutdÈtaillerunebranchedelÕarborescence,nousrÈcupÈronsparunerequÍteasyn-
chroneledÈtaildelabrancheetlÕajoutonssimplement‡lÕarborescence,enconservant
lÕÈtatdÈployÈourepliÈdesautresbranches.
LÕutilisateurpeutdelasorteparcourirtoutlÕarbredefaÁonßexible.QuandlÕarbreest
particuliËrement imposant, cÕest trËs utile. CÕest ce que fait Microsoft pour la table des
matiËres de son site de documentation technique(msdn.microsoft.com).

Chargement progressif de donnŽes volumineuses
IlarrivequelesdonnÈes‡transmettresoientvolumineuses.LÕapplicationGoogleMaps
enestunbonexemple.ElleafÞcheunezonedÕunecarte,quÕilestpossibledefaireglisser
defaÁon‡afÞcherleszonesvoisines,etceindÈÞniment,etsurlaquelleilestpossiblede
fairedeszoomsavantetarriËre.CelafonctionneunpeucommeMappy,saufquelÕutili-
sateur peut faire glisser la carte sans aucune contrainte.
Gr‚ce‡Ajax,lacarte‡afÞcherestenfaitdÈcoupÈeenpetitsmorceaux.QuandlÕutilisa-
teurladÈplace,lenavigateurdemandelesmorceauxvoisinspardesrequÍtesasynchro-
nes.LeserveurrÈpondanttrËsvite,lÕutilisateurauneimpressiondeßuiditÈ.

Exemple Ajax simple
AprËsavoirparcourulesdiffÈrentsusagesdÕAjaxdanslesapplications,nousallonsnous
pencher plus en dÈtail sur un premier exemple simple, du point de vue tant fonctionnel
que du code.
NousreprenonslecasindiquÈprÈcÈdemmentdelapageafÞchantlepanierdÕunebouti-
queenligneetpermettantdelevalider.LÕutilisateurdisposedÕunformulairepourcela,

Introduction ˆ Ajax
15
CHAPITRE1

maisilluifautauprÈalablesÍÕtreidentiÞÈ.LapagesaitsÕillÕestenstockantcetteinfor-
mation dans un champ cachÈ ou dans une variable.
SÕilnÕestpasencoreidentiÞÈ,lÕapplicationluiproposedelefaire‡traversunautre
formulaire dÈdiÈ ‡ cela. La page a alors lÕaspect illustrÈ ‡ la Þgure 1.12 (lÕemplacement
du panier est simplement mentionnÈ).

Figure 1.12
Formulaire
dÕidentiÞcation

LÕutilisateurremplitlepetitformulairepuislevalide.LÕapplicationinterrogealorsle
serveur sans demander une nouvelle page. En attendant la rÈponse (si le serveur est lent),
lÕutilisateurpeutchangerlaquantitÈdesarticlesquÕilachoisis.IlfautalorslÕavertir
visuellementquelarequÍteestencoursdetraitement,demÍmequÕilfaudralÕavertir
quand elle sera terminÈe.
UnmoyensimplepourrÈalisercelaconsiste‡changerlÕapparenceduboutondevalida-
tion,enremplaÁantletexteparuneimageanimÈesuggÈrantlechargement,commecelle
dunavigateurFirefox.Ilfautenoutredonner‡lÕutilisateurlapossibilitÈdÕabandonnerla
requÍte,commepourleWebclassique,cequiestlÕobjetduboutonAnnuler,quidevient
activÈ,ainsiquelÕillustrelaÞgure1.13.

Figure 1.13
Attente de la
rŽponse du serveur
indiquŽe par une
image animŽe

SilÕutilisateurannulelarequÍte,leboutonSÕidentiÞerafÞche‡nouveauletexteinitial,
etleboutonAnnulerestdÈsactivÈ,commelÕillustrelaÞgure1.14.

DŽveloppez en Ajax
16

Figure 1.14
Abandon
de la requte

SÕillaisseletraitementsepoursuivre,unefoiscelui-citerminÈ,laboutonAnnulerest‡
nouveaudÈsactivÈ.SilÕutilisateurasaisilesbonsidentiÞantetmotdepasse,lÕapplica-
tionlÕenavertit1.15),(voir ÞgurentdiÞanmoreeapinosnedredlivaetrmnttaulepi
lÕinformationcorrespondantestockÈeauniveaudelapage. Dans le cas contraire, elle
afÞcheunmessagedÕerreur(voir Þgure 1.16).

Figure 1.15
Saisie validŽe
par le serveur

Figure 1.16
Erreur indiquŽe
par le serveur

Introduction ˆ Ajax
17
CHAPITRE1

Le code c™tŽ serveur
Bienquesimple,cetexemplemetdÈj‡enÏuvreplusieursbriquesessentiellesdÕAjax.
Nousallonsexaminercommentcelles-cisÕimbriquentaÞndebienfairecomprendreles
mÈcanismes mis en jeu dans Ajax. Nous Ètudions en dÈtail chacune de ces briques au
cours des chapitres suivants.
Nous Ècrivons le code serveur en PHP.
Nous avons les deux pages suivantes :
¥panier.php,iuaqeelÞfhc.saliurteledituÕnaprei
¥idtieneÞ.rhp,pÕilrusreevÈtsnÙciosssealnsdaertsigerneÕl,rueutilisatntiÞelÕqiuied
estreconnuetinformeenretoursÕilestconnectÈousilesinformationssontinvalides.
Ce service peut bien entendu Ítre appelÈ depuis dÕautres pages quepanier.php.
ConsidÈrons rapidement le code de lÕactionrep.tnÞiiedhp.Nous sommes dans du Web
classique,avecuneformeassezMVC(modËle,vue,contrÙleur).Lavuesechargede
renvoyerlerÈsultat‡lÕutilisateur.tandisquelemodËlemaintientlÕÈtatduserveur
(sessionutilisateur,basededonnÈes).PourlasimplicitÈdelÕexemple,ilestrÈduitau
minimum indispensable. Le contrÙleur rÈcupËre les paramËtres, interroge ou commande
le modËle et demande ‡ la vue de renvoyer la rÈponse.
VoicilecodeducontrÙleur:
<?php
// Attendre 1 seconde pour simuler la realite : les serveurs
// sont souvent lents
/** Controleur */
sleep(1);
if (array_key_exists("login", $_POST)
&& array_key_exists("motPasse", $_POST)) {
// Les parametres ont bien ete transmis
$user = get_user($_POST["login"], $_POST["motPasse"]);
if ($user) {
connecter_user($user);
}
repondre($user);
}
else {
print "usage : $_SERVER[PHP_SELF]?login=...&motPasse=...";
}
EnSiecneÕtspsalecasrapasleniebns.sudnettasertËmÈriÞusv,noaovonsuuqenos
(ligneon,rsuovnesnoyelssmeeagdiin)tÕluqnaeedsugactiolÕann.E, nous rÈcupÈ-
ronslÕutilisateurcorrespondantauxparamËtres.SÕilexiste,nousleconnectons
(ligne), et, dans tous les cas, nous renvoyons la rÈponse (ligne).
Passons maintenant au code du modËle :
/** Modele */

DŽveloppez en Ajax
18

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 rÈduit au minimum. La fonctionget_user
nÕacceptequÕunutilisateurÈcritendur,sansaucunaccËs‡labasededonnÈes.Siles
paramËtres lui correspondent, elle le renvoie, sinon elle renvoienull. De mÍme,
connecter_usera un corps vide.
La vue renvoie au client un simple message texte, sans aucun enrobage HTML ou XML
(cÕestluiquiestafÞchÈsurleclient,lequellereprendpurementetsimplement):
/** Vue */
function repondre($user) {
if ($user) {
print"Utilisateur '$user[login]' connect&eacute;";
}
else {
print"Utilisateur inconnu ou mot de passe invalide";
}
}
?>

Le code c™tŽ client

Examinons maintenant le code cÙtÈ client de la pagepanier.php.
AuniveauHTML,nousavonsunen-tÍteclassique,pourvudÕunefeuilledestylerÈduite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<title>Panier</title>
<styletype="text/css">
button{
width:12ex;
height:2em;
margin:0ex 1ex 0ex 1ex;
}

Introduction ˆ Ajax
19
CHAPITRE1

#panier{
text-align:center;
font-size:120%;
background:#FAF0F5;
}
</style>
Suit du code JavaScript (examinÈ plus loin), puis le corps de la page, avec le panier (ici
simpliÞÈ en undiv) et un formulaire, dont lÕaction (ligne) est un appel ‡ la fonction
JavaScriptidentifier():
<body onload="montrerInactivite()">
<pid="panier">Zone affichant le panier</p>
<formname="identification"
action="javascript:identifier()">
<tableborder="0">
<tbody>
<tr>
<td>Identifiant</td>
<td><inputtype="text" id="login"/></td>
</tr>
<tr>
<td>Motde passe</td>
<td><inputtype="password" id="motPasse"/></td>
</tr>
<tr>
<tdcolspan="2" style="text-align: center">
<buttontype="submit">
<spanid="identifierOff">S'identifier</span>
<imgid="identifierOn" src="loading.gif"
alt="Identificationen cours ..."/>
</button>
<buttontype="button"
id="boutonAbandonnerIdentifier"
onclick="abandonnerIdentifier()">Annuler</button>
</td>
</tr>
</tbody>
</table>
<divid="message"></div>
</form>
</body>
</html>
DÈtaillons les trois fonctions JavaScript principales :
¥identifier(), appelÈe en, qui construit la requÍte HTTP et la lance. Le traitement est
dÈclenchÈparleboutonSÕidentiÞer.
onIdentifier(), qui correspond au traitement lorsque la rÈponse est complËtement
rÈcupÈrÈe.

DŽveloppez en Ajax
20

¥abandonnerIdentifier(), qui abandonne la requÍte en cours dÕexÈcution (Èquivalent du
bouton Stop du navigateur). Cette fonction est dÈclenchÈe par le bouton Annuler (ligne).
Voici le code de ces fonctions :
<scripttype="text/javascript">
// La requete HTTP
var requete;

function identifier() {
requete = getRequete();
if (requete != null) {
//Constituer le corps de la requete (la chaine de requete)
varlogin = document.getElementById("login").value;
varmotPasse = document.getElementById("motPasse").value;
varcorps = "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("Impossiblede se connecter au serveur");
}
}

// Ce qui s'executera lorsque la reponse arrivera
function 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

function abandonnerIdentifier() {
if (requete != null) {
requete.abort();
}
montrerInactivite();
setMessage("Requ&ecirc;te abandonn&eacute;e");
}

Introduction ˆ Ajax
21
CHAPITRE1

// Recuperer la requete existante ou une nouvelle si elle vaut null
function getRequete() {
var result = requete;
if (result == null) {
if(window.XMLHttpRequest) {
//Navigateur compatible Mozilla
result= new XMLHttpRequest();
}
elseif (window.ActiveXObject) {
//Internet Explorer sous Windows
result= new ActiveXObject("Microsoft.XMLHTTP");
}
}
return result;
}
Nous avons l‡ les quatre fonctions utilitaires suivantes :
¥getRequete()eoinvreuÍeqrlaiuq,surleteteconleinelrcaseÈpasencoÕexisteer.
setMessage()elheÞcafiqu,neÈssapegassemre.amËtpar
montrerActivite()el,qiiuqidnveueusiemlltenequrlaqeÍuetetsenocursenactivant
boutonAnnuleretenafÞchantlÕimagedechargementdansleboutondevalidation.
¥montrerInactivite(), qui indique visuellement quÕil nÕy a aucune requÍte en cours en
dÈsactivantleboutonAnnuleretenafÞchantletexte´SÕidentiÞerªdansleboutonde
validation.
Voici le code de ces fonctions :
// Mettre les boutons dans l'etat initial
function montrerInactivite() {
document.getElementById("identifierOff").style.display = "inline";
document.getElementById("identifierOn").style.display = "none";
document.getElementById("boutonAbandonnerIdentifier").disabled = true;
}

// Montrer que la requete est en cours
function montrerActivite() {
document.getElementById("identifierOff").style.display = "none";
document.getElementById("identifierOn").style.display = "inline";
document.getElementById("boutonAbandonnerIdentifier").disabled = false;
setMessage("");
}