Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery

Transcription

1 Programmation web AJAX Jean-Christophe Dubacq IUT de Villetaneuse S AJAX A Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Le modèle classique Jean-Christophe Dubacq (IUTV) Programmation web S / 33 La transition Modèle de l aller-retour Requête synchrone : attente de la réponse avant de continuer Temps d attente important : limitation de l interactivité Trafic important : page rechargée Site web : pas d interaction, travail à sens unique. L application web : session conservée qui permet un travail interactif (formulaires, pages personnalisées) L application client : une page chargée, pas de changement de page, application interactive avec l utilisateur. Communication avec le serveur? Serveur Internet Navigateur GET /toto.html 200 OK Aff. GET /ajax.php 200 OK Aff. Utilisateur toto.html Action sur la page Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

2 Plusieurs façons de communiquer AJAX? Inclusion d éléments a posteriori dans la page : client vers serveur Analyse de l élément inclus (iframe)... bidouillage! Création de l API XMLhttprequest ; non uniformément adoptée Utilisation de ActiveX sous Windows Portabilité de XMLHttpRequest 1 function getxmlhttprequest() { 2 var xrequest = null; 3 if (window.xmlhttprequest) { 4 xrequest= new XMLHttpRequest(); // Navigateur moderne 5 } else if (typeof ActiveXObject!= "undefined") { 6 xrequest= new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 7 }; 8 return xrequest; 9 } Asynchronous Javascript And XML Asynchrone : découplage requête/réponse Javascript : vous savez, maintenant XML : un des langages de communication entre client et serveur. Maintenant, il existe une alternative. AJAX B Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Communication, manière facile Utilisation de jquery : $.ajax (méthode de jquery) Création de trois callbacks pour traiter en asynchrone les données 1 $.ajax({ 2 url: "test.php", 3 type: "GET", 4 success: function(){console.log( ok );}, 5 error: function() {console.log( epic fail );}, 6 complete: function() {console.log( fini );} 7 }) complete[highlightergreen] est appelé tout le temps, success[highlightergreen] ou error[highlightergreen] seulement si nécessaire. Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

3 Récupération d informations L objet XHR et jqxhr 1 $.ajax({ 2 url: "test.php", 3 success: function(data) {console.log( ok );} 4 }) 1 $.ajax({ 2 url: "test.php", 3 success: function(data,textstatus,x) { 4 $( #truc ).text(data);} 5 }) Objet créé en réponse aux requêtes $.ajax ou new XMLHttpRequest(). Actualisé en continu selon l évolution de la réception de la requête jquery : jqxhr object, enrichi par quelques méthodes Hérite alors des deferred objects AJAX C Jean-Christophe Dubacq (IUTV) Programmation web S / 33 L objet XHR et jqxhr (2) Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Les raccourcis Propriétés javascript X.readyState : 0, 1, 2 ou 3 selon l avancée, X.onreadystatechange, X.abort() X.status, X.statusText : "404", "not found"... X.getAllResponseHeaders() (et d autres) Propriétés jquery X.overrideMimeType() pour changer l interprétation des données X.done(), X.fail(), X.always() : extension de X.success() et compagnie $.get est un raccourci qui prend jusqu à 4 éléments url, data, success et datatype (voir plus loin pour celui-ci) et exécute une requête GET $.post est un raccourci qui prend jusqu à 4 éléments url, data, success et datatype (voir plus loin pour celui-ci) et exécute une requête POST $.getscript est un raccourci qui prend jusqu à deux éléments url et success et exécute le javascript renvoyé à l adresse URL (et ensuite, la fonction success) Chargement a posteriori dans le DOM : $.load() Attaché à un élément du DOM Équivalent à un X.innerHTML=ce qui a été renvoyé par la requête Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

4 Le réglage datatype Les callbacks utilisés avec jquery reconnaissent «automatiquement» le type de données utilisé pour renvoyer les données. Deux grands formats en compétition : JSON, XML Autre formats : pur texte, script, JSON+script (JSONP) Vous ne devriez jamais avoir besoin de le préciser manuellement Identification par le type MIME envoyé par le serveur AJAX D Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Le format JSON Jean-Christophe Dubacq (IUTV) Programmation web S / 33 json.org Utilisable directement en javascript À lire par JSON.parse() : JSON.parse( {"a":"3","b":[0,2,"4"]} ) Sera vu en détail plus loin Proche du langage XML, avec des balises et attributs libres Très facile à interpréter dans beaucoup de langages Plus verbeux que le JSON, en perte de vitesse Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

5 Du côté PHP Interprétation mode texte : split, implode Interprétation mode JSON : json_encode, json_decode, AJAX E Jean-Christophe Dubacq (IUTV) Programmation web S / 33 XML : Extensible Markup Language langage de balisage extensible Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Des données structurées Comme HTML, XML est un langage de balisage HTML possède un jeu limité de balises, qui sont parfois orientées présentation (titre, paragraphe, image, lien hypertexte, etc.) Au contraire, XML permet de créer ses propres balises pour représenter toutes les informations que l on souhaite décrire 1 <CINEMA> 2 <NOM>Epée de Bois</NOM> 3 <ADRESSE>100, rue Mouffetard</ADRESSE> 4 <METRO ligne="6">censier</metro> 5 </CINEMA> document plein texte, lisible par un humain C est un avantage, c est aussi un inconvénient sous forme d arbre (comme en HTML) Arbre bien formé (respect du parenthèsage) Respect de la DTD Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

6 La syntaxe La DTD Déclaration XML :<?xml version="1.0"encoding="utf 8"?> Encodage facultatif, mais très recommandé Contient un élément racine déterminé par la DTD Toute balise ouverte doit être fermée Respect de la casse Bonne imbrication Attributs avec des quotes (simples ou doubles) (\&\#39 et \&\#34) Définition DTD La DTD définit le nom, l imbrication, l ordre des balises et les attributs associés. Une DTD va définir des éléments, des attributs et des entités. C est une déclaration d un DOCTYPE, suivi de déclarations ELEMENT, ATTLIST et ENTITY. 2 <!ELEMENT CINEMA (NOM,ADRESSE,METRO+)> 3 <!ELEMENT NOM (#PCDATA)> 4 <!ELEMENT ADRESSE (#PCDATA)> 5 <!ELEMENT METRO (#PCDATA)> 6 <!ATTLIST METRO ligne CDATA #REQUIRED> Il est aussi possible d utilise XML Schema (voir wikipedia pour une courte introduction). AJAX F Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Les DTD en 3 mots Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Quelques précisions On distingue les PCDATA des CDATA. Les PCDATA sont analysées par le parseur, pas les CDATA. Élément : <!ELEMENT nom element (contenu element)> Le contenu peut être du texte (PC ou C), vide (empty), n importe quoi (ANY) ou un ou plusieurs éléments spécifiques. On utilise +*? pour les quantificateurs. On utilise <!ENTITY auteur "J C Dubacq"> pour définir une entité. Le contenu textuel est ensuite utilisé par &auteur;. On utilise <!ATTLIST nom element nom attribut contenu spécifs> Les types de contenu sont : CDATA, PCDATA, des chaînes (a b c) Les spécifications sont : #REQUIRED, #FIXED, #IMPLIED ou une valeur par défaut. Pour ne pas préciser l ordre de balises, on met une * derrière le contenu de l élément. Il existe deux types d attributs ID et IDREF qui permettent de décrire la relation d unicité des identifiants. Un identifiant est de type ID (et non CDATA), et un appel d identifiant (par exemple href) est un IDREF. NMTOKEN est presque synonyme de CDATA, mais restreint le texte à un nom valide en XML. Attribut ou sous-élément On peut choisir de faire de certains attributs des sous-élément (par exemple head et title). Il n y a pas de méthode universelle. Si les deux sont envisageables, en XML, on préfèrera souvent le sous-élément. Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33

7 Utiliser une DTD Qui utilise le XML? 2 <!DOCTYPE truc [ 3...définition DTD 4 ]> 5 <truc> </truc> 2 <!DOCTYPE SYSTEM "note.dtd"> 3 <truc>...</truc> Des centaines de langages (RSS, ATOM, XHTML) Format de sauvegarde de fichier pour un grand nombre de fichiers (applications de bureau, SVG,...) Des formats de communication (XML-RPC, SOAP, XMPP) Il existe des API dans la plupart des langages (C, Java, Javascript, Python, PERL, etc.) pour manipuler des données XML sous forme de tableaux associatifs ou d objets. 2 <!ELEMENT truc empty> AJAX G Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Les flux RSS Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Utiliser XML depuis jquery Voir démonstration en ligne. Le format d un flux RSS est assez simple. Créer un document XML jquery.parsexml utilise le navigateur pour analyser une chaîne et en faire un document XML qui peut être manipulé comme n importe quel document En particulier on peut le jqobjectifier, et donc le manipuler comme un document HTML. AJAX et XML En fait, la détection du datatype se fait automatiquement, et jquery.parsexml est utilisé sur le résultat renvoyé. Jean-Christophe Dubacq (IUTV) Programmation web S / 33 Jean-Christophe Dubacq (IUTV) Programmation web S / 33