BURInternet et HTML AJAX virginie.sans@irisa.fr

BUR Internet et HTML

AJAX

virginie.sans@irisa.fr

http://perso.univ-rennes1.fr/virginie.sans/PWB

PWB

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.

PWB

Approche traditionnelle

Html

ServeurHTTP

Requête 1

Génération du documentpour la requête 1Réponse 1

Html

Requête 2

Génération du documentpour la requête 2Réponse 2

…

Client

PWB

Approche Asynchrone AJAX

Htmlet

Script

ServeurHTTP

Requête 1

Génération du documentpour la requête 1Réponse 1

Client

Script

Requête 2

DonnéesRéponse 2

Génération duDocument pourla requête 2

…

Requête 3

DonnéesRéponse 3

Génération duDocument pourla requête 3

PWB

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.

PWB

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.

PWB

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).

PWB

XMLHttpRequest - III

Méthodes

open: permet d’ouvrir le fichier désiré sur le serveur. Il possède trois paramètres obligatoiresMethode: GET ou POSTURL: Chemin relatif ou absolu du fichier sur le serveurValeur 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’’)

PWB

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.

PWB

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’’);elsealert (‘’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.

PWB

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 objetsXMLHttpRequest() ou ActiveXObject(‘’Microsoft.XMLHTTP’’) car ce sont les

deux objets supportés par les navigateurs standardisés actuels.

PWB

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;elseAttendre;

}

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;

PWB

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.

PWB

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.

PWB

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.

PWB

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).

PWB

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.

PWB 18

JSON

Le XML est une calamité à parser en JavaScriptLe 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()"}

] } }}

PWB 19

Comment utiliser le format JSON

Coté clientJSON 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é serveurLes 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éesinclusion directe du fichier dans la page HTML au même titre qu'un fichier

.js de JavaScript.Ou emploi de XMLHttpRequest.

PWB 20

Exemple d’utilisation de JSONLe 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

PWB 21

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

PWB 22

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

PWB 23

une simple bibliothèque à importer

Disponible sur le site de Jqueryhttp://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>

PWB 24

La fonction jQuery()

jQuery repose sur une seule fonction :jQuery() ou $().

C’est une fonction JavaScriptElle accepte des paramètresElle retourne un objet$ : Syntaxe issue de « 

Prototype »

PWB 25

$('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')

PWB 26

$(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]'

PWB 27

Exemple

<html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

</script>

<body>

<div id="monDiv">Bonjour</div>

<a href="#" onClick="jQuery('#monDiv').hide();">

disparition</a>

</body>

</html>

PWB 28

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 utilitairesparcourir 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êmeon peut chaîner les appels !

$('anything').parent().find('still anything').show();

Cette propriété est extrêmement puissante !

PWB 29

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}});

PWB 30

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); }});

PWB 31

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 JavascriptJSON

PWB 32

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]

} }

PWB 33

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)

PWB 34

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 ;

PWB 35

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?tags=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>

PWB 36

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émenthttp://jqueryui.com/demos/droppable/

resizable : pour redimensionner un élémenthttp://jqueryui.com/demos/resizable/

selectable : pour sélectionner des éléments à la sourishttp://jqueryui.com/demos/selectable/

sortable : pour trier des éléments

http://jqueryui.com/demos/selectable/

PWB 37

jQuery UI

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èmeshttp://jqueryui.com/themeroller/

PWB 38

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

nativesIls 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 : VisualLightboxhttp://visuallightbox.com

PWB 39

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

PWB

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

PWB

Les librairies du Toolkit Dojo

PWB

Dojo 3 parties : Dojo

> 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

PWB

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.

PWB

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 !

PWB

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 !

PWB

Dojo contient plusieursDémonstrationsPar exemple : themeTester.html

PWB

Exemples de widgets issus de dijit

PWB

Choses à faire dans une page

<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 vaactiver le mode debug : celava générer des messages encouleur pour firebug

Mais si on est pas sous Firefoxavec Firebug, Dijo inclut unmini debugger pour les autresbrowsers : firebug lite !

Charger la CSS Dojo

PWB

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 ! --> </div></div>

PWB

Appels Ajax : Appels Ajax :

XMLHttpRequest (XHR):dojo.xhrDelete(),

dojo.xhrGet(), dojo.xhrPost(), dojo.xhrPut()

PWB

Envoie de requête, récupérer la réponse d'un serveur <script type="text/javascript"> dojo.xhrGet({ url: 'sayHello', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } });

</script>

Appeler un url

Fonction de callback

Contenu à envoyer

En cas d'erreur, on appelle

cette fonction.

PWB

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(); </script></button>

</body> On déclare un écouteur avec le type dojo/method

PWB

Suite...<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>

call url

Callback function

Content to send

On error function