virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/PWB AJAX virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/PWB Internet et HTML

Présentation AJAX: (Asynchronous Javascript And XML) n’est pas une technologie à part mais un regroupement de plusieurs technologies déjà existantes. AJAX regroupe deux technologies de base; Javascript et XML. Cependant il recourt très souvent à d’autres technologies à savoir HTML, CSS , DOM (Document Object Model) et un langage de script coté serveur tel que PHP, ASP, CGI… Bref, l’utilisation d’AJAX nécessite une connaissances préalable de l’ensemble des technologies mentionnées. AJAX a pour objectif majeur l’optimisation des ressources sur Internet. En effet, les pages dynamiques classiques qui reposent entièrement (ou partiellement) sur des scripts coté serveur nécessitent un rafraichissement après chaque requête passée au serveur Web. Ce dernier constitue alors le nœud central du trafic (traitement). Le but d’AJAX est de soulager les serveurs en impliquant le client au processus du traitement (Partage du traitement entre le client et le serveur). De cette façon le serveur remet les données au client et ce dernier les traite en utilisant un script coté client qui est, dans ce cas, le JavaScript. Un avantage majeur est alors constaté. Il s’agit du rafraichissement partiel de la page Web.

Approche traditionnelle Requête 1 Client Serveur HTTP Génération du document pour la requête 1 Html Réponse 1 Requête 2 Génération du document pour la requête 2 Html Réponse 2 …

Approche Asynchrone AJAX Requête 1 Client Serveur HTTP Génération du document pour la requête 1 Html et Script Réponse 1 Script Requête 2 Génération du Document pour la requête 2 Réponse 2 Données Requête 3 Génération du Document pour la requête 3 Réponse 3 Données …

Principe d’AJAX AJAX repose sur l’objet XMLHttpRequest. C’est un objet développé par Microsoft qui l’a aussi inclus dans son fameux navigateur Internet Explorer à partir de la version 4.0 sous la forme d’un ActiveX. Il a ensuite été adopté par les autres navigateurs tel que Mozilla, Safari… L’objet XMLHttpRequest (ou l’ActiveX sur IE) est accessible par JavaScript. 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 (souvent 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, boutons ou toute autre objet html. Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest. Noter qu'il faut instancier un objet XMLHttpRequest, pour chaque fichier que vous voulez charger.

XMLHttpRequest - I XMLHttpRequest permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs. Attributs readyState : Renvoie un entier compris entre 0 et 4 indiquant l’état de transfert entre client et serveur: 0: transfert non initialisé. 1: connexion établie avec le serveur (requête en cours d’envoie). 2: requête reçue par le serveur. 3: réponse en cours de transfert vers le client. 4: terminé. Les données sont disponibles chez le client. L’état qui nous intéresse est sans doute l’état ‘4’ où les données qui seront traités par le navigateur (scripts JavaScript) sont disponible chez le client. Tout autre état (de 0 à 3) sont traduits par une attente.

XMLHttpRequest - II status: Renvoie un identifiant (entier) qui permet de savoir si l’accès au document se passe comme il fau. Quelques valeurs spéciales: 200: ok (le document cherché est disponible sur le serveur) 404: la fameuse erreur HTTP qui signifie que le document n’a pas été trouvée sur le serveur. 500: Problème de fonctionnement interne du serveur responseText : Renvoie le résultat (contenu du document chargé) sous forme d’une chaîne de caractères que l’on peut traiter avec JavaScript sur le navigateur (client). responseXML: Renvoie le résultat en format XML. Les méthodes de DOM permettent de les extraire et les réorganiser. onreadystatechange: attribut ou événement activée à chaque fois qu’un changement d’état (changement de la valeur de l’attribut readyState) est détecté (le préfixe on familier en JavaScript).

XMLHttpRequest - III Méthodes open: permet d’ouvrir le fichier désiré sur le serveur. Il possède trois paramètres obligatoires Methode: GET ou POST URL: Chemin relatif ou absolu du fichier sur le serveur Valeur booléenne (True ou False) : désigne si le mode utilisé est synchrone ou asynchrone; True pour Asynchrone. send: Permet d’envoyer les paramètres au serveur sous forme d’une chaîne de caractères qui respecte la structure suivante: paramètre1=valeur1&paramètre2=valeur2&... Si la méthode utilisée est GET alors send contient la chaîne « null » setRequestHeader: cette méthode permet de définir le codage des données passées au serveur. Elle est utilisée avec la méthode POST. La syntaxe compète est la suivante: setRequestHeader(‘’Content-Type’’,’’application/x-www-form-urlencoded’’)

Construire une requête - I Création d’une instance C’est une instance de classe classique mais il faut évaluer le type exact de l’objet XMLHttpRequest supporté par le navigateur. Pour cela la syntaxe standard de l’instance est la suivante: xhr=false; try { xhr= new XMLHttpRequest() ; } catch(e) { try { xhr=new ActiveXObject(‘’Msxml2.XMLHTTP’’); } catch(e1) { try {xhr=new ActiveXObject(‘’Microsoft.XMLHTTP’’); } } On utilise les exceptions de Javascript try … catch sinon on peut utiliser les structures de contrôle if … else.

Construire une requête - II Création d’une instance - suite xhr=false; if (window.XMLHttpRequest) xhr=new XMLHttpRequest(); else { if (window.ActiveXObject) xhr=new ActiveXObject(‘’Microsoft.XMLHTTP’’); alert (‘’Objet non supporté par votre navigateur!’’); } En utilisant cette méthode on se contente de déclarer l’objet ActiveX de type Microsoft.XMLHTTP car c’est le seul supporté par les navigateurs IE actuels.

Construire une requête - III Création d’une instance - suite Dans le cas général trois cas de figures sont envisageables: Les navigateurs de la famille Mozilla, Safari qui supportent l’objet XMLHttpRequest() Les anciens navigateurs Microsoft (Internet Explorer) qui supportent l’objet ActiveXObject(‘Msxml2.XMLHTTP’) Les nouvelles versions du navigateur Microsoft (IE) qui supportent la nouvelle version de l’ActiveXObject ActiveXObject(‘Microsoft.XMLHTTP’) Mais dans la pratique on n’a besoin que de créer l’un des deux objets XMLHttpRequest() ou ActiveXObject(‘’Microsoft.XMLHTTP’’) car ce sont les deux objets supportés par les navigateurs standardisés actuels.

Construire une requête - IV Attendre la réponse du serveur - I Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé. xhr.onreadystatechange = function() { If ((xhr.readyState==4) && (xhr.status==200)) Traitement; else Attendre; } Le traitement consiste généralement à l’application de la réponse du serveur dans un endroit repéré par la balise <div></div> à l’aide d’un traitement DOM. Il ressemble souvent à quelque chose comme: document.getElementById(‘’id-de-div’’).innerHTML=xhr.responseText;

Construire une requête - V Attendre la réponse du serveur - II Il est possible d’extraire la réponse sous la forme XML à l’aide de responseXML, et en appliquant les DOM on peut extraire les données décrites dans le document chargé depuis le serveur. En attendant que les données soient chargées sur le client il faut rassurer l’internaute que la requête qu’il a passé au serveur est entrain d’être exécutée. En effet, AJAX procède à un chargement partiel de la page (C’est l’objectif principal) ce qui donne l’impression que rien de spécial ne se passe sur le navigateur alors qu’en réalité les données sont entrain d’être acheminées vers le client. C’est la raison pour laquelle le traitement d’attente doit être perçu par l’internaute. Par exemple, l’affichage du message « Veuillez patienter SVP! » ou un simple affichage d’une Gif animée, d’ailleurs c’est la méthode la plus utilisée par les sites Web qui exploitent AJAX.

Construire une requête - VI Passer la requête au serveur - I Le passage de la requête sur le serveur est assuré par deux méthodes principales open et send. open ( Méthode , URL du document , true ou false ) ; Méthode: POST ou GET. POST permet de transférer les paramètres dans l’entête du document tandis que GET utilise l’URL en tant que moyen de transfert. URL: Chemin du fichier à charger sur le client. Le fichier peut être XML (le cas idéal), texte, html, php… Le plus courant est d’utiliser un langage de script coté serveur pour communiquer avec une base de données. Valeur booléenne (True ou False): Cette valeur spécifie le mode utilisé; synchrone ou asynchrone. True désigne le mode asynchrone. Le mode synchrone fige le navigateur lors d’un transfert. Celui-ci n’est accessible par l’internaute qu’après l’achèvement de ce transfert.

Construire une requête - VII Passer la requête au serveur - II Le mode asynchrone permet de rendre accessible le navigateur même lors d’un transfert. Le navigateur peut cliquer sur un lien, actualiser la page, écrire dans une zone de texte… Bref, le navigateur n’est pas figé même avant l’achèvement de l’action en cours. send ( ‘’paremètres’’ ) ; send permet de passer des paramètres au serveur. Si la méthode utilisée est GET le paramètre envoyé par la méthode send est ‘’null’’. Dans le cas de POST, la page peut envoyer des paramètres personnalisées sous forme d’une chaine de caractères telle que: ‘’param1=valeur1&param2=valeur2’’. En plus, pour la méthode poste, une troisième méthode est obligatoire. C’est la méthode: setRequestHeader(‘’Content-Type’’ , ’’application/x-www-form-urlencoded’’); Cette méthode permet de définir le type de codage à utiliser pour le transfert des paramètres au serveur.

Inconvénients d’AJAX Malgré ses avantages incontestables, AJAX est atteint tout de même par des inconvénients. En fait, Toute cette technologie est basée sur l’utilisation de JavaScript pour procéder au traitement au coté du client. Si JavaScript est désactivé alors rien ne marchera. En plus l’objet XMLHttpRequest est un objet supporté par, pratiquement, tous les navigateurs standardisés (conformes aux règlements du W3C). Cependant, il existe des navigateurs qui ne le supportent pas. Dans ce cas l’AJAX ne pourra pas fonctionner. L’incompatibilité des navigateurs oblige souvent le développeur à multiplier les traitements sur la page Web. Ces traitements sont généralement liés aux styles CSS qui améliorent le design des exploits de l’AJAX. Le développeur est alors tenu à tester le comportement de ses pages sur les différents types de navigateur standardisés à savoir, Internet Explorer, Mozilla, Safari, Opera… Un autre inconvénient d’AJAX réside dans la difficulté de publication des mots clés pour le référencement (voir le chapitre suivant: Web Marketing).

En Pratique Dans la pratique, un site en AJAX doit être accompagné d’une version classique du même site accessible par les anciens navigateurs ou les navigateurs non standardisés qui ne supportent pas l’objet XMLHttpRequest. La commutation d’une version de site à une autre se fait avec des simples scripts en JavaScript qui vérifient la compatibilité du navigateur et qui décident laquelle le navigateur peut charger.

JSON Le XML est une calamité à parser en JavaScript Le format JSON est beaucoup plus approprié JSON (JavaScript Object Notation) est un format de données générique qui utilise la notation des objets JavaScript pour transmettre de l’information structurée Exemple : {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

Comment utiliser le format JSON Coté client JSON faisant partie de la norme JavaScript. Le contenu d'un fichier JSON, ou la définition de données dans ce format sont assignés à une variable, laquelle devient un objet du programme. Coté serveur Les fichiers au format JSON s'utilisent dans différents langages de programmation, notamment PHP et Java grâce à des parseurs qui permettent d'accéder au contenu, et éventuellement de le convertir en classes et attributs, dans ce langage. L'échange de données inclusion directe du fichier dans la page HTML au même titre qu'un fichier .js de JavaScript. Ou emploi de XMLHttpRequest.

Exemple d’utilisation de JSON Le code XMLHttpRequest: var req = new XMLHttpRequest(); req.open("GET", "fichier.json", true); req.onreadystatechange = monCode; req.send(null); Le code JavaScript: function monCode() { if (req.readyState == 4) { var doc = eval('(' + req.responseText + ')'); } } Utilisation des données: var nomMenu = document.getElementById('jsmenu'); // trouver un champ nomMenu.value = doc.menu.value; // assigner une valeur au champ Accéder aux données : doc.commands[0].title // lire la valeur de "title" dans le tableau doc.commands[0].action // lire la valeur de "action" dans le tableau

Les premiers « Frameworks » Comme il était devenu difficile de coder du javascript pour tous les navigateurs, sont apparus des « Frameworks » permettant une spécification unique, indépendante du navigateur PrototypeJS - www.prototypejs.org script.aculo.us Mootools - mootools.net DoJo Toolkit - www.dojotoolkit.org Yahoo UI - developer.yahoo.com/yui/ ExtJS - www.extjs.com UIZE - www.uize.com

JQuery Une bibliothèque javascript open-source et cross-browser Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath. JQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. Gérer les événements javascript Faire des requêtes AJAX simplement

une simple bibliothèque à importer Disponible sur le site de Jquery http://jquery.com/ <script type="text/javascript" src="jquery.js"></script> Ou directement sur Google code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>

jQuery repose sur une seule fonction : jQuery() ou $(). La fonction jQuery() jQuery repose sur une seule fonction : jQuery() ou $(). C’est une fonction JavaScript Elle accepte des paramètres Elle retourne un objet $ : Syntaxe issue de «  Prototype »

$ accepte un sélecteur CSS en argument $ accepte des ID : $('anything') $ accepte un sélecteur CSS en argument $ accepte des ID : $('#nomID') retourne un élément <-> document.getElementById $ accepte des classes : $('.nomClasse') retourne tous les éléments qui correspondent à cette classe $ accepte plusieurs sélecteurs $('.article, .nouvelles, .edito')

$(anything) $ accepte des sélecteurs spécifiques : $(':radio'), $(':header'), $(':first-child') des sélecteurs en forme de filtres : $(':checked'), $(':odd'), $(':visible') plus fort: $(':contains(du texte)') des attributs $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'

Exemple <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque ry/1/jquery.min.js"> </script> <body> <div id="monDiv">Bonjour</div> <a href="#" onClick="jQuery('#monDiv').hide();"> disparition</a> </body> </html>

jQuery: un objet les méthodes s'appliquent généralement à tous les éléments sélectionnés $('.classe').hide(); $('.classe').show(); de nombreuses méthodes utilitaires parcourir le DOM: .parent(), .next(), .children(), .parents() ajouter ou retirer des classes CSS: addClass, removeClass manipuler: append, wrap, prepend Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même on peut chaîner les appels ! $('anything').parent().find('still anything').show(); Cette propriété est extrêmement puissante !

Ajax JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax La plus simple : $('#maDiv').load('page.html'); Plus complexe : $.get('test.html', function(data) {faire quelque chose); Générale : $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){alert('Erreur chargement'); }, success: function(xml){faire quelque chose} });

Inconvénients d’AJAX / XML XML est délicat à parser en Javascript/jQuery $.ajax({ type: "GET", url: "courses.xml", dataType: "xml", complete : function(data, status) { var products = data.responseXML; var html = ""; $(products).find('product').each(function(){ var id = $(this).attr('id'); var name = $(this).find('name').text(); var price =$(this).find('price').text(); html += "<li>#"+id +" - <strong>"+name+"</strong> : " +price+"</li>"; }); $("#cousesList").html(html); }});

Inconvénients d’AJAX / Sécurité pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest dont le résultat serait du XML (et donc du HTML) ….mais pas pour des scripts Javascript ! D’où l’idée de définir un modèle de données sous la forme d’objet Javascript JSON

JSON (JavaScript Object Notation) format de données textuel, générique, dérivé de la notation des objets de JavaScript permet de représenter de l'information structurée. décrit par la RFC 4627 de l’IETF. Exemple : { "Image": { "Width": 800, "Height": 600, "Title": "Vue du 15ème étage", "Thumbnail": { "Url": "http://www.example.com/481989943", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } }

Les avantages de JSON Type de données générique et abstrait pouvant être représenté dans n'importe quel langage de programmation représenter n'importe quelle donnée concrète. simple à mettre œuvre tout en étant complet. peu verbeux, lisible aussi bien par un humain que par une machine facile à apprendre, syntaxe réduite types de données sont connus et simples à décrire indépendant du langage de programmation (bien qu'utilisant une notation JavaScript) Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax)

Les avantages de JSON Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son nom. Il est donc plus facile à interpréter qu'un XML. var donnees = eval('('+donnees_json+')'); Le site json.org fournit une liste de parseurs pour d'autres langages Il peut aussi être utilisé pour : la sérialisation et déserialisation d'objets ; l’encodage de documents ;

jQuery et JSON jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Exemple : <html><head> <script src="jquery.min.js"></script> </head> <body> <div id="images" style="height: 300px"></div> <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tag s=besancon&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); </script> </body></html>

jQuery UI http://jqueryui.com/ Un ensemble de composants graphiques téléchargeable à l'adresse http://jqueryui.com/download. un noyau (Core) des « comportements » (interactions) draggable : pour glisser-déplacer un élément http://jqueryui.com/demos/draggable/ droppable : pour « déposer » un élément http://jqueryui.com/demos/droppable/ resizable : pour redimensionner un élément http://jqueryui.com/demos/resizable/ selectable : pour sélectionner des éléments à la souris http://jqueryui.com/demos/selectable/ sortable : pour trier des éléments http://jqueryui.com/demos/selectable/

jQuery UI Une collection de thèmes http://jqueryui.com/themeroller/ des « widgets » « accordéon » http://jqueryui.com/demos/accordion/ « calendrier » http://jqueryui.com/demos/datepicker/ boîte de dialogue http://jqueryui.com/demos/dialog/ barre de progression http://jqueryui.com/demos/progressbar/ curseur http://jqueryui.com/demos/slider/ onglets http://jqueryui.com/demos/tabs/ des « effets » http://jqueryui.com/demos/effect/ Clignotement, disparition, apparition, éclatement, transition… Une collection de thèmes http://jqueryui.com/themeroller/

jQuery Plugins On peut étendre facilement jQuery en utilisant des « plugins » Les méthodes ajoutées sont au même niveau que les méthodes natives Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet jQuery, appliquer la méthode à tous les éléments représentés Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant par l'équipe de développement http://plugins.jquery.com/ des menus http://apycom.com/ http://www.wizzud.com/jqDock/ Galerie photo : VisualLightbox http://visuallightbox.com

Conclusion jQuery est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifier et unifie la syntaxe d’accès au DOM Permet de faire des requètes AJAX simplement UI et nombreux plugins complémentaires D’autres frameworks sont disponibles et ne sont pas à oublier : il est possible de combiner les frameworks

Qu'est-ce que Dojo ? Ensemble Open Source de librairies JavaScript Simplifie le code javascript Appartient à Google aujourd'hui (qui a racheté Jot) Supporté par IBM, Sun, JotSpot, SitePen, Renkoo, AOL TurboAjax, OpenLaszlo, Nexaweb, Bea Systems http://dojotoolkit.com/ Indépendant de la techologie serveur et des langages utilisés (java, c#, python, ruby...) source: dojotoolkit.org

Les librairies du Toolkit Dojo

Dojo 3 parties : Dojo dijit dojoX Support cross-browser, chargement des packages , accès et manipulation du DOM, debugger Firebug Lite, évènements, composants MVC, Drag and drop, appels Ajax asynchrones, encodage, décodage JSON dijit Widgets, Contrôles avancés d'interface utilisateur,système de template dojoX innovations: graphiquess, support du mode offline, widgets évolués comme les tableaux (grid), etc

1) L'application télécharge des morceaux de Dojo depuis le net : Google: <SCRIPT TYPE="text/javascript" SRC= ”http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"> </SCRIPT> La balise script est utilisée pour charger le script dojo.js, toujours obligatoire.

2) Ajouter Dojo dans son application (il sera déployé avec l'application) Downloader depuis http://dojotoolkit.org/downloads Unzipper le fichier à côté des pages web ou jsp du projet. Inclure dojo comme ceci dans les pages qui l'utilisent <script type="text/javascript" djConfig="parseOnLoad: true" src="dojo-release-1.3.2/dojo/dojo.js"> </script> Pas de “/” ici ! Le système de chargement des packages chargera toutes les dépendances s'il y en a !

3) Installer une fois pour toute Dojo sur le serveur (recommandé) Que ce soit Tomcat ou Glassfish, dézipper Dojo dans le docroot du serveur, par exemple C:\Sun\AppServer\domains\domain1\docroot\dojo- release-1.3.2 C:\Program Files\Apache Software Foundation\Apache Tomcat 6.0.18\webapps\ROOT\dojo-release-1.3.2 Et l'inclure dans l'application : <script type="text/javascript" djConfig="parseOnLoad: true" src=“/dojo-release-1.3.2/dojo/dojo.js"> </script> “/” obligatoire ici, l’inverse de ce qu’on a vu précédemment !

Dojo contient plusieurs Démonstrations Par exemple : themeTester.html

Exemples de widgets issus de dijit

Choses à faire dans une page Charger la CSS Dojo <head> <style type="text/css"> @import "js/dojo/resources/dojo.css";"; </style> <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true" isDebug: true > </script> </head> Cette ligne indique qu'on va activer le mode debug : cela va générer des messages en couleur pour firebug Mais si on est pas sous Firefox avec Firebug, Dijo inclut un mini debugger pour les autres browsers : firebug lite !

Exemple dijit.layout.AccordionContainer <script> dojo.require("dojo.parser"); dojo.require("dijit.layout.AccordionContainer"); </script> <body> <div dojoType="dijit.layout.AccordionContainer" duration="200" style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> <div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane1"> <p > some text ...</p > <!-- contenu html --> </div> <div dojoType="dijit.layout.AccordionPane" title="Pane2" href="tab1.html" > <!-- c'est un URL ! Chargé en Ajax ! --> This is how you add accordion pane to your page.

Appels Ajax : XMLHttpRequest (XHR): dojo. xhrDelete(), dojo Appels Ajax : XMLHttpRequest (XHR): dojo.xhrDelete(), dojo.xhrGet(), dojo.xhrPost(), dojo.xhrPut()

Envoie de requête, récupérer la réponse d'un serveur Appeler un url <script type="text/javascript"> dojo.xhrGet({ url: 'sayHello', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); </script> Fonction de callback En cas d'erreur, on appelle cette fonction. Contenu à envoyer

Connecter un événement à un Widget (bouton ici) <head> ... <script type="text/javascript"> dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> Name: <input name="Name" id="name" type="text" /> <button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> makeAjaxCall(); </button> </body> On déclare un écouteur avec le type dojo/method

Suite... function makeAjaxCall(){ dojo.xhrGet({ url: 'sayHello.jsp', call url <head> <script type="text/javascript"> function makeAjaxCall(){ dojo.xhrGet({ url: 'sayHello.jsp', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); } function helloCallback(data,ioArgs) { dojo.byId("returnMsg").innerHTML = data; </script> </head> <body> Name: <input name="Name" id="name" type="text" /> <button dojoType="dijit.form.Button" <script type="dojo/method" event="onClick"> makeAjaxCall(); ... <p id=returnMsg></p> Callback function On error function Content to send