Embed Size (px)
Citation preview
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¶mè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¶m2=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
