burinternet et html ajax [email protected]
TRANSCRIPT
![Page 2: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/2.jpg)
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.
![Page 3: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/3.jpg)
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
![Page 4: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/4.jpg)
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
![Page 5: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/5.jpg)
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.
![Page 6: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/6.jpg)
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.
![Page 7: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/7.jpg)
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).
![Page 8: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/8.jpg)
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’’)
![Page 9: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/9.jpg)
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.
![Page 10: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/10.jpg)
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.
![Page 11: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/11.jpg)
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.
![Page 12: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/12.jpg)
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;
![Page 13: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/13.jpg)
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.
![Page 14: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/14.jpg)
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.
![Page 15: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/15.jpg)
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.
![Page 16: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/16.jpg)
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).
![Page 17: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/17.jpg)
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.
![Page 18: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/18.jpg)
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()"}
] } }}
![Page 19: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/19.jpg)
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.
![Page 20: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/20.jpg)
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
![Page 21: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/21.jpg)
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
![Page 22: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/22.jpg)
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
![Page 23: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/23.jpg)
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>
![Page 24: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/24.jpg)
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 »
![Page 25: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/25.jpg)
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')
![Page 26: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/26.jpg)
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]'
![Page 27: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/27.jpg)
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>
![Page 28: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/28.jpg)
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 !
![Page 29: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/29.jpg)
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}});
![Page 30: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/30.jpg)
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); }});
![Page 31: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/31.jpg)
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
![Page 32: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/32.jpg)
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]
} }
![Page 33: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/33.jpg)
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)
![Page 34: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/34.jpg)
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 ;
![Page 35: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/35.jpg)
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>
![Page 36: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/36.jpg)
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/
![Page 37: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/37.jpg)
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/
![Page 38: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/38.jpg)
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
![Page 39: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/39.jpg)
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
![Page 40: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/40.jpg)
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
![Page 41: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/41.jpg)
PWB
Les librairies du Toolkit Dojo
![Page 42: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/42.jpg)
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
![Page 43: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/43.jpg)
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.
![Page 44: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/44.jpg)
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 !
![Page 45: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/45.jpg)
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 !
![Page 46: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/46.jpg)
PWB
Dojo contient plusieursDémonstrationsPar exemple : themeTester.html
![Page 47: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/47.jpg)
PWB
Exemples de widgets issus de dijit
![Page 48: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/48.jpg)
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
![Page 49: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/49.jpg)
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>
![Page 50: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/50.jpg)
PWB
Appels Ajax : Appels Ajax :
XMLHttpRequest (XHR):dojo.xhrDelete(),
dojo.xhrGet(), dojo.xhrPost(), dojo.xhrPut()
![Page 51: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/51.jpg)
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.
![Page 52: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/52.jpg)
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
![Page 53: BURInternet et HTML AJAX virginie.sans@irisa.fr](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9d8d497959293b8c3156/html5/thumbnails/53.jpg)
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