• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajax1 v3+
 

Ajax1 v3+

on

  • 1,268 views

 

Statistics

Views

Total Views
1,268
Views on SlideShare
1,268
Embed Views
0

Actions

Likes
1
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax1 v3+ Ajax1 v3+ Document Transcript

    • 1. L’évolution du Web1.1 Le Web 1.0Le World Wilde Web, plus souvent désigné par l’acronyme WWW, appelé également Webest apparu au début des années 90 et représente les sites Internet dits statiques ; c’est ceque 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 lienshypertextes et hébergés sur un serveur ; l’utilisateur peut y accéder à travers unnavigateur Internet comme Internet Explorer de Microsoft depuis n’importe où dans lemonde.Les pages composant le Web 1.0 ne sont pas régulièrement mises à jour et une personneconsultant 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 contenuqui devient dynamique, c’est ce que l’on pourrait appeler le Web 1.5.1.2 Le Web 2.0Aussi appelé Web participatif, le Web 2.0 est un concept qui est apparu pour la premièrefois en août 2004 lors d’une conférence « brainstorming » 5 entre deux sociétés, O’Reilly etMedialive International.Aujourd’hui encore il est difficile de décrire exactement ce qu’est le Web 2.0, mais s’iln’est pas possible de donner une définition précise du terme il est en revanche possibled’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 » etsites « 2.0 », issu du brainstorming cité plus haut. Parmi ceux-ci, deux sontparticulièrement parlants, à savoir que des sites personnels du Web 1.0, le Web 2.0 aamené les blogs7 et que les publications du Web 1.0 ont évolué en participation avec leWeb 2.0. Ces deux exemples montrent bien que l’appellation Web participatif du Web 2.0n’est pas usurpée. Ainsi YouTube8, l’un des sites les plus populaires de la planète à l’heureactuelle, ne serait rien sans l’apport de ses membres, de même que l’encyclopédie enligne Wikipedia9.Alors qu’avec le Web 1.0 l’internaute était passif, celui-ci devient actif avec le Web 2.0. Ilpeut 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 unepage 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 desservices en ligne permettant de créer des documents, des feuilles de calcul ou encore desprésentations. Ces fichiers sont ensuite stockés en ligne et permettent aux internautes detravailler 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. Autravers des blogs tout d’abord, où les commentaires des lecteurs apportent souvent un plusnon négligeable au texte de base, mais aussi aux travers de sites tels que MySpace 14 ouencore, pour celui que nous trouvons le plus intéressant, Facebook15Facebook est un site communautaire ayant pour but de retrouver des amis inscrits euxaussi sur le site. À la base réservée aux seuls étudiants de Harvard, il est maintenantouvert à tous.Facebook permet donc de retrouver très simplement des personnes en entrant leur nomet/ou d’autres informations. En examinant le profil d’une personne on peut voir ses amisainsi que ceux que l’on a éventuellement en commun et ainsi retrouver des personnes enquelques clics, puis reprendre contact avec elles via une messagerie publique ou privée. Ilest aussi possible de se joindre à divers groupes, permettant ainsi aux utilisateurs de secré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 diversestelles 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 duWeb où chaque internaute est acteur d’un réseau social dont il partage les informations. 2
    • Web1.0 : Linternaute était un lecteur. Web2.0 : Linternaute est un contributeur1.3 Les outils du web 2.01.3.1 Blog : la partie émergée du web 2.0Blog : 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 deblogueurs sont des ados certes, mais pas seulement. Ce sont aussi des passionnés, despersonnes très compétentes dans leur domaine, qui désirent échanger avec unecommunauté qui partage les mêmes centres dintérêt.Il en existe tellement quon peine à prendre la mesure réelle du phénomène et que lonsintéresse aujourdhui à la Blogosphère!Blogosphère : lensemble des blogs dont lune des caractéristiques principale est la mise enplace dune multitude de liens croisés. 3
    • 1.3.2 CMS : Système de gestion de contenuUne solution de gestion de contenu repose sur un logiciel qui permet à un groupedutilisateurs non techniciens dalimenter eux-mêmes le contenu dun site (Internet,Intranet, Extranet) et den gérer la mise à jour. Ils permettent la mise en place dun sitedynamique en toute autonomie (la gestion et ladministration du site se font sanscompétences techniques spécifiques).Le gestionnaire de contenu à cette particularité de traiter séparément le contenu et laforme dun 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 à laide dunnavigateur internet (IE, Firefox etc.).Le CMS permet la mise en place dun 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.fr1.3.3 Fils ou flux RSSIl sagit dun fichier texte particulier dont le contenu est produit automatiquement (saufcas exceptionnels) en fonction des mises à jour dun site Web. Ce contenu est laissé aulibre choix du producteur du flux, mais principalement, un fil RSS est un fichier contenantle titre de linformation, une courte description et un lien vers une page décrivant plus endétail linformation. Cela permet à un site web de diffuser largement ses actualités tout enrécupérant un grand nombre de visiteurs grâce au lien hypertexte permettant au lecteurde lire la suite de lactualité en ligne.Lémission dun flux RSS, sappelle la syndication de contenu. La majorité des pages quevous 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 ducontenu 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èrentautomatiquement 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èssouvent en un clic ou un copier/coller.1.3.4 Agrégateur (lecteurs) de flux RSSUn agrégateur (de laméricain aggregator) est un logiciel qui permet de suivre plusieursflux RSS en même temps.Les sources de contenu, des sites web en général, mettent à disposition un ou plusieursflux RSS mis à jour plus ou moins régulièrement. Cette première phase, lémission dun filde contenu, consiste en la syndication de contenu, cest-à-dire en la mise à dispositionstructurée de données. Lagrégation consiste elle à sabonner à un ou plusieurs de ces flux.Leurs mises à jour sont alors détectées automatiquement par lagrégateur, et lutilisateuren est averti aussitôt, sans avoir à visiter périodiquement les sites internet diffusant les filsde syndication auxquels il sest abonné.Lintérêt dun agrégateur réside donc dans sa double faculté à :  prévenir automatiquement de la mise à jour dun site web (ou des actualités quil publie);  le faire pour un ensemble de sites.1.3.5 WikiUn wiki est un système de gestion de contenu de site Web qui rend les pages Weblibrement et également modifiables par tous les visiteurs autorisés. On utilise les wikispour 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 modepar défaut, et le mode dédition, qui présente la page sous une forme qui permet de lamodifier.En mode dédition, le texte de la page, affiché dans un formulaire Web, senrichit duncertain nombre de caractères supplémentaires, suivant les règles dune syntaxeinformatique particulière : le wiki texte, qui permet dindiquer 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 24heures sur 24, 7 jours sur 7 par une communauté dutilisateurs expérimentés poursuivantun même but.Dès quune information est modifiée, les contributeurs réguliers qui sintéressent à la pagecorrespondante peuvent aller vérifier et, au besoin, corriger ou compléter linformation.Quelques exemples :www.wikipedia.fr  http://web2fr.com/Accueil  http://annuaire-wiki.com/Accueil1.3.6 Contenu généré par les utilisateursLe contenu généré par les utilisateurs (en Anglais User generated content) se référer à unensemble de médias dont le contenu est principalement, soit produit soit directementinfluencé par les utilisateurs finaux. Il est opposé au contenu traditionnel produit, venduou diffusé par les entreprises médiatiques traditionnelles.Ce mouvement reflète la démocratisation des moyens de production audiovisuelle grâceaux 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 queles Wikis.En supplément des ces moyens, le contenu généré par les utilisateurs utilise aussi souventdes logiciels libres ou open source et sappuient sur de nouvelles licences de droit dauteurtrès flexibles, lesquelles diminuent très largement les barrières dentrée et facilitent lacollaboration entre des individus dispersés géographiquement à travers le monde.Cest un excellent moyen pour améliorer ses compétences, pour sinstruire, pour découvriret explorer de nouveaux domaines.2. Ajax2.1 Définition du terme AjaxLe terme Ajax a été inventé par Jesse James Garrett et est apparu pour la première foisdans un article publié le 18 février 2005 et intitulé « Ajax : A New Approach to WebApplications ». Garrett a expliqué par la suite avoir commencé à utiliser ce terme car ilavait besoin de pouvoir utiliser quelque chose de plus court que :« JavaScript+CSS18+DOM+XMLHttpRequest asynchrones » lors de discussions avec desclients.Ajax est l’acronyme d’Asynchronous JavaScript And XML, soit en français JavaScript et XMLasynchrones. 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 denouvelles 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 DocumentLe JavaScript permet d’effectuer des traitements sur la page du client, avec l’aide duModèle Objet Document (appelé par la suite DOM pour Document Object Model) quipermet quand à lui de parcourir et de manipuler un document HTML 21 ou XML au moyen dediverses méthodes.Le XML a pour but de décrire et de structurer l’information tandis que le XSL est unemaniè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 leserveur de manière asynchrone.2.2 Principe de fonctionnement d’AjaxAjax fonctionne selon une architecture client/serveur, avec Ajax le serveur a pour but deretourner à l’objet XMLHttpRequest le contenu de la réponse à une requête, tandis quec’est le client qui va mettre en page ce contenu. Le protocole HTTP est utilisé afin detransmettre les informations du client au serveur et vice-versa.Ce qui rend Ajax particulier dans son utilisation par rapport à une application Webclassique est un terme présent dans son nom : asynchrone. En effet, que se passe-t-il dansune application synchrone lors d’un appel au serveur ? 7
    • Figure 2 Schéma du fonctionnement d’une application Web classiqueComme le montre le schéma de la figure 1, à chaque fois qu’une action d’un utilisateurimplique d’envoyer une requête au serveur, l’activité de l’utilisateur est interrompue letemps que le serveur traite et retourne les données qui lui ont été envoyées. L’utilisateurne peut donc pas continuer à effectuer des actions et n’a aucune idée de ce qui se passedu côté serveur. 8
    • Figure 3 Schéma du fonctionnement dune application AjaxDans le cas d’une application Web utilisant Ajax, l’activité de l’utilisateur n’est jamaisinterrompue. En effet lorsqu’une action de l’utilisateur requiert d’envoyer des données auserveur, JavaScript appelle le moteur Ajax qui va se charger de les envoyer de manièreasynchrone permettant ainsi de ne pas interrompre l’interaction avec l’utilisateur qui nevoit ni la traditionnelle page blanche ni le sablier, présents lorsque le serveur travailleavec une application Web traditionnelle. L’utilisateur peut donc continuer de travailler oude 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 veutpas obligatoirement dire que celui-ci va, immédiatement ou pas, envoyer une requêteHTTP au serveur. Le moteur Ajax, qui connaît l’état de la requête, peut ainsi tenir aucourant 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 lestraitements adéquats selon l’état de la requête.2.3 L’apport d’Ajax dans les sites Web 2.0Comme indiqué dans le paragraphe précédent, les applications Web synchrones ne sont pasvraiment ergonomiques pour l’utilisateur du fait que les nombreuses requêtes du client auserveur entraînent une interruption des actions de l’utilisateur, empêchant ainsi uneutilisation fluide de l’application pour l’utilisateur.Ajax permet de remédier à ce problème, proposant ainsi des applications se rapprochantdes applications de bureau où les requêtes sont transparentes pour l’utilisateur, sans quecelui-ci n’ait eu à installer quoi que se soit.Google, qui possède sur Internet de nombreuses applications utilisant Ajax, propose avecson service Google Maps23 un exemple frappant de la mise en œuvre de cette nouvelleergonomie. Google Maps est un service en ligne permettant de consulter une carte dumonde en format plan ou vue satellite, ainsi que deffectuer une recherche d’itinéraire. 9
    • Illustration 1 Vue mixte avec Google MapsLà 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 quasimentinstantané. Pour ce faire il suffit à Google de détecter le mouvement de la souris et decalculer ainsi les prochaines zones à afficher, le tout se faisant sans aucun rechargementde la page.Si cette application était conçue sans utiliser Ajax, chaque mouvement de la sourisentraînerait le rechargement complet de la page, rendant ainsi l’utilisation de se servicetrès pénible. Google ne propose d’ailleurs pas dalternative dans le cas où Ajax seraitinutilisable chez le client, ce service est tout simplement désactivé.2.4 Le JavaScript2.4.1 Historique du langageJavaScript est apparu en septembre 1995 avec le navigateur Netscape 2.0, appelé toutd’abord Mocha, puis LiveScript lors de sa sortie, il prit son nom actuel, JavaScript, endécembre 1995.Il y eut très vite un vif intérêt pour JavaScript tant chez les utilisateurs que chez lesdéveloppeurs Internet. Microsoft, alors en retard dans le domaine de l’Internet, s’yintéressa rapidement et intégra JavaScript à son navigateur Internet Explorer 3 au milieude l’année 1996.Pour des raisons légales (Microsoft refusant d’acheter une licence à Netscape) et afin depouvoir ajouter des fonctions supplémentaires à JavaScript, Microsoft appela JScript saversion de JavaScript. S’est alors posée la question de la compatibilité entre lesnavigateurs. 10
    • En 1997 Netscape et Microsoft choisirent l’organisme ECMA (pour European ComputerManufacture Association) afin de standardiser le langage, ce qui sera fait avec la norme dunom d’ECMAScript, sous la référence ECMA-26224. Malheureusement cette standardisationn’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 maisproduisant 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é etexécuté par le navigateur. JavaScript est donc exécuté du côté du client. Il faut noter queJavaScript peut aussi s’exécuter en dehors du navigateur et du côté serveur mais ce n’estpas 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 zoneréservée aux cookies26. De même JavaScript ne définit aucune instruction lui permettantde se connecter à un autre ordinateur ou à un serveur, en dehors de l’utilisation de l’objetXMLHttpRequest qui sera décrit plus bas.JavaScript permet d’accroître l’interactivité avec l’utilisateur au moyen de scriptspermettant 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, ilfaut donc bien réfléchir à son utilisation.2.4.2 Syntaxe du langage2.4.2.1 Inclure du JavaScriptIl est possible d’écrire des scripts JavaScript en deux endroits d’une page HTML. On peutinclure du code JavaScript dans la balise <head> ou encore dans la balise <body> de lapage HTML. 11
    • L’avantage que l’on peut retirer en incluant les scripts dans la balise <head> plutôt quedans <body> est que ces scripts seront disponibles au moment du chargement du contenude la page HTML. En effet, celle-ci étant lue séquentiellement, les scripts écrits dans labalise <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 codeJavaScript. 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 enmode texte. Cette indication est utile car il existe d’autres langages de script supportéspar le HTML. Il est néanmoins possible de l’omettre, JavaScript étant reconnu commelangage par défaut par la majorité des navigateurs.La seconde possibilité est d’écrire le code JavaScript dans un fichier qui sera inclus à lapage HTML, cela se fait de la manière suivante:2.4.2.2 Déclaration des variablesJavaScript est un langage à mots réservés. Il est faiblement typé. Une variable se définitsoit à l’aide du mot réservé var (var test = 123 ;) soit implicitement par l’apparition d’unnom à gauche du signe d’assignation (test = 123 ;). Il est toutefois conseillé, pour faciliterla 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 enfonction du contexte. JavaScript n’oblige pas à affecter une valeur à une variable aumoment de sa déclaration.Le premier caractère du nom d’une variable doit impérativement commencer par unelettre, un underscore ou un dollar, tandis que les éventuels signes suivants devront êtreconstitués de caractères alphanumériques, un underscore ou un dollar. Il est interdit dedonner à 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’instructionsLa 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 instructionsde la séquence.2.4.2.4 Les conditionsJavaScript permet de contrôler le flux dexécution séquentielle à l’aide de deux typesdinstructions conditionnelles : if et switch. Les instructions conditionnelles permettentd’exécuter une séquence plutôt quune autre lorsquune condition est vérifiée.Linstruction if permet de tester une expression logique et d’exécuter une séquencedinstructions 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’uneexpression 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 sasyntaxe :2.4.2.5 Les bouclesJavaScript 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 lavariable (par exemple un tableau) à utiliser lors du parcours de la boucle. Voici sa syntaxeVoici la syntaxe de la boucle while:Il existe une variante de la boucle while, la boucle do…while, celle-ci a un fonctionnementsimilaire à la boucle while à la différence près que la condition de continuation est testéeaprès que les instructions contenues dans la boucle aient été exécutées. Cela signifie queles instructions seront exécutées au minimum une fois, ce qui n’était pas le cas dans lesautres types de boucles.Voici sa syntaxe :De manière générale, il faut faire attention à ce que la séquence dinstructions souscontrôle de la boucle affecte bien la partie de létat du système employé par lexpressionconditionnelle, sans quoi il est possible de se retrouver en présence dune boucle infinie.2.4.2.6 Les procéduresUne procédure définit une suite d’instruction ne retournant pas de résultat. Elle estdéfinie à l’aide du mot réservé function suivi du nom de la procédure puis des éventuelsparamè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édurese fait à l’aide dune 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 dela manière suivante :Les paramètres ne sont visibles que dans la procédure, tout comme les variables crééeslocalement à la procédure.2.4.2.7 Les fonctionsTout comme la procédure une fonction définit une suite d’instruction mais à commedifférence le fait de retourner un résultat. Une fonction est définie de la même manièrequ’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 XML2.5.1 Description généraleXML est l’acronyme d’eXtensible Markup Langage. Comme le langage HTML, c’est unlangage de balises mais contrairement à celui-ci, les balises du langage XML ne sont paspré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 balisesinterprétées par le navigateur, XML à lui pour but de structurer l’information et il faudraau navigateur l’aide d’une feuille de style CSS ou d’un fichier XSL pour savoir commentinterpréter les balises contenues dans un document XML.XML est ce que l’on appelle un métalangage, soit un langage permettant de décrired’autres langages.2.5.2 Syntaxe du langage 15
    • Contrairement au langage HTML, XML est extrêmement strict sur la syntaxe à utiliser et lamoindre erreur rend un document XML inutilisable27. Il est donc utile de préciser lesprincipales 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 êtrela première à être fermée. Contrairement au langage HTML où le fait d’oublier de fermercertaines balises n’empêche pas le navigateur d’afficher correctement la page, XML netolère pas l’oubli de fermeture d’une balise. De même, l’inversion de l’ordre de fermetured’une balise rend le document syntaxiquement incorrect.Les balises peuvent contenir un ou plusieurs attributs. Ces attributs devrontobligatoirement ê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 /> soitpar <balise_vide></balise_vide>.Maintenant que les règles syntaxiques sont définies, voyons de quoi est constitué undocument XML.Un document XML doit toujours commencer par un prologue. Celui-ci doit contenir auminimum le numéro de version du langage. A l’heure actuelle la seule valeur possible pourcet 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 correct2.6 Le Modèle Objet DocumentLe modèle objet document, plus connu sous l’acronyme de DOM (pour Document ObjectModel), permet d’accéder et de mettre à jour le style, la structure et le contenu d’undocument 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 undocument sous la forme d’un arbre. Le DOM permet d’ajouter, de modifier ou desupprimer 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 lessuivantes : 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 encompte les espaces comme des noeuds de type texte, ce que ne font pas les autresnavigateurs. Ainsi des problèmes de compatibilité peuvent survenir si ce cas nest pastraité.Les diverses propriétés expliquées ci-dessus permettent d’accéder aux divers élémentsd’un document. Il existe cependant d’autres méthodes qui permettent elles aussid’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 del’élément que l’on souhaite atteindre. Il est donc fréquent d’utiliser ces méthodes pour serapprocher de l’élément, puis les propriétés décrites plus haut afin d’accéder à l’élémentlui-même.2-7 Fonctionnement technique d’Ajax2.7.1 DescriptionAjax utilise un modèle de programmation comprenant dune part la présentation, dautrepart les évènements.Les évènements sont les actions de lutilisateur, qui provoquent lappel des fonctionsassociées aux éléments de la page.Linteraction avec lutilisateur se fait à partir des formulaires ou boutons html.Ces fonctions JavaScript identifient les éléments de la page grâce au DOM etcommuniquent avec le serveur par lobjet 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 ouresponseText de lobjet XMLHttpRequest. Sil sagit dun fichier xml, il sera lisible dansresponseXml par les méthodes de Dom.Noter quil faut créer un nouvel objet XMLHttpRequest, pour chaque fichier que vousvoulez charger.Il faut attendre la disponibilité des données, et létat est donné par lattribut readyStatede 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 XMLHttpRequestL’objet XMLHttpRequest est l’élément clé des applications Ajax. Il permet d’envoyer desrequêtes HTTP au serveur de manière synchrone ou asynchrone.2.7.2.1 Historique de la classeXMLHttpRequest a tout d’abord été développé par Microsoft en tant que contrôle ActiveX 28et 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èreversion du navigateur Mozilla, puis progressivement dans les principaux navigateurs dumarché. XMLHttpRequest fut intégré comme objet JavaScript dans Internet Explorer àpartir de la version 7 du navigateur.2. 7.2.2 Fonctionnement de la classeAfin de pouvoir utiliser l’objet XMLHttpRequest, il faut tout d’abord créer une instance del’objet, ce qui se fait d’une manière différente selon que l’on utilise Internet Explorer 6.0ou inférieur ou un autre navigateur.L’instance se créée de la manière suivante : 19
    • Figure 4 Création dune instance de XMLHttpRequestIl faut tester si le navigateur du client supporte le contrôle ActiveX ou s’il supporte l’objetnatif XMLHttpRequest afin de créer l’objet, appelé ici xhr, de la manière qui convient. Sile navigateur ne supporte pas l’objet XMLHttpRequest une alerte est affichée afin de lesignaler à l’utilisateur.2.7.3 Inconvénients dAjax- Si JavaScript est désactivé, Ajax ne peut fonctionner. Il faut demander au lecteur delactiver parmi les options du navigateur.- Si lon charge les données à afficher de façon dynamique, elles ne font pas partie de lapage et elles ne sont pas prises en compte par les moteurs de recherche.- Laspect asynchrone fait que les modifications se font avec un délai (si le traitement surle serveur est long), ce qui peut être déconcertant.2.8 Exemple de programme AjaxCet exemple va permettre de réaliser une validation côté serveur dune donnée saisie entemps réel.Une servlet permettra de réaliser cette validation. La validation proposée estvolontairement simpliste et pourrait même être réalisée directement côté client avec ducode Javascript. Il faut cependant comprendre que les traitements de validationpourraient être beaucoup plus complexes avec par exemple une recherche dans une basede données, ce qui justifierait pleinement lemploi dune validation côté serveur. 20
    • Les actions suivantes sont exécutées dans cet exemple :  Un événement déclencheur est émis (la saisie dune donnée par lutilisateur)  Création et paramétrage dun objet de type XMLHttpRequest  Appel de la servlet par lobjet XMLHttpRequest  La servlet exécute les traitements de validation et renvoie le résultat en réponse au format XML  Lobjet XMLHttpRequest appel la fonction dexploitation de la réponse  La fonction met à jour larbre DOM de la page en fonction des données de la réponse  La page de tests saffiche au lancement de lapplicationScénario de l’exemple :La page de test est une JSP « index.jsp » qui contient un champ de saisie.La saisie dun caractère déclenche la validation : si la chaine de caractère saisie commencepar un « X » alors la saisie est valide sinon la saisie est invalideLicô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>Lexécution des traitements et le renvoie de la réponse par la servlet :Cette servlet « ValiderServlet » associée à lURI valider est exécutée par le conteneur weben réponse à la requêteValiderServlet 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 lapplication 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 unebalise 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. Cettesuppression est obligatoire si une même requête peut renvoyer une réponse différente lorsde 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 vaappeler la fonction JavaScript « valider()».Ainsi la fonction sera appelée à chaque fois que lutilisateur saisi un caractère.La création dun 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 lurl dappel 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 lurl et la fonction à exécuter à la réponse  exécute la requêteComme dans de nombreux usages courants de Javascript, des traitements dépendants dunavigateur cible à lexécution sont nécessaires. Dans le cas de linstanciation de lobjetXMLHttpRequest, celui-ci est un ActiveX sous Internet Explorer et un objet natif sur lesautres navigateurs qui le supportent.La signature de la méthode open de lobjet 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 lurl 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 defaç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éesera alors exécutée à la réception de la réponse.La méthode « send() » permet dexécuter la requête http en fonction des paramètres delobjet 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 len-tête de larequê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));Lobjet XMLHttpRequest possède les méthodes suivantes :Méthode Rôleabort() Abandon de la requêtegetAllResponseHeaders() Renvoie une chaîne contenant les en-têtes http de la réponsegetResponseHeader(nom) Renvoie la valeur de len-tête dont le nom est fourni en paramètresetTimeouts(duree) Précise la durée maximale pour lobtention de la réponsesetRequestHeader(nom, valeur) Précise la valeur de len-tête dont le nom est fournie en paramètreopen(méthode, url, [assynchrone[, Prépare une requête en précisant la méthode (Get ou Post),utilisateur[, motdepasse]]] lurl, un booléen optionnel qui précise si lappel doit être asynchrone et le user et/ou le mot de passe optionnelsend(data) Envoie de la requête au serveurLobjet XMLHttpRequest possède les propriétés suivantes :Propriété Rôleonreadystatchange Précise la fonction de type callback qui est appelée lorsque la valeur de la propriété readyState changereadyState Létat de la requête : 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = completeresponseText Le contenu de la réponse au format texteresponseXML Le contenu de la réponse au format XMLstatus Le code retour http de la réponsestatusText La description du code retour http de la réponseIl peut être intéressant dutiliser une fonction Javascript qui va générer une chaîne decaractères contenant le nom et la valeur de chacun des éléments dun formulaire. 26
    • Exemplefunction 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 dune url qui aurait besoin de toutes les valeurs dun formulaire.Lexploitation 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 lexé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 larequête a correctement été traitée.La fonction modifie alors le contenu de la page en modifiant son arbre DOM en utilisant lavaleur de la réponse. Cette valeur au format XML est obtenue en utilisant la fonction« responseXML » de linstance de XMLHttpRequest. La valeur au format texte brut peut êtreobtenue en utilisant la fonction « responseText ».Il est alors possible dexploiter les données de la réponse selon le besoin.3. Utilisation d’un Framework Ajax : DWR3.1 PrésentationDWR (Direct Web Remoting) est une librairie JAVA facilitant grandement lutilisationdAJAX dans les applications web en java.Avec elle, plus besoin décrire soi-même le code javascript, les méthodes daccès, deréception et la sécurité, DWR soccupe de tout.Il suffit simplement décrire le code java, de faire appel aux JavaScripts auto-générés parDWR dans vos JSP et le tour est joué. 27
    • DWR fait le lien entre 2 parties: Le code Javascript au sein du navigateur client quicommunique avec le serveur web et met à jour dynamiquement la page et une ServletJava qui tourne sur le serveur web qui réalise les requêtes et renvoie les réponses àlutilisateurDWR encapsule les interactions entre le code Javascript côté client et les objets Java côtéserveur : ceci rend transparent lappel 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 lapplication  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 DWRLa mise en oeuvre côté client nécessite dinclure des bibliothèques Javascript généréesdynamiquement par la servlet de DWR. Il est alors possible dutiliser les fonctionsJavascript générées pour appeler les méthodes des beans configurés côté serveur.DWR sintègre facilement dans une application web puisquil repose sur une servlet et plusparticulièrement avec celles mettant en oeuvre le framework Spring dont elle propose unsupport. DWR est aussi inclus dans le framework WebWork depuis sa version 2.2.DWR fournit aussi une bibliothèque Javascript proposant des fonctions de manipulationscourantes en DHTML : modifier le contenu des conteneurs <DIV> ou <SPAN>, remplir uneliste déroulante avec des valeurs, etc ...DWR est une solution qui encapsule lappel de méthodes de simples objets de typeJavabean exécutés sur le serveur dans du code Javascript généré dynamiquement. Legrand intérêt est de masquer toute la complexité de lutilisation de lobjet XMLHttpRequestet de simplifier à lextrê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 navigateurCôté serveur, une servlet est déployée dans lapplication web. Cette servlet a deux rôlesprincipaux :  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 dun beanDWR génère dynamiquement le code Javascript à partir des Javabeans configurés dans unfichier de paramètres en utilisant lintrospection. Ce code se charge dencapsuler les appelsaux méthodes du bean, ceci incluant la conversion du format des données de Javascriptvers Java et vice et versa. Ce mécanisme est donc similaire à dautres solutions de typeRPC (remote procedure call).Une fonction de type callback est précisée à DWR pour être exécutée à la réception de laréponse de la requête vers la méthode dun bean.DWR facilite donc la mise en oeuvre dAjax avec Java côté serveur : il se charge de toutelintégration de Javabeans côté serveur pour permettre leur appel côté client de manièretransparente.Le site officiel de DWR est à lurl : http://getahead.ltd.uk/dwr/ ouhttps://dwr.dev.java.net/La documentation de ce projet est particulièrement riche et de nombreux exemples sontfournis 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 lajouter dans le répertoire WEB-INF/Lib de lapplication web qui va utiliser la bibliothèque.  Il faut ensuite déclarer dans le fichier de déploiement de lapplication « 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 lapplicationExemple :<?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 quil devra encapsuler pour desappels via Javascript. Dans lexemple, cest la classe « java.util.Date » fourni dans lAPIstandard qui est utilisée.Le « creator » de type "new" instancie la classe en utilisant le constructeur sans argument.Lattribut javascript permet de préciser le nom de lobjet javascript qui sera utilisé côtéclient. 30
    • Le tag « param » avec lattribut « name » ayant pour valeur class permet de préciser lenom 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 lutilisation de méthodes surchargéesPar défaut, DWR encapsule toutes les méthodes « public » de la classe définie. Il est doncnécessaire de limiter les méthodes utilisables via DWR à celles requises par les besoins delapplication soit dans la définition des membres de la classe soit dans le fichier deconfiguration de DWR.3.3 Exemple complet :Dans cette partie, on va refaire le même exemple de validation de la saisie utilisateur (comme celuidu 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>Lexécution des traitements :Le traitement de validation est assuré par la classe « MonBean»application.action.MonBeanpackage 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 lapplication contient la déclaration de la servlet deDWR.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.xmlLe fichier dwr.xml permet de configurer DWR. Il est généralement placé dans le répertoireWEB-INF de lapplication 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 nest pas utilisé car les créateurs et convertisseurs fournis enstandard 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 classequi pourra être appelée via DWR doit être déclarée avec un tel tag. Ce tag possède lastructure 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 optionnelsLa déclaration dau moins un créateur est obligatoire. Il existe plusieurs types de créateurspécifiés par lattribut creator du tag fils <create> :Type de Rôlecréateurnew Instancie lobjet avec lopérateur new Ne créé aucune instance. Ceci est utile si la ou les méthodes utilisées sontnull statiquesscripted Instancie lobjet en utilisant un script via BSFspring Le framework Spring est responsable de linstanciation de lobjetjsf Utilise des objets de JSFstruts Utilise des ActionForms de Strutspageflow Permet laction au PageFlow de Beehive ou WebLogicLattribut Javascript permet de donner le nom de lobjet Javascript. Il ne faut pas utilisercomme valeur un mot réservé de Javascript.Lattribut 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 lecreator new, il est nécessaire de fournir en paramètre le nom de la classe dont la valeurprécise la classe pleinement qualifiée à instancierExemple :<?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 limiterles méthodes qui seront accessibles via DWR. Les tags <include> et <exclude> permettentrespectivement dautoriser ou dexclure lutilisation dune liste de méthodes. Ces deux tagssont mutuellement exclusifs. En labsence de lun de ces deux tags, toutes les méthodessont utilisables.Le tag <auth> permet de gérer la sécurité daccès en utilisant les rôles J2EE de lapplication: DWR propose donc la prise en compte des rôles J2EE définis dans le conteneur web pourrestreindre laccès à certaines classes.Le tag <converter> permet de préciser la façon dont un objet utilisé en paramètre ou entype de retour va être converti. Cette conversion est réalisée par un convertisseur quiassure la transformation des données entre le format des objets client (Javascript) etserveur (Java).Chaque bean utilisé en tant que paramètre doit être déclaré dans un tel tag. Par défaut,lutilisation 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, lescollections (List, Set, Map, ...) et certains objets de manipulation XML issu de DOM, JDOMet DOM4J.Les convertisseurs Bean et Objet fournis en standard doivent être explicitement utilisésdans 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 dutiliser 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 etvice et versa en utilisant les mécanismes dintrospection.Exemple :public class Personne { public void setNom(String nom) { ... } public void setTaille(int taille) { ... } // ...}Lappel dune méthode acceptant la classe Personne en paramètre peut se faire de lamanière suivante dans la partie cliente :Exemple :var personne = { nom:"Test", taille:33 }; 37
    • TestDWR.setPersonne(personne);Il est possible de restreindre laccès à certaines propriétés dun bean dans sonconvertisseur.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>Lutilisation de ce dernier exemple est recommandée.Le convertisseur Objet est similaire mais il utilise directement les membres plutôt que depasser par les getter/setter.Il possède un paramètre force qui permet dautoriser laccès aux membres privés de lobjetpar 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.jsPour utiliser ces deux bibliothèques, il est nécessaire de les déclarer dans chaque pageutilisant 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 puisquil assure toute la gestionde la communication avec le serveur.Certaines options de paramétrage peuvent être configurées en utilisant la fonctionDWREngine.setX().Il est possible de regrouper plusieurs communications en une seule en utilisant lesfonctions DWREngine.beginBatch() et DWREngine.endBatch(). Lors de lappel de cettedernière, les appels sont réalisés vers le serveur. Ce regroupement permet de réduire lenombre dobjets 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 dela page. Ces fonctions ne sont pas dépendantes dautres éléments de DWR.Fonction Rôle Encapsuler un appel à la fonction document.getElementById()$(id) comme dans la bibliothèque PrototypeaddOptions Ajouter des éléments dans une liste ou un tag <ul> ou <ol>removeAllOptions Supprimer tous les éléments dune liste ou un tag <ul> ou <ol>addRows Ajouter une ligne dans un tableauremoveAllRows Supprimer toutes les lignes dans un tableaugetText Renvoyer la valeur sélectionnée dans une listegetValue Renvoyer la valeur dun élément HTML Obtenir les valeurs de plusieurs éléments fournis sous la formegetValues dun ensemble de paire clé:valeur_vide dont la clé est lid de lélément à traiter Gérer lappui sur la touche return avec un support multi-onReturn navigateurselectRange(id, Gérer une sélection dans une zone de texte avec un supportdebut,fin) multi-navigateursetValue(id,value) Mettre à jour la valeur dun élément Mettre à jour les valeurs de plusieurs éléments fournis sous lasetValues forme dun ensemble de paire clé:valeur dont la clé est lid de lélément à modifiertoDescriptiveString(id, Afficher des informations sur un objet avec un niveau de détaillevel) (0, 1ou 2) Mettre en place un message de chargement lors des échangesuseLoadingMessage avec le serveur3.5 Les scripts client générésDWR assure un mapping entre les méthodes des objets Java et les fonctions Javascriptgénérées. Chaque objet Java est mappé sur un objet Javascript dont le nom correspond àla valeur de lattribut javascript du creator correspondant dans le fichier de configurationde DWR. 39
    • Le nom des méthodes est conservé comme nom de fonction dans le code Javascript. Lepremier paramètre de toutes les fonctions générées par DWR est la fonction de typecallback qui sera exécutée à la réception de la réponse. Les éventuels autres paramètrescorrespondant à leur équivalent dans le code Java.DWR soccupe de transformer un objet Java en paramètre ou en résultat en un équivalentdans le code Javascript. Par exemple, une collection Java est transformée en un tableaudobjets Javascript de façon transparente. Ceci rend transparent la conversion et facilitedonc leur utilisation.Lutilisation de la bibliothèque util.js peut être particulièrement pratique pour faciliterlexploitation des données retournées et utilisées par les fonctions générées.Des exemples dutilisation sont fournis dans les sections dexemples suivantes.3.6 Exemples :Exemple pour remplir dynamiquement une liste déroulante :Cet exemple va remplir dynamiquement le contenu dune liste déroulante en fonction de lavaleur dune zone de saisie.Côté serveur la méthode getListeValeurs() du bean est appelée pour obtenir les valeurs dela liste déroulante. Elle attend en paramètre une chaîne de caractères et renvoie untableau 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 lapplication est composée dune zone de saisie et dune 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/javascriptsrc=/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].value);}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 dinitialiser le contenu de la liste déroulante au chargement dela page.La fonction rafraichirListeValeurs() est appelée dès que la zone de saisie perd le focus. Elleutilise la fonction Javascript TestDWR.getListeValeurs() générée par DWR pour appeler laméthode du même nom du bean. Les deux paramètres fournis à cette fonction permettentde préciser que cest la fonction remplirListeValeurs() qui fait office de fonction decallback et fournir la valeur de la zone de saisie en paramètre de lappel de la méthodegetListeValeurs() du bean.La fonction remplirListeValeurs() se charge de vider la liste déroulante, de remplir soncontenu 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 informationsLexemple de cette section va permettre dafficher dynamiquement les données dunepersonne sélectionnée. Lexemple est volontairement simpliste (la liste déroulante despersonnes est en dur et les données de la personne sont calculées plutôt quextraite dunebase de données). Le but principal de cet exemple est de montrer la facilité dutilisationdes beans mappés par DWR dans le code Javascript.Le bean utilisé encapsule les données dune personneExemple :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, inttaille) { 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 dune liste déroulante de personnes. Lorsquune personne estsé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/javascriptsrc=/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><spanid="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 personnepublic Personne getPersonne(String id) { int valeur =Integer.parseInt(id);if (valeur < 10) { id = "0"+id; } Personne resultat = newPersonne("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 PersonneExemple :<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éesCet exemple va permettre de modifier les données dune personne. 47
    • Il suffit de modifier les données et de cliquer sur le bouton validerLes données sont envoyées sur le serveur.Exemple :INFO: Exec[0]: TestDWR.setPersonne()nom=nom1234modprenom=prenom1234moddatenaiss=1234/05/2006modtaille14045Exemple : 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 lobjet fourni en paramètre}Cette méthode affiche simplement les données reçues. Dans un contexte réel, elleassurerait les traitements pour rendre persistantes les modifications dans les donnéesreçues.La page de lapplication 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/javascriptsrc=/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 automatiquementles propriétés dun objet avec les objets de larbre DOM dont lid correspond.Remarque : il est important que lobjet personne qui encapsule les données de la personnesoit correctement initialisé, ce qui est fait au chargement des données de la personne. 51