SlideShare une entreprise Scribd logo
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="ID" type="string">02</field>
                     <field name="NOM" type="string">Aisne</field>
                 </record>
                 <record>
                      <field name="ID" type="string">03</field>


                                               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">
    <!--
    var requete;

    function valider() {
      var donnees = document.getElementById("donnees");
      var url = "valider?valeur=" + escape(donnees.value);
      if (window.XMLHttpRequest) {
          requete = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          requete = new ActiveXObject("Microsoft.XMLHTTP");
      }
      requete.open("GET", url, true);
      requete.onreadystatechange = majIHM;
      requete.send(null);
    }

    function majIHM() {
     var message = "";

      if (requete.readyState == 4) {
        if (requete.status == 200) {
          // exploitation des données de la réponse
          var messageTag =
    requete.responseXML.getElementsByTagName("message")[0];
          message = messageTag.childNodes[0].nodeValue;
          mdiv = document.getElementById("validationMessage");
          if (message == "invalide") {
             mdiv.innerHTML = "<img src='images/invalide.gif'>";
          } else {
             mdiv.innerHTML = "<img src='images/valide.gif'>";
          }
        }
      }
    }

    //-->
    </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 :

<?xml version="1.0" encoding="ISO-8859-1"?>

<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
<%@ 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 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
<!--
function valider() {
  MonBeanJS.validerValeur( $("donnees").value,afficherValidation);
}
function afficherValidation(data) {
  DWRUtil.setValue("validationMessage",data);
  if (data == "valide") {
    $("validationMessage").style.color='#00FF00';
  } else {
    $("validationMessage").style.color='#FF0000';
  }
}
function init() {
  DWRUtil.useLoadingMessage();
}
-->
</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

<?xml version="1.0" encoding="UTF-8"?>
<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>

             <!-- This should NEVER be present in live -->
             <init-param>
                     <param-name>debug</param-name>
                     <param-value>true</param-value>
             </init-param>

<!-- By default DWR creates application scope objects when they are first
                      used. This creates them when the app-server is started -->
              <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
<?xml version="1.0" encoding="ISO-8859-1"?>

<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 :

<?xml version="1.0" encoding="UTF-8"?>

 <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 :

<?xml version="1.0" encoding="ISO-8859-1"?>

<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 :

<?xml version="1.0" encoding="UTF-8"?>

<dwr>

    <allow>

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

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

      </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 :

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

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

</convert>



Exemple :

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

  <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 :

<%@ 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 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>

<script type='text/javascript'>

<!--

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() {

    DWRUtil.useLoadingMessage();

    rafraichirListeValeurs();

}

-->

</script>

</head>

<body onload="init();">

 <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 :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

      pageEncoding="ISO-8859-1"%>




                                           44
<!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 affichage de données dynamique</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>

<script type='text/javascript'>

<!--

function rafraichir() {

    TestDWR.getPersonne(afficherPersonne, $("personnes").value);

}

function afficherPersonne(data) {

    DWRUtil.setValue("nomPersonne",data.nom);

    DWRUtil.setValue("prenomPersonne",data.prenom);

    DWRUtil.setValue("datenaissPersonne",data.dateNaissance);

    DWRUtil.setValue("taillePersonne",data.taille);

}

function init() {

    DWRUtil.useLoadingMessage();

}

-->

</script>

</head>

<body onload="init();">

<table>




                                       45
<tr>

          <td>Personne :</td>

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

              onchange="rafraichir();">

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

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

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

              <option value="4">Personne 4</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 creator="new" javascript="TestDWR">

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

    </create>

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

</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 :

<%@ 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 mise à jour de données dynamique</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>

<script type='text/javascript'>

<!--

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() {

    DWRUtil.useLoadingMessage();

    rafraichir();

}

-->

</script>

</head>

<body onload="init();">

<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

Contenu connexe

Tendances

Web 2.0 en bibliothèque - éléments de réflexion
Web 2.0 en bibliothèque - éléments de réflexionWeb 2.0 en bibliothèque - éléments de réflexion
Web 2.0 en bibliothèque - éléments de réflexion
Sylvain Machefert
 
Initiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outilsInitiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outils
URFIST de Paris
 
Web 2.0 : Blogs, RSS & Wikis
Web 2.0 : Blogs, RSS & WikisWeb 2.0 : Blogs, RSS & Wikis
Web 2.0 : Blogs, RSS & Wikis
Bruno Bernard SIMON
 
Web2.0 pour les nuls
Web2.0 pour les nulsWeb2.0 pour les nuls
Web2.0 pour les nuls
Alain Grappe
 
Outils web et leurs usages en bibliothèque
Outils web et leurs usages en bibliothèqueOutils web et leurs usages en bibliothèque
Outils web et leurs usages en bibliothèque
xavberton
 
Le Web 2.0 en bibliothèques (Nov.2009)
Le Web 2.0 en bibliothèques (Nov.2009)Le Web 2.0 en bibliothèques (Nov.2009)
Le Web 2.0 en bibliothèques (Nov.2009)
KOMOROWSKI Corinne
 
Web 2.0 - France Gestion
Web 2.0 - France GestionWeb 2.0 - France Gestion
Web 2.0 - France Gestion
Xavier LAIR
 
Netvibes
NetvibesNetvibes
Web 2.0 école doctorale
Web 2.0 école doctoraleWeb 2.0 école doctorale
Web 2.0 école doctorale
carovalerie37
 
Usages des TIC dans l’éducation
Usages des TIC dans l’éducationUsages des TIC dans l’éducation
Usages des TIC dans l’éducation
mirjamschaap
 
Création de blog chez Blogger
Création de blog chez BloggerCréation de blog chez Blogger
Création de blog chez Blogger
MEMOIRE PATRIMOINE CLOHARS CARNOET
 
Educ 3214
Educ 3214Educ 3214
Educ 3214
ynnek
 
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
novantura
 
Mididizi netvibes-jja
Mididizi netvibes-jjaMididizi netvibes-jja
Mididizi netvibes-jja
Commissariat Easi-Wal
 

Tendances (18)

Web 2.0 en bibliothèque - éléments de réflexion
Web 2.0 en bibliothèque - éléments de réflexionWeb 2.0 en bibliothèque - éléments de réflexion
Web 2.0 en bibliothèque - éléments de réflexion
 
Initiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outilsInitiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outils
 
Web 2.0 : une introduction
Web 2.0 : une introductionWeb 2.0 : une introduction
Web 2.0 : une introduction
 
Web 2.0 : Blogs, RSS & Wikis
Web 2.0 : Blogs, RSS & WikisWeb 2.0 : Blogs, RSS & Wikis
Web 2.0 : Blogs, RSS & Wikis
 
Web2.0 pour les nuls
Web2.0 pour les nulsWeb2.0 pour les nuls
Web2.0 pour les nuls
 
Outils web et leurs usages en bibliothèque
Outils web et leurs usages en bibliothèqueOutils web et leurs usages en bibliothèque
Outils web et leurs usages en bibliothèque
 
Le Web 2.0 en bibliothèques (Nov.2009)
Le Web 2.0 en bibliothèques (Nov.2009)Le Web 2.0 en bibliothèques (Nov.2009)
Le Web 2.0 en bibliothèques (Nov.2009)
 
xfruits
xfruitsxfruits
xfruits
 
Web 2.0 - France Gestion
Web 2.0 - France GestionWeb 2.0 - France Gestion
Web 2.0 - France Gestion
 
Netvibes
NetvibesNetvibes
Netvibes
 
Créer son blog avec Blogger
Créer son blog avec BloggerCréer son blog avec Blogger
Créer son blog avec Blogger
 
Web 2.0 école doctorale
Web 2.0 école doctoraleWeb 2.0 école doctorale
Web 2.0 école doctorale
 
Usages des TIC dans l’éducation
Usages des TIC dans l’éducationUsages des TIC dans l’éducation
Usages des TIC dans l’éducation
 
Création de blog chez Blogger
Création de blog chez BloggerCréation de blog chez Blogger
Création de blog chez Blogger
 
Educ 3214
Educ 3214Educ 3214
Educ 3214
 
Le Web 2
Le Web 2Le Web 2
Le Web 2
 
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
2007 06 07 Les Usages Et Les Outils Du Web 2.0 Au Service De La Formation Et ...
 
Mididizi netvibes-jja
Mididizi netvibes-jjaMididizi netvibes-jja
Mididizi netvibes-jja
 

En vedette

Research and planning
Research and planningResearch and planning
Research and planning
eham123
 
Penelitian kualitatif
Penelitian kualitatifPenelitian kualitatif
Penelitian kualitatif
al-buftain Murtadha
 
File sistem04
File sistem04File sistem04
File sistem04
Wahyu Hasibuan
 
Research and planning final
Research and planning finalResearch and planning final
Research and planning final
eham123
 
Chico s
Chico sChico s
Chico s
papnoo
 
Why cloud telephony
Why cloud telephonyWhy cloud telephony
Why cloud telephony
Tushar Bhargava
 

En vedette (6)

Research and planning
Research and planningResearch and planning
Research and planning
 
Penelitian kualitatif
Penelitian kualitatifPenelitian kualitatif
Penelitian kualitatif
 
File sistem04
File sistem04File sistem04
File sistem04
 
Research and planning final
Research and planning finalResearch and planning final
Research and planning final
 
Chico s
Chico sChico s
Chico s
 
Why cloud telephony
Why cloud telephonyWhy cloud telephony
Why cloud telephony
 

Similaire à Ajax1 v3+

Atelier Aefnb 28 AoûT 2007
Atelier Aefnb 28 AoûT 2007Atelier Aefnb 28 AoûT 2007
Atelier Aefnb 28 AoûT 2007
ynnek
 
Archives & Archivistes 2.0
Archives & Archivistes 2.0Archives & Archivistes 2.0
Archives & Archivistes 2.0
souslapoussiere
 
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
Thomas Chaimbault-Petitjean
 
RSS et veille technologique
RSS et veille technologiqueRSS et veille technologique
RSS et veille technologique
mastertic
 
Web2.0urfist
Web2.0urfistWeb2.0urfist
Web2.0urfist
Olivier Le Deuff
 
Ardesi
ArdesiArdesi
Ardesi
celinevenica
 
Web 2.0 école doctorale
Web 2.0 école doctoraleWeb 2.0 école doctorale
Web 2.0 école doctorale
carovalerie37
 
5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn
Ludovic Dublanchet
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et Syndication
Tarn Tourisme
 
Web curation
Web curationWeb curation
Web curation
E2m Gig
 
Outils Web 2.0 appliqués aux bibliothèques
Outils Web 2.0 appliqués aux bibliothèquesOutils Web 2.0 appliqués aux bibliothèques
Outils Web 2.0 appliqués aux bibliothèques
KOMOROWSKI Corinne
 
Les outils du web 2.0
Les outils du web 2.0Les outils du web 2.0
Les outils du web 2.0
Sophie Bib
 
Les outils du web 2.0
Les outils du web 2.0Les outils du web 2.0
Les outils du web 2.0
Sophie C.
 

Similaire à Ajax1 v3+ (20)

Nveaux outils web
Nveaux outils webNveaux outils web
Nveaux outils web
 
Nveaux outils web
Nveaux outils webNveaux outils web
Nveaux outils web
 
Evolution du web2.0
Evolution du web2.0Evolution du web2.0
Evolution du web2.0
 
Atelier Aefnb 28 AoûT 2007
Atelier Aefnb 28 AoûT 2007Atelier Aefnb 28 AoûT 2007
Atelier Aefnb 28 AoûT 2007
 
Archives & Archivistes 2.0
Archives & Archivistes 2.0Archives & Archivistes 2.0
Archives & Archivistes 2.0
 
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
Des bibliothèques 2.0 ? Quand les bibliothèques s'emparent des outils du web ...
 
RSS et veille technologique
RSS et veille technologiqueRSS et veille technologique
RSS et veille technologique
 
Web2.0urfist
Web2.0urfistWeb2.0urfist
Web2.0urfist
 
Atelier FROTSI
Atelier FROTSIAtelier FROTSI
Atelier FROTSI
 
Ardesi
ArdesiArdesi
Ardesi
 
Web 2.0 école doctorale
Web 2.0 école doctoraleWeb 2.0 école doctorale
Web 2.0 école doctorale
 
5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et Syndication
 
Web curation
Web curationWeb curation
Web curation
 
Outils Web 2.0 appliqués aux bibliothèques
Outils Web 2.0 appliqués aux bibliothèquesOutils Web 2.0 appliqués aux bibliothèques
Outils Web 2.0 appliqués aux bibliothèques
 
Les Outils Du Web 2
Les  Outils Du  Web 2Les  Outils Du  Web 2
Les Outils Du Web 2
 
Web 2.0 en bibliothèques
Web 2.0 en bibliothèquesWeb 2.0 en bibliothèques
Web 2.0 en bibliothèques
 
Les outils du web 2.0
Les outils du web 2.0Les outils du web 2.0
Les outils du web 2.0
 
Web 2.0 tools
Web 2.0 toolsWeb 2.0 tools
Web 2.0 tools
 
Les outils du web 2.0
Les outils du web 2.0Les outils du web 2.0
Les outils du web 2.0
 

Ajax1 v3+

  • 1. 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
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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="ID" type="string">02</field> <field name="NOM" type="string">Aisne</field> </record> <record> <field name="ID" type="string">03</field> 16
  • 17. <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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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"> <!-- var requete; function valider() { var donnees = document.getElementById("donnees"); var url = "valider?valeur=" + escape(donnees.value); if (window.XMLHttpRequest) { requete = new XMLHttpRequest(); } else if (window.ActiveXObject) { requete = new ActiveXObject("Microsoft.XMLHTTP"); } requete.open("GET", url, true); requete.onreadystatechange = majIHM; requete.send(null); } function majIHM() { var message = ""; if (requete.readyState == 4) { if (requete.status == 200) { // exploitation des données de la réponse var messageTag = requete.responseXML.getElementsByTagName("message")[0]; message = messageTag.childNodes[0].nodeValue; mdiv = document.getElementById("validationMessage"); if (message == "invalide") { mdiv.innerHTML = "<img src='images/invalide.gif'>"; } else { mdiv.innerHTML = "<img src='images/valide.gif'>"; } } } } //--> </script> </head> <body> <table> <tr> <td>Valeur :</td> <td nowrap> 22
  • 23. <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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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 : <?xml version="1.0" encoding="ISO-8859-1"?> <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
  • 31. 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 <%@ 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 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
  • 32. <!-- function valider() { MonBeanJS.validerValeur( $("donnees").value,afficherValidation); } function afficherValidation(data) { DWRUtil.setValue("validationMessage",data); if (data == "valide") { $("validationMessage").style.color='#00FF00'; } else { $("validationMessage").style.color='#FF0000'; } } function init() { DWRUtil.useLoadingMessage(); } --> </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
  • 33. 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 <?xml version="1.0" encoding="UTF-8"?> <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> <!-- This should NEVER be present in live --> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <!-- By default DWR creates application scope objects when they are first used. This creates them when the app-server is started --> <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
  • 34. Le fichier « dwr.xml » contient la déclaration de la classe de traitement DWR « MonBean » Web.xml <?xml version="1.0" encoding="ISO-8859-1"?> <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 : <?xml version="1.0" encoding="UTF-8"?> <dwr> <init> <creator id="..." class="..."/> <converter id="..." class="..."/> </init> <allow> <create creator="..." javascript="..."/> <convert converter="..." match="..."/> </allow> <signatures> ... </signatures> </dwr> 34
  • 35. 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
  • 36. 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 : <?xml version="1.0" encoding="ISO-8859-1"?> <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
  • 37. Exemple : <?xml version="1.0" encoding="UTF-8"?> <dwr> <allow> <create creator="new" javascript="TestDWR"> <param name="class" value="com.jmd.test.ajax.dwr.TestDWR"/> </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
  • 38. TestDWR.setPersonne(personne); Il est possible de restreindre l'accès à certaines propriétés d'un bean dans son convertisseur. Exemple : <convert converter="bean" match="com.jmd.test.ajax.dwr.Personne"/> <param name="exclude" value="dateNaissance, taille"/> </convert> Exemple : <convert converter="bean" match="com.jmd.test.ajax.dwr.Personne"/> <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
  • 39. 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
  • 40. 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
  • 41. 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 : <%@ 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 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> <script type='text/javascript'> <!-- function rafraichirListeValeurs() { TestDWR.getListeValeurs(remplirListeValeurs, $("valeur").value); } 41
  • 42. function remplirListeValeurs(data) { DWRUtil.removeAllOptions("listevaleurs"); DWRUtil.addOptions("listevaleurs", data); DWRUtil._selectListItem($("listevaleurs"),$("listevaleurs").options[0].va lue); } function init() { DWRUtil.useLoadingMessage(); rafraichirListeValeurs(); } --> </script> </head> <body onload="init();"> <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
  • 43. 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
  • 44. 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 : <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 44
  • 45. <!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 affichage de données dynamique</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> <script type='text/javascript'> <!-- function rafraichir() { TestDWR.getPersonne(afficherPersonne, $("personnes").value); } function afficherPersonne(data) { DWRUtil.setValue("nomPersonne",data.nom); DWRUtil.setValue("prenomPersonne",data.prenom); DWRUtil.setValue("datenaissPersonne",data.dateNaissance); DWRUtil.setValue("taillePersonne",data.taille); } function init() { DWRUtil.useLoadingMessage(); } --> </script> </head> <body onload="init();"> <table> 45
  • 46. <tr> <td>Personne :</td> <td nowrap><select id="personnes" name="personnes" onchange="rafraichir();"> <option value="1">Personne 1</option> <option value="2">Personne 2</option> <option value="3">Personne 3</option> <option value="4">Personne 4</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
  • 47. 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 creator="new" javascript="TestDWR"> <param name="class" value="com.jmd.test.ajax.dwr.TestDWR"/> </create> <convert converter="bean" match="com.jmd.test.ajax.dwr.Personne"/> </allow> Exemple pour mettre à jour de données Cet exemple va permettre de modifier les données d'une personne. 47
  • 48. 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
  • 49. 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 : <%@ 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 mise à jour de données dynamique</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> <script type='text/javascript'> <!-- var personne; function rafraichir() { TestDWR.getPersonne(afficherPersonne, "1234"); 49
  • 50. } function afficherPersonne(data) { personne = data; DWRUtil.setValues(data); } function majPersonne() { DWRUtil.getValues(personne); TestDWR.setPersonne(personne); } function init() { DWRUtil.useLoadingMessage(); rafraichir(); } --> </script> </head> <body onload="init();"> <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
  • 51. 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