Introduction à Internet AJAX IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01

Introduction à Internet Définition AJAX = Asynchronous JavaScript And XML Méthode informatique de développement d'applications Web. Utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web : HTML et CSS pour la mise en forme DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée XML, XSLT et l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 2 2

Introduction à Internet Comparaison avec les applications web traditionnelles (1) Application WEB traditionnelle : Le client envoie une requête HTTP Le serveur renvoie une page Cela consomme inutilement une partie de la bande passante, car une grande partie du code HTML est commun aux différentes pages de l'application Le chargement d’une nouvelle page à chaque requête n’est pas ergonomique IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 3 3

Introduction à Internet Comparaison avec les applications web traditionnelles (2) Application AJAX : Envoyer des requêtes au serveur HTTP pour ne récupérer que les données nécessaires Utilisation la requête HTTP XMLHttpRequest Utilisation la puissance des feuilles de style (CSS) et de Javascript côté client pour interpréter et mettre en forme la réponse du serveur Permet au navigateur de modifier partiellement la page pour la mettre à jour sans avoir à la recharger Applications plus réactives, meilleure ergonomie IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 4 4

Introduction à Internet Comparaison avec les applications web traditionnelles (3) Application AJAX : quantité de données échangées fortement réduite. Nécessite de charger, sur la première page, une bibliothèque AJAX volumineuse Nécessite un navigateur compatible, autorisant le Javascritpt et le composant XMLHTTP Nécessite des tests minucieux car il existe de grandes différences entre les navigateurs IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 5

Introduction à Internet 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} }); IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 6 6

Introduction à Internet 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); }}); IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 7 7

Introduction à Internet 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] } } IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 8 8

Introduction à Internet 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) Standard dans les web services .Net, Java EE, etc. IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 9 9

Introduction à Internet 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 ; IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 10 10

Introduction à Internet 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> IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 IDNET 13-15H, bd Joffre 54000 NANCY Tél : 03 83 17 90 00 Fax : 03 83 17 90 01 11 11