Ajax1 v3+

1. L’évolution du Web

1.1 Le Web 1.0
Le World Wilde Web, plus souvent désigné par l’acronyme WWW, appelé également Web
est apparu au début des années 90 et représente les sites Internet dits statiques ; c’est ce
que l’on appelle le Web 1.0.
Le contenu est composé de textes, d’images, de sons et de vidéos, liés par des liens
hypertextes et hébergés sur un serveur ; l’utilisateur peut y accéder à travers un
navigateur Internet comme Internet Explorer de Microsoft depuis n’importe où dans le
monde.
Les pages composant le Web 1.0 ne sont pas régulièrement mises à jour et une personne
consultant une page ne pourra y apporter sa contribution autrement qu’en envoyant un e-
mail à l’auteur.
L’apparition de nouveaux langages comme ASP ou PHP, qui permettent de se connecter à
une base de données, permet de faire évoluer le Web, les sites Internet et leur contenu
qui devient dynamique, c’est ce que l’on pourrait appeler le Web 1.5.

1.2 Le Web 2.0
Aussi appelé Web participatif, le Web 2.0 est un concept qui est apparu pour la première
fois en août 2004 lors d’une conférence « brainstorming » 5 entre deux sociétés, O’Reilly et
Medialive International.
Aujourd’hui encore il est difficile de décrire exactement ce qu’est le Web 2.0, mais s’il
n’est pas possible de donner une définition précise du terme il est en revanche possible
d’en expliquer le sens à travers des exemples.
Un article publié par Tim O’Reilly6 décrit des exemples de différences entre sites « 1.0 » et
sites « 2.0 », issu du brainstorming cité plus haut. Parmi ceux-ci, deux sont
particulièrement parlants, à savoir que des sites personnels du Web 1.0, le Web 2.0 a
amené les blogs7 et que les publications du Web 1.0 ont évolué en participation avec le
Web 2.0. Ces deux exemples montrent bien que l’appellation Web participatif du Web 2.0
n’est pas usurpée. Ainsi YouTube8, l’un des sites les plus populaires de la planète à l’heure
actuelle, ne serait rien sans l’apport de ses membres, de même que l’encyclopédie en
ligne Wikipedia9.
Alors qu’avec le Web 1.0 l’internaute était passif, celui-ci devient actif avec le Web 2.0. Il
peut ainsi se créer une page d’accueil personnalisée à l’aide de Netvibes 10 ou d’iGoogle11,
lui permettant ainsi de gérer ses tâches, consulter la météo, des flux RSS 12 et bien d’autres

1

choses encore grâce aux modules que l’on peut ajouter en quelques clics. Le tout dans une
page entièrement personnalisable et ne nécessitant aucune compétence en informatique.
Des géants de l’Internet tels que Google ou plus récemment Microsoft proposent des
services en ligne permettant de créer des documents, des feuilles de calcul ou encore des
présentations. Ces fichiers sont ensuite stockés en ligne et permettent aux internautes de
travailler simultanément sur des fichiers partagés. La multiplication de ces services,
toujours plus proches d’une application de bureau traditionnelle, peut laisser imaginer à
terme la disparition des logiciels de bureau tels que nous les connaissons aujourd’hui.
Un autre aspect important du Web 2.0 est l’aspect de communauté qui en ressort. Au
travers des blogs tout d’abord, où les commentaires des lecteurs apportent souvent un plus
non négligeable au texte de base, mais aussi aux travers de sites tels que MySpace 14 ou
encore, pour celui que nous trouvons le plus intéressant, Facebook15
Facebook est un site communautaire ayant pour but de retrouver des amis inscrits eux
aussi sur le site. À la base réservée aux seuls étudiants de Harvard, il est maintenant
ouvert à tous.
Facebook permet donc de retrouver très simplement des personnes en entrant leur nom
et/ou d’autres informations. En examinant le profil d’une personne on peut voir ses amis
ainsi que ceux que l’on a éventuellement en commun et ainsi retrouver des personnes en
quelques clics, puis reprendre contact avec elles via une messagerie publique ou privée. Il
est aussi possible de se joindre à divers groupes, permettant ainsi aux utilisateurs de se
créer un véritable réseau social.
L’intérêt de Facebook ne s’arrête pas là puisque le site permet, à la manière de Netvibes,
de personnaliser la page de son profil mais aussi d’ajouter des applications très diverses
telles que des jeux, des questionnaires et autres, puis de faire partager ses découvertes à
ses amis.
Au travers de tous ces exemples, on peut donc dire que le Web 2.0 est une évolution du
Web où chaque internaute est acteur d’un réseau social dont il partage les informations.

2

Web1.0 : L'internaute était un lecteur.
Web2.0 : L'internaute est un contributeur

1.3 Les outils du web 2.0
1.3.1 Blog : la partie émergée du web 2.0
Blog : Plateforme de publication sur le Web.
Les blogs, sont des systèmes très simples de publication chronologiques conçus un peu à
la manière des journaux.
Le phénomène blogs a rencontré une véritable attente du public : Un grand nombre de
blogueurs sont des ados certes, mais pas seulement. Ce sont aussi des passionnés, des
personnes très compétentes dans leur domaine, qui désirent échanger avec une
communauté qui partage les mêmes centres d'intérêt.
Il en existe tellement qu'on peine à prendre la mesure réelle du phénomène et que l'on
s'intéresse aujourd'hui à la Blogosphère!
Blogosphère : l'ensemble des blogs dont l'une des caractéristiques principale est la mise en
place d'une multitude de liens croisés.

3

1.3.2 CMS : Système de gestion de contenu
Une solution de gestion de contenu repose sur un logiciel qui permet à un groupe
d'utilisateurs non techniciens d'alimenter eux-mêmes le contenu d'un site (Internet,
Intranet, Extranet) et d'en gérer la mise à jour. Ils permettent la mise en place d'un site
dynamique en toute autonomie (la gestion et l'administration du site se font sans
compétences techniques spécifiques).
Le gestionnaire de contenu à cette particularité de traiter séparément le contenu et la
forme d'un site web. Il permet de mettre en ligne des informations, du contenu sans avoir
à se préoccuper de la forme, cette dernière étant gérée par la feuille de style du site.
Entièrement paramétrable, accessible en consultation et/ou administration à l'aide d'un
navigateur internet (IE, Firefox etc.).
Le CMS permet la mise en place d'un site en quelques clics !
Quelques exemples:
 www.typo3.fr
 www.nytimes.com
 www.cdg59.fr
 www.joomla.fr
 www.porsche.com.br
 www.neuvillesurescaut.fr
 www.creatic59.fr
 www.spip.net
 www.developpement-durable.gouv.fr
 www.var.pref.gouv.fr

1.3.3 Fils ou flux RSS
Il s'agit d'un fichier texte particulier dont le contenu est produit automatiquement (sauf
cas exceptionnels) en fonction des mises à jour d'un site Web. Ce contenu est laissé au
libre choix du producteur du flux, mais principalement, un fil RSS est un fichier contenant
le titre de l'information, une courte description et un lien vers une page décrivant plus en
détail l'information. Cela permet à un site web de diffuser largement ses actualités tout en
récupérant un grand nombre de visiteurs grâce au lien hypertexte permettant au lecteur
de lire la suite de l'actualité en ligne.
L'émission d'un flux RSS, s'appelle la syndication de contenu. La majorité des pages que
vous consultez aujourd’hui disposent de leurs propres fils RSS.
Cela permet à l’internaute de gagner du temps et au site de fidéliser ses visiteurs.
Un flux RSS offre la possibilité aux lecteurs d’avoir accès en temps réel à la mise à jour du
contenu sans avoir à aller toutes les cinq minutes sur le site.

4

Grâce à ce format, vous n’avez plus besoin de consulter un par un vos sites préférés pour
être informé de leurs nouveautés.
Aujourd’hui, il existe plusieurs moyens d’accéder à ces flux sur votre ordinateur.
Ainsi, la plupart des navigateurs et des clients e-mails peuvent lire des flux RSS.
A côté de cela, des logiciels dédiés, que l’on appelle agrégateurs de flux RSS, gèrent
automatiquement et en temps réel toutes vos données enregistrées.
Quel que soit votre choix, l’opération pour collecter des flux sur le Web consiste très
souvent en un clic ou un copier/coller.
1.3.4 Agrégateur (lecteurs) de flux RSS
Un agrégateur (de l'américain aggregator) est un logiciel qui permet de suivre plusieurs
flux RSS en même temps.
Les sources de contenu, des sites web en général, mettent à disposition un ou plusieurs
flux RSS mis à jour plus ou moins régulièrement. Cette première phase, l'émission d'un fil
de contenu, consiste en la syndication de contenu, c'est-à-dire en la mise à disposition
structurée de données. L'agrégation consiste elle à s'abonner à un ou plusieurs de ces flux.
Leurs mises à jour sont alors détectées automatiquement par l'agrégateur, et l'utilisateur
en est averti aussitôt, sans avoir à visiter périodiquement les sites internet diffusant les fils
de syndication auxquels il s'est abonné.
L'intérêt d'un agrégateur réside donc dans sa double faculté à :
 prévenir automatiquement de la mise à jour d'un site web (ou des actualités qu'il
publie);
 le faire pour un ensemble de sites.

1.3.5 Wiki
Un wiki est un système de gestion de contenu de site Web qui rend les pages Web
librement et également modifiables par tous les visiteurs autorisés. On utilise les wikis
pour faciliter l'écriture collaborative de documents avec un minimum de contraintes.
On accède à un wiki, en lecture comme en écriture, avec un navigateur Web classique.
On peut visualiser les pages dans deux modes différents : le mode lecture, qui est le mode
par défaut, et le mode d'édition, qui présente la page sous une forme qui permet de la
modifier.
En mode d'édition, le texte de la page, affiché dans un formulaire Web, s'enrichit d'un
certain nombre de caractères supplémentaires, suivant les règles d'une syntaxe
informatique particulière : le wiki texte, qui permet d'indiquer la mise en forme du texte,
de créer des liens, de disposer des images, etc.
Le wiki texte a été conçu pour que les fonctionnalités les plus courantes soient faciles à
assimiler et taper.

5

Un wiki ouvert au grand public doit être maintenu en bon état de fonctionnement 24
heures sur 24, 7 jours sur 7 par une communauté d'utilisateurs expérimentés poursuivant
un même but.
Dès qu'une information est modifiée, les contributeurs réguliers qui s'intéressent à la page
correspondante peuvent aller vérifier et, au besoin, corriger ou compléter l'information.
Quelques exemples :
www.wikipedia.fr
 http://web2fr.com/Accueil
 http://annuaire-wiki.com/Accueil

1.3.6 Contenu généré par les utilisateurs
Le contenu généré par les utilisateurs (en Anglais User generated content) se référer à un
ensemble de médias dont le contenu est principalement, soit produit soit directement
influencé par les utilisateurs finaux. Il est opposé au contenu traditionnel produit, vendu
ou diffusé par les entreprises médiatiques traditionnelles.
Ce mouvement reflète la démocratisation des moyens de production audiovisuelle grâce
aux nouvelles technologies. Parmi ces moyens de plus en plus accessibles à un large public,
on peut citer la vidéo numérique, les blogs, le podcasting, la téléphonie mobile ainsi que
les Wikis.
En supplément des ces moyens, le contenu généré par les utilisateurs utilise aussi souvent
des logiciels libres ou open source et s'appuient sur de nouvelles licences de droit d'auteur
très flexibles, lesquelles diminuent très largement les barrières d'entrée et facilitent la
collaboration entre des individus dispersés géographiquement à travers le monde.
C'est un excellent moyen pour améliorer ses compétences, pour s'instruire, pour découvrir
et explorer de nouveaux domaines.

2. Ajax
2.1 Définition du terme Ajax
Le terme Ajax a été inventé par Jesse James Garrett et est apparu pour la première fois
dans un article publié le 18 février 2005 et intitulé « Ajax : A New Approach to Web
Applications ». Garrett a expliqué par la suite avoir commencé à utiliser ce terme car il
avait besoin de pouvoir utiliser quelque chose de plus court que :
« JavaScript+CSS18+DOM+XMLHttpRequest asynchrones » lors de discussions avec des
clients.
Ajax est l’acronyme d’Asynchronous JavaScript And XML, soit en français JavaScript et XML
asynchrones. Ajax n’est donc pas une nouvelle technologie en tant que telle mais désigne

6

le fait que plusieurs technologies, développées séparément sont assemblées pour offrir de
nouvelles possibilités et de nouvelles voies aux utilisateurs d’Internet.
Les principales technologies qui composent Ajax sont :
 Le JavaScript
 Le XML et le XSL
 L’objet XMLHttpRequest
 Le XHTML et les feuilles de styles CSS
 Le Modèle Object Document
Le JavaScript permet d’effectuer des traitements sur la page du client, avec l’aide du
Modèle Objet Document (appelé par la suite DOM pour Document Object Model) qui
permet quand à lui de parcourir et de manipuler un document HTML 21 ou XML au moyen de
diverses méthodes.
Le XML a pour but de décrire et de structurer l’information tandis que le XSL est une
manière de mettre en forme le contenu d’un document XML.
Le XHTML et les feuilles de styles CSS permettent de définir la présentation des pages à
l’utilisateur.
L’objet XMLHttpRequest va, quand à lui, lire des données contenues dans un fichier sur le
serveur de manière asynchrone.

2.2 Principe de fonctionnement d’Ajax
Ajax fonctionne selon une architecture client/serveur, avec Ajax le serveur a pour but de
retourner à l’objet XMLHttpRequest le contenu de la réponse à une requête, tandis que
c’est le client qui va mettre en page ce contenu. Le protocole HTTP est utilisé afin de
transmettre les informations du client au serveur et vice-versa.
Ce qui rend Ajax particulier dans son utilisation par rapport à une application Web
classique est un terme présent dans son nom : asynchrone. En effet, que se passe-t-il dans
une application synchrone lors d’un appel au serveur ?

7

Figure 2 Schéma du fonctionnement d’une application Web classique

Comme le montre le schéma de la figure 1, à chaque fois qu’une action d’un utilisateur
implique d’envoyer une requête au serveur, l’activité de l’utilisateur est interrompue le
temps que le serveur traite et retourne les données qui lui ont été envoyées. L’utilisateur
ne peut donc pas continuer à effectuer des actions et n’a aucune idée de ce qui se passe
du côté serveur.

8

Figure 3 Schéma du fonctionnement d'une application Ajax

Dans le cas d’une application Web utilisant Ajax, l’activité de l’utilisateur n’est jamais
interrompue. En effet lorsqu’une action de l’utilisateur requiert d’envoyer des données au
serveur, JavaScript appelle le moteur Ajax qui va se charger de les envoyer de manière
asynchrone permettant ainsi de ne pas interrompre l’interaction avec l’utilisateur qui ne
voit ni la traditionnelle page blanche ni le sablier, présents lorsque le serveur travaille
avec une application Web traditionnelle. L’utilisateur peut donc continuer de travailler ou
de consulter la page pendant que le serveur traite la requête.

Comme le montre le schéma de la figure 2, le fait de faire appel au moteur Ajax ne veut
pas obligatoirement dire que celui-ci va, immédiatement ou pas, envoyer une requête
HTTP au serveur. Le moteur Ajax, qui connaît l’état de la requête, peut ainsi tenir au
courant l’utilisateur de l’état de celle-ci.

Pour connaître l’état de la requête le moteur Ajax dispose d’une propriété qui va « réagir
» lorsque l’état de la requête change. Ainsi le moteur est capable d’effectuer les
traitements adéquats selon l’état de la requête.

2.3 L’apport d’Ajax dans les sites Web 2.0
Comme indiqué dans le paragraphe précédent, les applications Web synchrones ne sont pas
vraiment ergonomiques pour l’utilisateur du fait que les nombreuses requêtes du client au
serveur entraînent une interruption des actions de l’utilisateur, empêchant ainsi une
utilisation fluide de l’application pour l’utilisateur.
Ajax permet de remédier à ce problème, proposant ainsi des applications se rapprochant
des applications de bureau où les requêtes sont transparentes pour l’utilisateur, sans que
celui-ci n’ait eu à installer quoi que se soit.
Google, qui possède sur Internet de nombreuses applications utilisant Ajax, propose avec
son service Google Maps23 un exemple frappant de la mise en œuvre de cette nouvelle
ergonomie. Google Maps est un service en ligne permettant de consulter une carte du
monde en format plan ou vue satellite, ainsi que d'effectuer une recherche d’itinéraire.

9

Illustration 1 Vue mixte avec Google Maps

Là où l’utilisation d’Ajax est frappante c’est lors de la consultation de la carte. En effet,
lorsque l’on se déplace sur la carte, l’affichage lors du changement de zone est quasiment
instantané. Pour ce faire il suffit à Google de détecter le mouvement de la souris et de
calculer ainsi les prochaines zones à afficher, le tout se faisant sans aucun rechargement
de la page.
Si cette application était conçue sans utiliser Ajax, chaque mouvement de la souris
entraînerait le rechargement complet de la page, rendant ainsi l’utilisation de se service
très pénible. Google ne propose d’ailleurs pas d'alternative dans le cas où Ajax serait
inutilisable chez le client, ce service est tout simplement désactivé.

2.4 Le JavaScript
2.4.1 Historique du langage
JavaScript est apparu en septembre 1995 avec le navigateur Netscape 2.0, appelé tout
d’abord Mocha, puis LiveScript lors de sa sortie, il prit son nom actuel, JavaScript, en
décembre 1995.
Il y eut très vite un vif intérêt pour JavaScript tant chez les utilisateurs que chez les
développeurs Internet. Microsoft, alors en retard dans le domaine de l’Internet, s’y
intéressa rapidement et intégra JavaScript à son navigateur Internet Explorer 3 au milieu
de l’année 1996.
Pour des raisons légales (Microsoft refusant d’acheter une licence à Netscape) et afin de
pouvoir ajouter des fonctions supplémentaires à JavaScript, Microsoft appela JScript sa
version de JavaScript. S’est alors posée la question de la compatibilité entre les
navigateurs.

10

En 1997 Netscape et Microsoft choisirent l’organisme ECMA (pour European Computer
Manufacture Association) afin de standardiser le langage, ce qui sera fait avec la norme du
nom d’ECMAScript, sous la référence ECMA-26224. Malheureusement cette standardisation
n’a porté que sur la syntaxe de base et n’a de ce fait apporté qu’une compatibilité
minimale. Un développeur peut donc être amené à développer un code différent mais
produisant le même résultat pour chacun des navigateurs du marché.
Internet Explorer et Netscape ne sont pas les seuls navigateurs acceptant JavaScript ;
parmi les plus célèbres nous pouvons citer Firefox, Safari, Opera ou encore Konqueror.
JavaScript est un langage de script incorporé aux balises 25 HTML et dont le code est géré et
exécuté par le navigateur. JavaScript est donc exécuté du côté du client. Il faut noter que
JavaScript peut aussi s’exécuter en dehors du navigateur et du côté serveur mais ce n’est
pas ce qui nous intéresse avec Ajax. Enfin, malgré leur ressemblance au niveau du nom,
JavaScript n’a rien à voir avec Java qui est un langage de programmation bien plus riche.

Du fait qu’il soit interprété par le navigateur le code JavaScript est visible à l’utilisateur
(clic droit, afficher la source depuis le navigateur). Du point de vue de la sécurité,
JavaScript ne peut ni lire ni écrire sur le disque dur d’un utilisateur en dehors de la zone
réservée aux cookies26. De même JavaScript ne définit aucune instruction lui permettant
de se connecter à un autre ordinateur ou à un serveur, en dehors de l’utilisation de l’objet
XMLHttpRequest qui sera décrit plus bas.
JavaScript permet d’accroître l’interactivité avec l’utilisateur au moyen de scripts
permettant par exemple de :
 Afficher l’adresse IP ou le navigateur employé par l’utilisateur.
 Rediriger l’utilisateur vers une autre page.
 Vérifier la saisie des champs de formulaires.
 Afficher des messages d’alerte, de confirmation ou d’erreur.
 Gérer les menus d’un site Internet.
 Animer du texte ou des images.
 Réagir à l’action de la souris.

Revers de la médaille, JavaScript peut être désactivé par l’utilisateur via le navigateur, il
faut donc bien réfléchir à son utilisation.

2.4.2 Syntaxe du langage
2.4.2.1 Inclure du JavaScript
Il est possible d’écrire des scripts JavaScript en deux endroits d’une page HTML. On peut
inclure du code JavaScript dans la balise <head> ou encore dans la balise <body> de la
page HTML.

11

L’avantage que l’on peut retirer en incluant les scripts dans la balise <head> plutôt que
dans <body> est que ces scripts seront disponibles au moment du chargement du contenu
de la page HTML. En effet, celle-ci étant lue séquentiellement, les scripts écrits dans la
balise <head> seront disponibles dès le chargement du contenu de la page.
Il y a deux manières de déclarer à la page HTML que l’on veut y ajouter du code
JavaScript. La première est de l’écrire directement dans la page HTML comme indiqué ci-
dessus. Cela se fait à l’aide de la balise <script> de la manière suivante :

L’indication type="text/javascript" indique au navigateur que l’on fait du JavaScript en
mode texte. Cette indication est utile car il existe d’autres langages de script supportés
par le HTML. Il est néanmoins possible de l’omettre, JavaScript étant reconnu comme
langage par défaut par la majorité des navigateurs.
La seconde possibilité est d’écrire le code JavaScript dans un fichier qui sera inclus à la
page HTML, cela se fait de la manière suivante:

2.4.2.2 Déclaration des variables
JavaScript est un langage à mots réservés. Il est faiblement typé. Une variable se définit
soit à l’aide du mot réservé var (var test = 123 ;) soit implicitement par l’apparition d’un
nom à gauche du signe d’assignation (test = 123 ;). Il est toutefois conseillé, pour faciliter
la lecture du code, de prendre l’habitude de déclarer une variable grâce au mot réservé
var. C’est ensuite l’interpréteur qui va se charger d’affecter à la variable le bon type en
fonction du contexte. JavaScript n’oblige pas à affecter une valeur à une variable au
moment de sa déclaration.
Le premier caractère du nom d’une variable doit impérativement commencer par une
lettre, un underscore ou un dollar, tandis que les éventuels signes suivants devront être
constitués de caractères alphanumériques, un underscore ou un dollar. Il est interdit de
donner à une variable le nom d’un mot réservé. Il faut noter que JavaScript est sensible à
la casse ce qui signifie que la variable var test ; n’est pas la même que la variable var Test
;
2.4.2.3 La séquence d’instructions
La séquence d’instructions :
 est une suite d’instructions élémentaires, terminées par le caractère « ; »
 peut contenir des variables locales ;
 est considérée dans sa globalité comme une instruction élémentaire.

12

De plus, les caractères { et } définissent respectivement le début et la fin des instructions
de la séquence.

2.4.2.4 Les conditions
JavaScript permet de contrôler le flux d'exécution séquentielle à l’aide de deux types
d'instructions conditionnelles : if et switch. Les instructions conditionnelles permettent
d’exécuter une séquence plutôt qu'une autre lorsqu'une condition est vérifiée.
L'instruction if permet de tester une expression logique et d’exécuter une séquence
d'instructions en fonction du résultat de l’évaluation. Voici la syntaxe de la condition if :

La deuxième structure conditionnelle implantée en JavaScript est l’instruction switch.
Celle-ci permet de se brancher à une instruction donnée en fonction de la valeur d’une
expression numérique entière ou d’une chaîne de caractères. En l’absence du mot réservé
break l’exécution séquentielle se poursuit à partir du lieu de branchement. Voici sa
syntaxe :

2.4.2.5 Les boucles
JavaScript intègre également quatre types de boucles : for, for…in, while et do…while.
Voici la syntaxe de la boucle for :

13

La boucle for…in est une variante de la boucle for vue ci-dessus qui permet de spécifier la
variable (par exemple un tableau) à utiliser lors du parcours de la boucle. Voici sa syntaxe

Voici la syntaxe de la boucle while:

Il existe une variante de la boucle while, la boucle do…while, celle-ci a un fonctionnement
similaire à la boucle while à la différence près que la condition de continuation est testée
après que les instructions contenues dans la boucle aient été exécutées. Cela signifie que
les instructions seront exécutées au minimum une fois, ce qui n’était pas le cas dans les
autres types de boucles.

Voici sa syntaxe :

De manière générale, il faut faire attention à ce que la séquence d'instructions sous
contrôle de la boucle affecte bien la partie de l'état du système employé par l'expression
conditionnelle, sans quoi il est possible de se retrouver en présence d'une boucle infinie.

2.4.2.6 Les procédures
Une procédure définit une suite d’instruction ne retournant pas de résultat. Elle est
définie à l’aide du mot réservé function suivi du nom de la procédure puis des éventuels
paramètres, séparés par une virgule, de la manière suivante :

14

Dans le cas d’une procédure sans paramètre, la définition des paramètres de la procédure
se fait à l’aide d'une paire de parenthèses vides.

Une procédure n’est pas exécutée lors de sa définition, pour l’exécuter il faut l’appeler de
la manière suivante :

Les paramètres ne sont visibles que dans la procédure, tout comme les variables créées
localement à la procédure.

2.4.2.7 Les fonctions

Tout comme la procédure une fonction définit une suite d’instruction mais à comme
différence le fait de retourner un résultat. Une fonction est définie de la même manière
qu’une procédure, soit de cette manière :

Le mot réservé return permet de retourner la valeur du résultat de la fonction.
Une fonction est exécutée en l’appelant de la manière suivante :

La valeur de retour de la fonction est ainsi affectée à la variable résultatFonction.

2.5 Le XML
2.5.1 Description générale

XML est l’acronyme d’eXtensible Markup Langage. Comme le langage HTML, c’est un
langage de balises mais contrairement à celui-ci, les balises du langage XML ne sont pas
prédéfinies, XML est donc comme son nom l’indique, un langage extensible.
Alors que le but du langage HTML est d’afficher les données à travers des balises
interprétées par le navigateur, XML à lui pour but de structurer l’information et il faudra
au navigateur l’aide d’une feuille de style CSS ou d’un fichier XSL pour savoir comment
interpréter les balises contenues dans un document XML.
XML est ce que l’on appelle un métalangage, soit un langage permettant de décrire
d’autres langages.

2.5.2 Syntaxe du langage

15

Contrairement au langage HTML, XML est extrêmement strict sur la syntaxe à utiliser et la
moindre erreur rend un document XML inutilisable27. Il est donc utile de préciser les
principales règles syntaxiques qu’un document XML doit respecter.
Tout d’abord chaque balise ouverte doit être fermée et la dernière balise ouverte doit être
la première à être fermée. Contrairement au langage HTML où le fait d’oublier de fermer
certaines balises n’empêche pas le navigateur d’afficher correctement la page, XML ne
tolère pas l’oubli de fermeture d’une balise. De même, l’inversion de l’ordre de fermeture
d’une balise rend le document syntaxiquement incorrect.
Les balises peuvent contenir un ou plusieurs attributs. Ces attributs devront
obligatoirement être entourés de guillemets.
Les noms des balises :
 peuvent contenir des caractères alphanumériques ainsi que des points des points,
des doubles points, des traits d’union et des underscores ;
 ne peuvent commencer ni par un chiffre, ni par xml ;
 sont sensibles à la casse.

XML autorise les balises dites vides, elles doivent être fermées soit par <balise_vide /> soit
par <balise_vide></balise_vide>.
Maintenant que les règles syntaxiques sont définies, voyons de quoi est constitué un
document XML.
Un document XML doit toujours commencer par un prologue. Celui-ci doit contenir au
minimum le numéro de version du langage. A l’heure actuelle la seule valeur possible pour
cet attribut est "1.0". Il est également possible d’y spécifier le jeu de caractères utilisé à
l’aide de l’attribut encoding.
Directement en dessous du prologue se trouve l’élément racine du document XML qui doit
être unique et qui doit être fermé à la toute fin du document.
Seuls des commentaires peuvent se glisser entre le prologue et l’élément racine.

Afin de mieux illustrer ces règles voici un petit document XML syntaxiquement correct.

<?xml version="1.0" encoding="ISO-8859-1"?>
<database name="infos">
<table name="codeDepartement">
<record>
<field name="ID" type="string">01</field>
<field name="NOM" type="string">Ain</field>
</record>
<record>
<field name="NOM" type="string">Aisne</field>
</record>
<record>

16

<field name="NOM" type="string">Allier</field>
</record>
</table>
</database>

Figure 4 Document XML syntaxiquement correct

2.6 Le Modèle Objet Document
Le modèle objet document, plus connu sous l’acronyme de DOM (pour Document Object
Model), permet d’accéder et de mettre à jour le style, la structure et le contenu d’un
document HTML ou XML. Le DOM est standardisé depuis 1998 par le consortium W3C 32.
L’élément central du DOM est ce que l’on appelle un noeud, ou node en anglais. Ainsi tout
élément d’un document est un noeud, ce qui donne la possibilité de représenter un
document sous la forme d’un arbre. Le DOM permet d’ajouter, de modifier ou de
supprimer des noeuds dans un document.
Chaque noeud possède des propriétés permettant de connaître :
 ses attributs (attributes).
 son nom (nodeName).
 son type (nodeType).
 sa valeur (nodeValue).

Les propriétés permettant de se déplacer dans le document à l’aide du DOM sont les
suivantes :
Propriété Utilisation
parentNode permet de connaître le nom du noeud
parent
childNodes crée une liste de noeuds enfant
firstChild permet de connaître le premier enfant
d’une liste de childNodes
lastChild permet de connaître le dernier enfant
d’une liste de childNodes
nextSibling pour un même noeud parent, permet de
connaître le nom du noeud suivant,
contient null si le noeud est le dernier
previousSibling pour un même noeud parent, permet de
connaître le nom du noeud précédent,
contient null si le noeud est le premier

17

La propriété childNodes est délicate à utiliser, en effet les navigateurs Mozilla prennent en
compte les espaces comme des noeuds de type texte, ce que ne font pas les autres
navigateurs. Ainsi des problèmes de compatibilité peuvent survenir si ce cas n'est pas
traité.
Les diverses propriétés expliquées ci-dessus permettent d’accéder aux divers éléments
d’un document. Il existe cependant d’autres méthodes qui permettent elles aussi
d’accéder aux noeuds :
Méthode Utilisation
parcourt le document en recherchant le noeud dont
getElementById() l’identifiant a été passé en paramètre. L’identifiant
doit être unique
 crée une liste d’éléments dont l’attribut name
correspond à la valeur fournie en paramètre. La liste
getElementsByName()
peut être parcourue de la même manière qu’un
tableau.
crée une liste d’éléments dont le nom de la balise
correspond à la valeur fournie en paramètre. La liste
getElementsByTagName()
peut être parcourue de la même manière qu’un
tableau.

Ces trois méthodes sont très utiles pour se rapprocher rapidement et simplement de
l’élément que l’on souhaite atteindre. Il est donc fréquent d’utiliser ces méthodes pour se
rapprocher de l’élément, puis les propriétés décrites plus haut afin d’accéder à l’élément
lui-même.

2-7 Fonctionnement technique d’Ajax

2.7.1 Description

Ajax utilise un modèle de programmation comprenant d'une part la présentation, d'autre
part les évènements.
Les évènements sont les actions de l'utilisateur, qui provoquent l'appel des fonctions
associées aux éléments de la page.
L'interaction avec l'utilisateur se fait à partir des formulaires ou boutons html.
Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et
communiquent avec le serveur par l'objet XMLHttpRequest.
Pour recueillir des informations sur le serveur cette classe dispose de deux méthodes:
- open: établit une connexion.
- send: envoie une requête au serveur.

18

Les données fournies par le serveur seront récupérées dans les champs responseXml ou
responseText de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans
responseXml par les méthodes de Dom.
Noter qu'il faut créer un nouvel objet XMLHttpRequest, pour chaque fichier que vous
voulez charger.

Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState
de XMLHttpRequest.

Les états de readyState sont les suivants (seul le dernier est vraiment utile):

Valeur de readyState Signification
0 non initialisé
1 connexion établie
2 requête reçue
3 réponse en cours
4 terminé

2.7.2 L’objet XMLHttpRequest

L’objet XMLHttpRequest est l’élément clé des applications Ajax. Il permet d’envoyer des
requêtes HTTP au serveur de manière synchrone ou asynchrone.

2.7.2.1 Historique de la classe

XMLHttpRequest a tout d’abord été développé par Microsoft en tant que contrôle ActiveX 28
et est apparu avec Internet Explorer 5.0 en septembre 1998.

XMLHttpRequest a été intégré en temps qu’objet JavaScript natif 29 dans la première
version du navigateur Mozilla, puis progressivement dans les principaux navigateurs du
marché. XMLHttpRequest fut intégré comme objet JavaScript dans Internet Explorer à
partir de la version 7 du navigateur.

2. 7.2.2 Fonctionnement de la classe

Afin de pouvoir utiliser l’objet XMLHttpRequest, il faut tout d’abord créer une instance de
l’objet, ce qui se fait d’une manière différente selon que l’on utilise Internet Explorer 6.0
ou inférieur ou un autre navigateur.

L’instance se créée de la manière suivante :

19

Figure 4 Création d'une instance de XMLHttpRequest

Il faut tester si le navigateur du client supporte le contrôle ActiveX ou s’il supporte l’objet
natif XMLHttpRequest afin de créer l’objet, appelé ici xhr, de la manière qui convient. Si
le navigateur ne supporte pas l’objet XMLHttpRequest une alerte est affichée afin de le
signaler à l’utilisateur.

2.7.3 Inconvénients d'Ajax

- Si JavaScript est désactivé, Ajax ne peut fonctionner. Il faut demander au lecteur de
l'activer parmi les options du navigateur.
- Si l'on charge les données à afficher de façon dynamique, elles ne font pas partie de la
page et elles ne sont pas prises en compte par les moteurs de recherche.
- L'aspect asynchrone fait que les modifications se font avec un délai (si le traitement sur
le serveur est long), ce qui peut être déconcertant.

2.8 Exemple de programme Ajax
Cet exemple va permettre de réaliser une validation côté serveur d'une donnée saisie en
temps réel.
Une servlet permettra de réaliser cette validation. La validation proposée est
volontairement simpliste et pourrait même être réalisée directement côté client avec du
code Javascript. Il faut cependant comprendre que les traitements de validation
pourraient être beaucoup plus complexes avec par exemple une recherche dans une base
de données, ce qui justifierait pleinement l'emploi d'une validation côté serveur.

20

Les actions suivantes sont exécutées dans cet exemple :
 Un événement déclencheur est émis (la saisie d'une donnée par l'utilisateur)
 Création et paramétrage d'un objet de type XMLHttpRequest
 Appel de la servlet par l'objet XMLHttpRequest
 La servlet exécute les traitements de validation et renvoie le résultat en réponse au
format XML
 L'objet XMLHttpRequest appel la fonction d'exploitation de la réponse
 La fonction met à jour l'arbre DOM de la page en fonction des données de la
réponse
 La page de tests s'affiche au lancement de l'application

Scénario de l’exemple :

La page de test est une JSP « index.jsp » qui contient un champ de saisie.

La saisie d'un caractère déclenche la validation : si la chaine de caractère saisie commence
par un « X » alors la saisie est valide sinon la saisie est invalide

L'icône dépend du résultat de la validation.

21

Code source :

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test validation AJAX</title>
<script type="text/javascript">

</script>
</head>
<body>
<table>
<tr>
<td>Valeur :</td>
<td nowrap>

22

<input type="text" id="donnees" name="donnees" size="30"
onkeyup="valider();">
</td>
<td>
<div id="validationMessage"></div>
</td>
</tr>
</table>
</body>

</html>

L'exécution des traitements et le renvoie de la réponse par la servlet :

Cette servlet « ValiderServlet » associée à l'URI valider est exécutée par le conteneur web
en réponse à la requête

ValiderServlet

package exemple.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet ValiderServlet
*
*/
public class ValiderServlet extends javax.servlet.http.HttpServlet
implements javax.servlet.Servlet {

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public ValiderServlet() {
super();
}

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
String resultat = "invalide";
String valeur = request.getParameter("valeur");

response.setContentType("text/xml");

23

response.setHeader("Cache-Control", "no-cache");

if ((valeur != null) && valeur.startsWith("X")) {
resultat = "valide";
}

response.getWriter().write("<message>"+resultat+"</message>");
}

}

Le descripteur de déploiement de l'application contient la déclaration de la servlet.

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application
2.2//EN" "web-app_2_2.dtd">
<web-app>
<display-name>Test de validation avec Ajax</display-name>
<servlet>
<servlet-name>ValiderServlet</servlet-name>
<display-name>ValiderServlet</display-name>
<description>Validation de données</description>
<servlet-class>exemple.ajax.ValiderServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValiderServlet</servlet-name>
<url-pattern>/valider</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

</web-app>

La validation est assurée si la valeur fournie commence par un caractère "X".
La servlet renvoie simplement un texte indiquant l'état de la validation réalisée dans une
balise message.
Il est important que le type Mime retournée dans la réponse soit de type "text/xml".
Il est préférable de supprimer la mise en cache de la réponse par le navigateur. Cette
suppression est obligatoire si une même requête peut renvoyer une réponse différente lors
de plusieurs appels.

La prise en compte de l'événement déclencheur :

24

Un événement « onkeyup » est associé à la zone de saisie des données. Cet événement va
appeler la fonction JavaScript « valider()».

Ainsi la fonction sera appelée à chaque fois que l'utilisateur saisi un caractère.

La création d'un objet de type XMLHttpRequest pour appeler la servlet :

La fonction Javascript « valider()» va réaliser les traitements de la validation des données.

Elle réalise les traitements suivants :

 récupère les données saisies

 détermine l'url d'appel de la servlet en passant en paramètre les données. Ces
données sont encodées selon la norme http grâce à la fonction « escape()».

 instancie une requête de type XMLHttpRequest en fonction du navigateur utilisé

 associe à la requête l'url et la fonction à exécuter à la réponse

 exécute la requête

Comme dans de nombreux usages courants de Javascript, des traitements dépendants du
navigateur cible à l'exécution sont nécessaires. Dans le cas de l'instanciation de l'objet
XMLHttpRequest, celui-ci est un ActiveX sous Internet Explorer et un objet natif sur les
autres navigateurs qui le supportent.

La signature de la méthode open de l'objet XMLHttpRequest est :

XMLHttpRequest.open(String method, String URL, boolean asynchronous).

Le premier paramètre est le type de requête http réalisé par la requête (GET ou POST)
Le second paramètre est l'url utilisée par la requête.
Le troisième paramètre est un booléen qui précise si la requête doit être effectuée de
façon asynchrone. Si la valeur passée est « true » alors une fonction de type callback doit
être associée à l'événement « onreadystatechange » de la requête. La fonction précisée
sera alors exécutée à la réception de la réponse.
La méthode « send() » permet d'exécuter la requête http en fonction des paramètres de
l'objet XMLHttpRequest.
Pour une requête de type GET, il suffit de passer null comme paramètre de la méthode
« send() ».
Pour une requête de type POST, il faut préciser le Content-Type dans l'en-tête de la
requête et fournir les paramètres en paramètre de la fonction « send() ».

25

Exemple :

requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
requete.send("valeur=" + escape(donnees.value));

L'objet XMLHttpRequest possède les méthodes suivantes :

Méthode Rôle
abort() Abandon de la requête
getAllResponseHeaders() Renvoie une chaîne contenant les en-têtes http de la réponse
getResponseHeader(nom) Renvoie la valeur de l'en-tête dont le nom est fourni en
paramètre
setTimeouts(duree) Précise la durée maximale pour l'obtention de la réponse
setRequestHeader(nom, valeur) Précise la valeur de l'en-tête dont le nom est fournie en
paramètre
open(méthode, url, [assynchrone[, Prépare une requête en précisant la méthode (Get ou Post),
utilisateur[, motdepasse]]] l'url, un booléen optionnel qui précise si l'appel doit être
asynchrone et le user et/ou le mot de passe optionnel
send(data) Envoie de la requête au serveur

L'objet XMLHttpRequest possède les propriétés suivantes :

Propriété Rôle

onreadystatchange Précise la fonction de type callback qui est appelée lorsque la valeur de la
propriété readyState change

readyState L'état de la requête :
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

responseText Le contenu de la réponse au format texte

responseXML Le contenu de la réponse au format XML

status Le code retour http de la réponse

statusText La description du code retour http de la réponse

Il peut être intéressant d'utiliser une fonction Javascript qui va générer une chaîne de
caractères contenant le nom et la valeur de chacun des éléments d'un formulaire.

26

Exemple

function getFormAsString(nomFormulaire){

resultat ="";
formElements=document.forms[nomFormulaire].elements;

for(var i=0; i<formElements.length; i++ ){
if (i > 0) {
resultat+="&";
}
resultat+=escape(formElements[i].name)+"="
+escape(formElements[i].value);
}

return resultat;

}

Ceci facilite la génération d'une url qui aurait besoin de toutes les valeurs d'un formulaire.

L'exploitation de la réponse :

La fonction « majIHM() » commence donc par vérifier la valeur de la propriété
« readyState ». Si celle-ci vaut 4 alors l'exécution de la requête est complète.

Dans ce cas, il faut vérifier le code retour de la réponse http. La valeur 200 indique que la
requête a correctement été traitée.

La fonction modifie alors le contenu de la page en modifiant son arbre DOM en utilisant la
valeur de la réponse. Cette valeur au format XML est obtenue en utilisant la fonction
« responseXML » de l'instance de XMLHttpRequest. La valeur au format texte brut peut être
obtenue en utilisant la fonction « responseText ».

Il est alors possible d'exploiter les données de la réponse selon le besoin.

3. Utilisation d’un Framework Ajax : DWR
3.1 Présentation
DWR (Direct Web Remoting) est une librairie JAVA facilitant grandement l'utilisation
d'AJAX dans les applications web en java.
Avec elle, plus besoin d'écrire soi-même le code javascript, les méthodes d'accès, de
réception et la sécurité, DWR s'occupe de tout.
Il suffit simplement d'écrire le code java, de faire appel aux JavaScripts auto-générés par
DWR dans vos JSP et le tour est joué.

27

DWR fait le lien entre 2 parties: Le code Javascript au sein du navigateur client qui
communique avec le serveur web et met à jour dynamiquement la page et une Servlet
Java qui tourne sur le serveur web qui réalise les requêtes et renvoie les réponses à
l'utilisateur

DWR encapsule les interactions entre le code Javascript côté client et les objets Java côté
serveur : ceci rend transparent l'appel de ces objets côté client.
La mise en oeuvre de DWR côté serveur est facile :
 Ajouter le fichier dwr.jar au classpath de l'application
 Configurer une servlet dédiée aux traitements des requêtes dans le fichier web.xml
 Ecrire les beans qui seront utilisés dans les pages
 Définir ces beans dans un fichier de configuration de DWR
La mise en oeuvre côté client nécessite d'inclure des bibliothèques Javascript générées
dynamiquement par la servlet de DWR. Il est alors possible d'utiliser les fonctions
Javascript générées pour appeler les méthodes des beans configurés côté serveur.
DWR s'intègre facilement dans une application web puisqu'il repose sur une servlet et plus
particulièrement avec celles mettant en oeuvre le framework Spring dont elle propose un
support. DWR est aussi inclus dans le framework WebWork depuis sa version 2.2.
DWR fournit aussi une bibliothèque Javascript proposant des fonctions de manipulations
courantes en DHTML : modifier le contenu des conteneurs <DIV> ou <SPAN>, remplir une
liste déroulante avec des valeurs, etc ...
DWR est une solution qui encapsule l'appel de méthodes de simples objets de type
Javabean exécutés sur le serveur dans du code Javascript généré dynamiquement. Le
grand intérêt est de masquer toute la complexité de l'utilisation de l'objet XMLHttpRequest
et de simplifier à l'extrême le code à développer côté serveur.
DWR se compose de deux parties :

28

 Du code javascript qui envoie des requêtes à la servlet et met à jour la page à
partir des données de la réponse
 Une servlet qui traite les requêtes reçues et renvoie une réponse au navigateur
Côté serveur, une servlet est déployée dans l'application web. Cette servlet a deux rôles
principaux :
 Elle permet de générer dynamiquement des bibliothèques de code Javascript. Deux
de celles-ci sont à usage général. Une bibliothèque de code est générée pour
chaque bean défini dans la configuration de DWR
 Elle permet de traiter les requêtes émises par le code Javascript générés pour
appeler la méthode d'un bean
DWR génère dynamiquement le code Javascript à partir des Javabeans configurés dans un
fichier de paramètres en utilisant l'introspection. Ce code se charge d'encapsuler les appels
aux méthodes du bean, ceci incluant la conversion du format des données de Javascript
vers Java et vice et versa. Ce mécanisme est donc similaire à d'autres solutions de type
RPC (remote procedure call).
Une fonction de type callback est précisée à DWR pour être exécutée à la réception de la
réponse de la requête vers la méthode d'un bean.
DWR facilite donc la mise en oeuvre d'Ajax avec Java côté serveur : il se charge de toute
l'intégration de Javabeans côté serveur pour permettre leur appel côté client de manière
transparente.
Le site officiel de DWR est à l'url : http://getahead.ltd.uk/dwr/ ou
https://dwr.dev.java.net/
La documentation de ce projet est particulièrement riche et de nombreux exemples sont
fournis sur le site.

3.2 Utilisation :
Pour utiliser le DWR :
 Il faut télécharger le fichier « dwr.jar » sur le site officiel de DWR et l'ajouter dans
le répertoire WEB-INF/Lib de l'application web qui va utiliser la bibliothèque.
 Il faut ensuite déclarer dans le fichier de déploiement de l'application « web.xml »
la servlet qui sera utilisée par DWR. Il faut déclarer la servlet et définir son
mapping :

Exemple :

01.<servlet>

02. <servlet-name>dwr-invoker</servlet-name>

03. <display-name>DWR Servlet</display-name>

29

04. <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class>

05. <init-param>

06. <param-name>debug</param-name>

07. <param-value>true</param-value>

08. </init-param>

09.</servlet>

10.<servlet-mapping>

11. <servlet-name>dwr-invoker</servlet-name>

12. <url-pattern>/dwr/*</url-pattern>

13.</servlet-mapping>

 Il faut créer un fichier de configuration pour DWR nommé « dwr.xml » dans le
répertoire WEB-INF de l'application

Exemple :


<dwr>

<allow>

<create creator="new" javascript="JDate">

<param name="class" value="java.util.Date"/>

</create>

</allow>

</dwr>

Ce fichier permet de déclarer à DWR la liste des beans qu'il devra encapsuler pour des
appels via Javascript. Dans l'exemple, c'est la classe « java.util.Date » fourni dans l'API
standard qui est utilisée.
Le « creator » de type "new" instancie la classe en utilisant le constructeur sans argument.
L'attribut javascript permet de préciser le nom de l'objet javascript qui sera utilisé côté
client.

30

Le tag « param » avec l'attribut « name » ayant pour valeur class permet de préciser le
nom pleinement qualifié du Bean à encapsuler.
DWR possède quelques restrictions :
 Il ne faut surtout pas utiliser de nom de méthode dans les beans exposés
correspondant à des mots réservés en Javascript. Un exemple courant est le mot
delete
 Il faut éviter l'utilisation de méthodes surchargées
Par défaut, DWR encapsule toutes les méthodes « public » de la classe définie. Il est donc
nécessaire de limiter les méthodes utilisables via DWR à celles requises par les besoins de
l'application soit dans la définition des membres de la classe soit dans le fichier de
configuration de DWR.

3.3 Exemple complet :
Dans cette partie, on va refaire le même exemple de validation de la saisie utilisateur (comme celui
du paragraphe 2.8)

Code source :

Le projet sera organisé comme suit :

Le répertoire « WebRot/lib » contiendra le « dwr.jar » (à téléchrager)

Le reste du code source est :

index.jsp
<html>
<head>
<title>Test de validation de données</title>
<script type="text/javascript" src="/TestDWR/dwr/interface/MonBeanJS.js"> </script>
<script type="text/javascript" src="/TestDWR/dwr/engine.js"> </script>
<script type='text/javascript' src='/TestDWR/dwr/util.js'></script>

<script type='text/javascript'>

31

</script>
</head>
<body onload="init();">
<table>
<tr>
<td>Valeur :</td>
<td nowrap><input type="text" id="donnees" name="donnees" size="30"
onblur="valider();"></td>
<td>
<div id="validationMessage"></div>
</td>
</tr>
</table>

</body>
</html>

L'exécution des traitements :

Le traitement de validation est assuré par la classe « MonBean»

application.action.MonBean

package application.action;

public class MonBean {

private String valeur;

public String getValeur() {
return valeur;
}
public void setValeur(String valeur) {
this.valeur = valeur;
}

32

public String validerValeur(String valeur) {
String resultat = "invalide";
if ((valeur != null) && valeur.startsWith("X")) {
resultat = "valide";
}
return resultat;
}

}

Le descripteur de déploiement de l'application contient la déclaration de la servlet de
DWR.

Web.xml

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet
</servlet-class>


<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>


<init-param>
<param-name>
initApplicationScopeCreatorsAtStartup
</param-name>
<param-value>true</param-value>
</init-param>

<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

</web-app>

33

Le fichier « dwr.xml » contient la déclaration de la classe de traitement DWR « MonBean »

Web.xml

<dwr>
<allow>
<create creator="new" javascript="MonBeanJS">
<param name="class" value="application.action.MonBean"/>
</create>

</allow>
</dwr>

3.4 Le fichier DWR.xml
Le fichier dwr.xml permet de configurer DWR. Il est généralement placé dans le répertoire
WEB-INF de l'application web exécutant DWR.
Le fichier dwr.xml à la structure suivante :

Exemple :


<dwr>

<init>

<creator id="..." class="..."/>

<converter id="..." class="..."/>

</init>

<allow>

<create creator="..." javascript="..."/>

<convert converter="..." match="..."/>

</allow>

<signatures>

...

</signatures>

</dwr>

34

Le tag optionnel <init> permet de déclarer ces propres créateurs et convertisseurs.
Généralement, ce tag n'est pas utilisé car les créateurs et convertisseurs fournis en
standard sont suffisants.
Le tag <allow> permet de définir les objets qui seront utilisés par DWR.
Le tag <create> permet de préciser la façon dont un objet va être instancié. Chaque classe
qui pourra être appelée via DWR doit être déclarée avec un tel tag. Ce tag possède la
structure suivante :

Exemple :
<allow>

<create creator="..." javascript="..." scope="...">

<param name="..." value="..."/>

<auth method="..." role="..."/>

<exclude method="..."/>

<include method="..."/>

</create>

...

</allow>

Les tags fils <param>, <auth>, <exclude>, <include> sont optionnels
La déclaration d'au moins un créateur est obligatoire. Il existe plusieurs types de créateur
spécifiés par l'attribut creator du tag fils <create> :

Type de
Rôle
créateur
new Instancie l'objet avec l'opérateur new
Ne créé aucune instance. Ceci est utile si la ou les méthodes utilisées sont
null
statiques
scripted Instancie l'objet en utilisant un script via BSF
spring Le framework Spring est responsable de l'instanciation de l'objet
jsf Utilise des objets de JSF
struts Utilise des ActionForms de Struts
pageflow Permet l'action au PageFlow de Beehive ou WebLogic

L'attribut Javascript permet de donner le nom de l'objet Javascript. Il ne faut pas utiliser
comme valeur un mot réservé de Javascript.
L'attribut optionnel scope permet de préciser la portée du bean. Les valeurs possibles sont
: application, session, request et page. Sa valeur par défaut est page.

35

Le tag <param> permet de fournir des paramètres au créateur. Par exemple, avec le
creator new, il est nécessaire de fournir en paramètre le nom de la classe dont la valeur
précise la classe pleinement qualifiée à instancier

Exemple :


<dwr>

<allow>

<create creator="new" javascript="JDate">

<param name="class" value="java.util.Date"/>

</create>

<create creator="new" javascript="TestDWR">

<param name="class" value="com.jmd.test.ajax.dwr.TestDWR"/>

</create>

</allow>

</dwr>

DWR propose un mécanisme via le fichier de configuration dwr.xml qui permet de limiter
les méthodes qui seront accessibles via DWR. Les tags <include> et <exclude> permettent
respectivement d'autoriser ou d'exclure l'utilisation d'une liste de méthodes. Ces deux tags
sont mutuellement exclusifs. En l'absence de l'un de ces deux tags, toutes les méthodes
sont utilisables.
Le tag <auth> permet de gérer la sécurité d'accès en utilisant les rôles J2EE de l'application
: DWR propose donc la prise en compte des rôles J2EE définis dans le conteneur web pour
restreindre l'accès à certaines classes.
Le tag <converter> permet de préciser la façon dont un objet utilisé en paramètre ou en
type de retour va être converti. Cette conversion est réalisée par un convertisseur qui
assure la transformation des données entre le format des objets client (Javascript) et
serveur (Java).
Chaque bean utilisé en tant que paramètre doit être déclaré dans un tel tag. Par défaut,
l'utilisation du tag <converter> est inutile pour les primitives, les wrapper de ces primitives
(Integer, Float, ...), la classe String, java.util.Date, les tableaux de ces types, les
collections (List, Set, Map, ...) et certains objets de manipulation XML issu de DOM, JDOM
et DOM4J.
Les convertisseurs Bean et Objet fournis en standard doivent être explicitement utilisés
dans le fichier dwr.xml pour des raisons de sécurité.

36

Exemple :


<dwr>

<allow>



</create>

<convert converter="bean" match="com.jmd.test.ajax.dwr.Personne"/>

</allow>

</dwr>

Il est possible d'utiliser le caractère joker *

Exemple :

<convert converter="bean" match="com.jmd.test.ajax.dwr.*"/>

<convert converter="bean" match="*"/>

Le convertisseur Bean permet de convertir un Bean en un tableau associatif Javascript et
vice et versa en utilisant les mécanismes d'introspection.

Exemple :

public class Personne {

public void setNom(String nom) { ... }

public void setTaille(int taille) { ... }

// ...

}

L'appel d'une méthode acceptant la classe Personne en paramètre peut se faire de la
manière suivante dans la partie cliente :

Exemple :

var personne = { nom:"Test", taille:33 };

37

TestDWR.setPersonne(personne);

Il est possible de restreindre l'accès à certaines propriétés d'un bean dans son
convertisseur.

Exemple :


<param name="exclude" value="dateNaissance, taille"/>

</convert>

Exemple :


<param name="include" value="nom, prenom"/>

</convert>

L'utilisation de ce dernier exemple est recommandée.
Le convertisseur Objet est similaire mais il utilise directement les membres plutôt que de
passer par les getter/setter.
Il possède un paramètre force qui permet d'autoriser l'accès aux membres privés de l'objet
par introspection.

Exemple :

<convert converter="object" match="com.jmd.test.ajax.dwr.Personne"/>

<param name="force" value="true"/>

</convert>

3.4 Les scripts engine.js et util.js
Pour utiliser ces deux bibliothèques, il est nécessaire de les déclarer dans chaque page
utilisant DWR.

Exemple :

<script type='text/javascript' src='/[WEB-APP]/dwr/engine.js'></script>

<script type='text/javascript' src='/[WEB-APP]/dwr/util.js'></script>

38

Le fichier engine.js est la partie principale côté Javascript puisqu'il assure toute la gestion
de la communication avec le serveur.
Certaines options de paramétrage peuvent être configurées en utilisant la fonction
DWREngine.setX().
Il est possible de regrouper plusieurs communications en une seule en utilisant les
fonctions DWREngine.beginBatch() et DWREngine.endBatch(). Lors de l'appel de cette
dernière, les appels sont réalisés vers le serveur. Ce regroupement permet de réduire le
nombre d'objets XMLHttpRequest créés et le nombre de requêtes envoyées au serveur.
Le fichier util.js propose des fonctions utilitaires pour faciliter la mise à jour dynamique de
la page. Ces fonctions ne sont pas dépendantes d'autres éléments de DWR.

Fonction Rôle
Encapsuler un appel à la fonction document.getElementById()
$(id)
comme dans la bibliothèque Prototype
addOptions Ajouter des éléments dans une liste ou un tag <ul> ou <ol>
removeAllOptions Supprimer tous les éléments d'une liste ou un tag <ul> ou <ol>
addRows Ajouter une ligne dans un tableau
removeAllRows Supprimer toutes les lignes dans un tableau
getText Renvoyer la valeur sélectionnée dans une liste
getValue Renvoyer la valeur d'un élément HTML
Obtenir les valeurs de plusieurs éléments fournis sous la forme
getValues d'un ensemble de paire clé:valeur_vide dont la clé est l'id de
l'élément à traiter
Gérer l'appui sur la touche return avec un support multi-
onReturn
navigateur
selectRange(id, Gérer une sélection dans une zone de texte avec un support
debut,fin) multi-navigateur
setValue(id,value) Mettre à jour la valeur d'un élément
Mettre à jour les valeurs de plusieurs éléments fournis sous la
setValues forme d'un ensemble de paire clé:valeur dont la clé est l'id de
l'élément à modifier
toDescriptiveString(id, Afficher des informations sur un objet avec un niveau de détail
level) (0, 1ou 2)
Mettre en place un message de chargement lors des échanges
useLoadingMessage
avec le serveur

3.5 Les scripts client générés
DWR assure un mapping entre les méthodes des objets Java et les fonctions Javascript
générées. Chaque objet Java est mappé sur un objet Javascript dont le nom correspond à
la valeur de l'attribut javascript du creator correspondant dans le fichier de configuration
de DWR.

39

Le nom des méthodes est conservé comme nom de fonction dans le code Javascript. Le
premier paramètre de toutes les fonctions générées par DWR est la fonction de type
callback qui sera exécutée à la réception de la réponse. Les éventuels autres paramètres
correspondant à leur équivalent dans le code Java.
DWR s'occupe de transformer un objet Java en paramètre ou en résultat en un équivalent
dans le code Javascript. Par exemple, une collection Java est transformée en un tableau
d'objets Javascript de façon transparente. Ceci rend transparent la conversion et facilite
donc leur utilisation.
L'utilisation de la bibliothèque util.js peut être particulièrement pratique pour faciliter
l'exploitation des données retournées et utilisées par les fonctions générées.
Des exemples d'utilisation sont fournis dans les sections d'exemples suivantes.

3.6 Exemples :

Exemple pour remplir dynamiquement une liste déroulante :
Cet exemple va remplir dynamiquement le contenu d'une liste déroulante en fonction de la
valeur d'une zone de saisie.

Côté serveur la méthode getListeValeurs() du bean est appelée pour obtenir les valeurs de
la liste déroulante. Elle attend en paramètre une chaîne de caractères et renvoie un
tableau de chaînes de caractères.

Exemple :

package com.jmd.test.ajax.dwr;

40

public class TestDWR {

public String[] getListeValeurs(String valeur)

{

String[] resultat = new String[10];

for(int i = 0 ; i <10;i++ ) {

resultat[i] = valeur+"00"+i;

}

return resultat;

}

}

La page de l'application est composée d'une zone de saisie et d'une liste déroulante.

Exemple :




<html>

<head>


<title>Test remplir liste deroulante avec DWR</title>

<script type='text/javascript'
src='/testwebapp/dwr/interface/TestDWR.js'></script>

<script type='text/javascript' src='/testwebapp/dwr/engine.js'></script>

<script type='text/javascript' src='/testwebapp/dwr/util.js'></script>


<!--

function rafraichirListeValeurs() {

TestDWR.getListeValeurs(remplirListeValeurs, $("valeur").value);

}

41

function remplirListeValeurs(data) {

DWRUtil.removeAllOptions("listevaleurs");

DWRUtil.addOptions("listevaleurs", data);

DWRUtil._selectListItem($("listevaleurs"),$("listevaleurs").options[0].va
lue);

}

function init() {


rafraichirListeValeurs();

}

-->

</script>

</head>


<p>Valeur : <input type="text" id="valeur"

onblur="rafraichirListeValeurs();" /><br />

Liste de valeurs : <select id="listevaleurs" style="vertical-
align:top;"></select>

</p>

</body>

</html>

La fonction init() se charge d'initialiser le contenu de la liste déroulante au chargement de
la page.
La fonction rafraichirListeValeurs() est appelée dès que la zone de saisie perd le focus. Elle
utilise la fonction Javascript TestDWR.getListeValeurs() générée par DWR pour appeler la
méthode du même nom du bean. Les deux paramètres fournis à cette fonction permettent
de préciser que c'est la fonction remplirListeValeurs() qui fait office de fonction de
callback et fournir la valeur de la zone de saisie en paramètre de l'appel de la méthode
getListeValeurs() du bean.
La fonction remplirListeValeurs() se charge de vider la liste déroulante, de remplir son
contenu avec les données reçues en réponse du serveur (elles sont passées en paramètre

42

de la fonction) et de sélectionner le premier élément de la liste. Pour ces trois actions,
trois fonctions issues de la bibliothèque util.js de DWR sont utilisées.
La fonction addOptions() utilise les données passées en paramètre pour remplir la liste.

Exemple pour afficher dynamiquement des informations
L'exemple de cette section va permettre d'afficher dynamiquement les données d'une
personne sélectionnée. L'exemple est volontairement simpliste (la liste déroulante des
personnes est en dur et les données de la personne sont calculées plutôt qu'extraite d'une
base de données). Le but principal de cet exemple est de montrer la facilité d'utilisation
des beans mappés par DWR dans le code Javascript.
Le bean utilisé encapsule les données d'une personne

Exemple :

package com.jmd.test.ajax.dwr;

import java.util.Date;

public class Personne {

private String nom;

private String prenom;

private String dateNaissance;

private int taille;

public Personne() {

super();

}

public Personne(String nom, String prenom, String dateNaissance, int
taille) {

super();

this.nom = nom;

this.prenom = prenom;

this.dateNaissance = dateNaissance;

this.taille = taille;

}

public String getDateNaissance() {

43

return dateNaissance;

}

public void setDateNaissance(String dateNaissance) {

this.dateNaissance = dateNaissance;

}

public String getNom() {

return nom;

}

public void setNom(String nom) {

this.nom = nom;

}

public String getPrenom() {

return prenom;

}

public void setPrenom(String prenom) {

this.prenom = prenom;

}

public int getTaille() {

return taille;

}

public void setTaille(int taille) {

this.taille = taille;

} }

La page est composée d'une liste déroulante de personnes. Lorsqu'une personne est
sélectionnée, les données de cette personne sont demandées au serveur et sont affichées.

Exemple :



44

<html>

<head>


<title>Test affichage de données dynamique</title>







</script>

</head>


<table>

45

<tr>

<td>Personne :</td>

<td nowrap><select id="personnes" name="personnes"

onchange="rafraichir();">

<option value="1">Personne 1</option>




</select>

</td>

<td>

<div id="informationPersonne">

<table bgcolor="#eeeeee" width="250">

<tr><td>Nom</td><td><span id="nomPersonne"></span></td></tr>

<tr><td>Prenom</td><td><span id="prenomPersonne"></span></td></tr>

<tr><td>Date de naissance</td><td><span
id="datenaissPersonne"></span></td></tr>

<tr><td>Taille</td><td><span id="taillePersonne"></span></td></tr>

</table>

</div>

</td>

</tr>

</table>

</body>

</html>

46

Exemple : le source de la méthode du bean qui recherche les données de la personne

public Personne getPersonne(String id) { int valeur =
Integer.parseInt(id);

if (valeur < 10) {

id = "0"+id;

}

Personne resultat = new
Personne("nom"+id,"prenom"+id,id+"/05/2006",170+valeur);

return resultat;

}

Dans le fichier de configuration dwr.xml, un convertisseur de type bean doit être déclaré
pour le bean de type Personne

Exemple :

<allow>



</create>


</allow>

Exemple pour mettre à jour de données
Cet exemple va permettre de modifier les données d'une personne.

47

Il suffit de modifier les données et de cliquer sur le bouton valider

Les données sont envoyées sur le serveur.

Exemple :

INFO: Exec[0]: TestDWR.setPersonne()

nom=nom1234mod

prenom=prenom1234mod

datenaiss=1234/05/2006mod

taille14045

Exemple : la source de la méthode du bean qui recherche les données de la personne

48

public void setPersonne(Personne personne) {

System.out.println("nom="+personne.getNom());

System.out.println("prenom="+personne.getPrenom());

System.out.println("datenaiss="+personne.getDateNaissance());

System.out.println("taille"+personne.getTaille());

// code pour rendre persistant l'objet fourni en paramètre

}

Cette méthode affiche simplement les données reçues. Dans un contexte réel, elle
assurerait les traitements pour rendre persistantes les modifications dans les données
reçues.
La page de l'application est la suivante.

Exemple :




<html>

<head>


<title>Test mise à jour de données dynamique</title>





<!--

var personne;

function rafraichir() {

TestDWR.getPersonne(afficherPersonne, "1234");

49

}

function afficherPersonne(data) {

personne = data;

DWRUtil.setValues(data);

}

function majPersonne()

{ DWRUtil.getValues(personne);

TestDWR.setPersonne(personne);

}

function init() {


rafraichir();

}

-->

</script>

</head>


<table>

<tr>

<td>Personne :</td>

<td>

<div id="informationPersonne">

<table bgcolor="#eeeeee" width="250">

<tr><td>Nom</td><td><input type="text" id="nom"></td></tr>

<tr><td>Prenom</td><td><input type="text" id="prenom"></td></tr>

<tr><td>Date de naissance</td><td><input type="text"
id="dateNaissance"></td></tr>

<tr><td>Taille</td><td><input type="text" id="taille"></td></tr>

<tr><td colspan="2"><a

50

href="javascript:majPersonne();">Valider</a></td></tr>

</table>

</div>

</td>

</tr>

</table>

</body>

</html>

Cet exemple utilise les fonctions getValues() et setValues() qui mappent automatiquement
les propriétés d'un objet avec les objets de l'arbre DOM dont l'id correspond.
Remarque : il est important que l'objet personne qui encapsule les données de la personne
soit correctement initialisé, ce qui est fait au chargement des données de la personne.

51

Ajax1 v3+

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (6)

Similaire à Ajax1 v3+

Similaire à Ajax1 v3+ (20)

Ajax1 v3+