Jérôme CUTRONA jerome.cutrona@univ-reims.fr AJAX Jérôme CUTRONA jerome.cutrona@univ-reims.fr 01:07:47 Programmation Web 2012-2013.

Présentation au sujet: "Jérôme CUTRONA jerome.cutrona@univ-reims.fr AJAX Jérôme CUTRONA jerome.cutrona@univ-reims.fr 01:07:47 Programmation Web 2012-2013."— Transcription de la présentation:

1 Jérôme CUTRONA jerome.cutrona@univ-reims.fr
AJAX Jérôme CUTRONA 01:07:47 Programmation Web

2 AJAX ? AJAX : Asynchronous JavaScript And XML
(JavaScript asynchrone et XML) JavaScript : langage de script côté client (navigateur) Asynchrone : par rapport au chargement de la page Web et des portions de page Web XML : langage à balises permettant, entre autre, de structurer des données Permet, grâce à JavaScript, la récupération de données XML (mais aussi texte ou JSON) disponibles sur un serveur Web 01:07:47 Programmation Web

3 AJAX ? N'est PAS une technologie N'est PAS un logiciel
N'est PAS un greffon (plug-in) N'est PAS un détergent C'est l'utilisation conjointe de : HTML CSS DOM / JavaScript XMLHttpRequest (JavaScript) XML (ou JSON) 01:07:47 Programmation Web

4 Asynchrone ? (une vision)
Fonctionnement classique du Web : Chargement d'une page Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre page ... Fonctionnement "AJAX" du Web : Chargement d'une partie de page Chargement d'une autre partie de page 01:07:47 Programmation Web

5 Échanges client/serveur classiques
url Demande de la page Traitement clic Envoi de la page Demande de la page Traitement clic Envoi de la page Demande de la page Traitement Envoi de la page 01:07:47 Programmation Web

6 Échanges client/serveur en AJAX
url Demande de la page Traitement clic Envoi de la page JavaScript Demande de données Traitement clic Envoi des données JavaScript JavaScript Demande de données Traitement Envoi des données JavaScript 01:07:47 Programmation Web

7 XMLHTTPRequest Cœur d'AJAX Objet JavaScript En fait, objets JavaScript
Microsoft : ActiveXObject("Msxml2.XMLHTTP") ActiveXObject("Microsoft.XMLHTTP") Les autres : XMLHttpRequest() Permet d'effectuer des requêtes HTTP et d'en récupérer le résultat 01:07:47 Programmation Web

8 XMLHTTPRequest : propriétés
onreadystatechange Gestionnaire d'événements pour les changements d'état. Il faut assigner une fonction à cette propriété pour traiter sur les données renvoyées. readyState Statut de l'objet. responseText Réponse sous forme de chaîne de caractères. responseXML Réponse sous forme d'objet DOM. status Code numérique de réponse du serveur HTTP. statusText Message accompagnant le code de réponse. 01:07:47 Programmation Web

9 XMLHTTPRequest : méthodes
abort Abandonne la requête HTTP. getAllResponseHeaders Renvoie l'ensemble des entêtes HTTP de la réponse. getResponseHeader Renvoie la valeur d'un champ d'entête HTTP. open Prépare une requête HTTP en indiquant ses paramètres. send Effectue la requête HTTP, en envoyant les données. setRequestHeader Assigne une valeur à un champ d'entête HTTP. 01:07:47 Programmation Web

10 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

11 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

12 Instancier XMLHTTPRequest
function GetXmlHttpObject() { var objXMLHttp = null ; if (window.XMLHttpRequest) { // pour non-IE objXMLHttp = new XMLHttpRequest() ; } else { if (window.ActiveXObject) { try { // pour IE objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP") ; catch (e) { try { // pour une autre version de IE … 01:07:47 Programmation Web

13 Instancier XMLHTTPRequest
… objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") ; } catch (e) { window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.") ; return objXMLHttp ; var xmlHttp = GetXmlHttpObject() ; Variable globale 01:07:47 Programmation Web

14 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

15 XMLHTTPRequest::open()
Initialiser une requête HTTP open (method, URL [, asyncFlag[, userName [, password]]]) Paramètres : method : "GET" ou "POST" (ou "HEAD") URL : relative ou absolue asyncFlag : mode asynchrone ? true ou false userName : nom d'utilisateur password : mot de passe Remarque : l'URL peut contenir des paramètres, test.php?id=12&a=salut 01:07:47 Programmation Web

16 Paramètres d'URL Caractères réservés des URL [/#?&:~…]  non admissibles dans les paramètres  encodage sous la forme %code_hexadécimal Caractère Code SPACE %20 < %3C > %3E # %23 % %25 { %7B } %7D | %7C \ %5C ^ %5E ~ %7E Caractère Code [ %5B ] %5D ` %60 ; %3B / %2F ? %3F : %3A @ %40 = %3D & %26 $ %24 01:07:47 Programmation Web

17 Paramètres d'URL en JavaScript
Comment échapper une chaîne en JavaScript ? Écrire une table de transcription (bof…) Utiliser string escape(string) escape("J'ai faim !")  J%27ai%20faim%20%21 Comment déséchapper une chaîne ? Écrire une table de transcription inverse (bof…) Utiliser string unescape(string) unescape("J%27ai%20faim%20%21")  J'ai faim ! var url="test.php?v="+escape(valeur_v) 01:07:47 Programmation Web

18 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

19 Changements d'état de la requête
Chaque changement d'état de la requête engendre un événement L'état de la requête est reflété par l'état de l'objet XMLHTTPRequest : propriété readyState 0  non initialisé 1  ouverture. La méthode open() a été appelée avec succès 2  envoyé. La méthode send() a été appelée avec succès 3  en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé 4  terminé. Les données sont chargées 01:07:47 Programmation Web

20 Fonction de traitement du résultat
Désigner la fonction qui sera lancée lors des changements d'état de la requête Désigner la fonction qui sera lancée quand la requête sera terminée et donc que les données seront disponibles XMLHTTPRequest.onreadystatechange function traiter() { if (xmlHttp.readyState == 4) window.alert('Données dispo !'); } xmlHttp.onreadystatechange=traiter; Requête terminée 01:07:47 Programmation Web

21 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

22 XMLHTTPRequest::send()
Effectue la requête HTTP initialisée avec XMLHTTPRequest::open() Requête de type "GET" ou "HEAD" Aucune donnée à envoyer xmlHttp.send(null) ; Requête de type "POST" données à envoyer xmlHttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded') ; xmlHttp.send("v=valeur&x=12"); 01:07:47 Programmation Web

23 Utilisation de XMLHTTPRequest
Instancier l'objet Initialiser une requête Méthode, URL Asynchrone ? Associer une fonction au traitement du résultat de la requête Effectuer la requête Envoyer des données ? Traiter le résultat Texte ? XML / JSON ? 01:07:47 Programmation Web

24 Traiter le résultat de la requête
Traitement effectué dans la fonction associée au changement d'état de la requête quand l'état est 4 (requête terminée) Le résultat peut se présenter sous 3 formes : texte qui peut aussi être du code HTML XML ( JSON Le traitement consiste généralement en une modification de la page Web courante en utilisant JavaScript, le DOM et les CSS 01:07:47 Programmation Web

25 Récupérer le résultat de la requête
Sous forme de texte texte brut texte contenant du code HTML XMLHTTPRequest.responseText Sous forme d'un objet DOM XML XMLHTTPRequest.responseXML Serveur : Content-Type: text/xml Sous forme de données JSON texte contenant du code JSON eval(XMLHTTPRequest.responseText) 01:07:47 Programmation Web

26 Exploiter des données au format texte
Texte brut document.mon_formulaire.saisie.value = xmlHttp.responseText Texte contenant du code HTML document.getElementById('txt').innerHTML = xmlHttp.responseText 01:07:47 Programmation Web

27 Exemple d'utilisation d'AJAX
Serveur Réseau Traitement Saisie function showHint(str) { xmlHttp = GetXmlHttpObject() ; xmlHttp.onreadystatechange=stateChanged ; xmlHttp.open("GET",url,true) ; xmlHttp.send(null) ; } function stateChanged() { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTML =xmlHttp.responseText ; } } 01:07:47 Programmation Web

28 Exploiter des données au format XML
Objet XML : getElementsByTagName(n)  Collection de nœuds Collection de nœuds : length  nombre d'éléments [x]  accès au xéme élément Nœud : firstChild  Premier fils childNodes  Collection de fils hasChildNodes()  Possède des fils ? nodeValue  Valeur du nœud nodeName  Nom du nœud getAttribute(a)  Valeur de l'attribut 01:07:47 Programmation Web

29 Introduction (ou rappel) XML
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE Recette SYSTEM "Recette.dtd"> <Recette> <Titre>Tarte aux pommes</Titre> <Auteur> <Nom>Desjardin</Nom> <Prenom>Eric</Prenom> </Auteur> </Recette> Ça ressemble à du HTML où : on utilise ses propres balises la syntaxe est rigoureuse Ce document ne peut pas s’afficher directement On utilise des d’outils pour manipuler l’information de ce document 01:07:47 Programmation Web

30 Introduction (ou rappel) XML
HTML Structure orientée présentation Jeu de basiles fini et normalisé Rendu graphique dépendant du navigateur Réutilisation limitée Cible : Web Écriture laxiste Stockage : Fichier Normalisation de HTML en XML  XHTML XML a été conçu pour décrire, stocker et échanger des données XML Toutes structures, données Jeu de balises extensible Pas de présentation directe (nécessite une feuille de style) Exploitation sémantique Cible : Web, PDF, échange,… Rédaction de contenu Stockage : Fichier, BD, natif 01:07:47 Programmation Web

31 Introduction (ou rappel) XML
Déclaration XML <?xml version="1.0" encoding="ISO "?> Tout élément doit avoir une balise de fermeture <p>C'est un paragraphe</p> <br /> Les noms d'éléments sont sensibles à la casse <Titre> et <titre> sont deux éléments différents Les éléments doivent être correctement appairés <Un><Deux>Ceci est incorrect</Un></Deux> Un élément racine qui enserre tous les autres  il doit exister et est unique dans le document ex : <html> … </html> 01:07:47 Programmation Web

32 Introduction (ou rappel) XML
Ce qui est entre la balise ouvrante et la balise fermante représente le contenu de l'élément L'ordre des éléments est significatif même si ici Chiffres peut être vu comme un conteneur <Chiffres><Un /><Deux /></Chiffres> <Chiffres><Deux /><Un /></Chiffres> Un élément peut contenir plusieurs éléments identiques <Chiffres> <Chiffre>Un</Chiffre> <Chiffre>Deux</Chiffre> </Chiffres> 01:07:47 Programmation Web

33 Introduction (ou rappel) XML
Un élément peut être qualifié par des attributs <Chiffre combien="1" libelle="un" /> Un attribut a un nom ET une valeur L'ordre des attributs n'a pas d'importance ≈ <Chiffre libelle="un" combien="1" /> Les valeurs des attributs doivent être encadrés par des guillemets ou des apostrophes Un élément ne peut pas avoir deux fois le même attribut <Mot style='verbe' style='futur'>verra</Mot> 01:07:47 Programmation Web

34 Introduction (ou rappel) XML
Le prologue d'un document XML contient tout ce qui précède l'élément racine et peut contenir : la déclaration XML des instructions de traitement des commentaires une clause DTD Instructions de traitement <?xml-stylesheet type="text/css" href="style.css"?> Association à une référence externe à la structure (DTD) <!DOCTYPE La_racine SYSTEM "Recette.dtd"> 01:07:47 Programmation Web

35 Introduction (ou rappel) XML
Commentaires XML <!-- Je suis un commentaire --> Entités prédéfinies < > & " &apos; Entités des caractères ne faisant pas partie du jeu utilisé Mise en œvre => Mise en œuvre Entités de texte définies dans la DTD &copyright; Entité référence à des fichiers binaires <image photo="flipper"> 01:07:47 Programmation Web

36 Introduction (ou rappel) XML
Noms des entités : Peuvent contenir des chiffres, des lettres ou d'autres caractères Ne peuvent PAS commencer par un chiffre ou un caractère de ponctuation Ne peuvent PAS commencer par la chaîne xml (dans toutes les casses possibles) Ne peuvent PAS contenir des espaces Ne doivent PAS contenir le caractère " : " qui est utilisé par les espaces de nom 01:07:47 Programmation Web

37 Exemple XML  DOM <?xml version="1.0" encoding="UTF-8" ?>
<liste> <animal idani="AC001-03"> <noman>Aquilon</noman> <visites>1</visites> </animal> <animal idani="AC001-01"> <noman>Bobo</noman> <visites>3</visites> </liste> 01:07:47 Programmation Web

38 Exemple XML  DOM <liste> <animal idani="AC001-03">
¶·· ¶·· <?xml version="1.0" encoding="UTF-8" ?> <liste> <animal idani="AC001-03"> <noman>Aquilon</noman> <visites>1</visites> </animal> <animal idani="AC001-01"> <noman>Bobo</noman> <visites>3</visites> </liste> ¶·· animal idani="AC001-03" animal idani="AC001-01" ¶···· ¶···· ¶···· ¶···· noman visites noman visites ¶···· ¶···· Aquilon 1 Bobo 3 01:07:47 Programmation Web

39 .getElementsByTagName( .getElementsByTagName(
Exemple XML  DOM liste xmlHttp.responseXML ¶·· ¶·· .getElementsByTagName( 'animal') ¶·· animal idani="AC001-03" animal idani="AC001-01" [0] .getAttribute('idani') ¶···· ¶···· ¶···· .getElementsByTagName( 'noman ')[0] ¶···· noman visites noman visites .firstChild ¶···· ¶···· .nodeValue Aquilon 1 Bobo 3 01:07:47 Programmation Web 39

40 JSON (JavaScript Object Notation)
Format de structure de données Utilise la syntaxe des objets JavaScript {"menu": {"id": "file", "value": "File" "popup": {"item": [ {"value": "New" }, {"value": "Open"}, {"value": "Close"}] }}} <menu id="file" value="File"> <popup> <item value="New" /> <item value="Open" /> <item value="Close" /> </popup> </menu> Équivalent XML 01:07:47 Programmation Web

41 JSON (JavaScript Object Notation)
Deux structures : Objet {} {chaîne : valeur} {chaîne : valeur, chaîne : valeur, …} Tableau [] [valeur] [valeur, valeur, …] Valeur : chaîne|nombre|objet|tableau|true|false|null 01:07:47 Programmation Web

42 JSON (JavaScript Object Notation)
object {} { members } members pair pair , members string : value array [] [ elements ] elements value value , elements value string number object array true false null "" " chars " chars char char chars char any-Unicode-character-     except-"-or-\-or-     control-character \" \\ \/ \b \f \n \r \t \u four-hex-digits 01:07:47 Programmation Web

43 JSON (JavaScript Object Notation)
number int int frac int exp int frac exp digit digit1-9 digits - digit - digit1-9 digits frac . digits exp e digits digits digit digit digits e e+ e- E E+ E- 01:07:47 Programmation Web

44 JSON (JavaScript Object Notation)
01:07:47 Programmation Web

45 JSON (JavaScript Object Notation)
01:07:47 Programmation Web

46 JSON (JavaScript Object Notation)
01:07:47 Programmation Web

47 JSON (JavaScript Object Notation)
01:07:47 Programmation Web

48 Exploiter des données au format JSON
Syntaxe des objets JavaScript Évaluer une chaîne contenant du code JSON  Création d'un objet var myObject = eval('('+myJSONtext+')'); Accès aux attributs de l'objet { "menu": { "id": "file", "value": "File" "popup": { "item": … myObject.menu.id  'file' 01:07:47 Programmation Web

49 JavaScript Objet avec prototype.js
prototype.js est une bibliothèque JavaScript Écrite par Sam Stephenson Orientée objet Nombreux tâches pénibles encapsulées Encapsule AJAX de façon élégante 1800 lignes / 43 Ko 01:07:47 Programmation Web

50 prototype.js 01:07:47 Programmation Web

51 prototype.js Fonctions utilitaires
$("id") ≡ document.getElementById("id") $("id1", "id2", …) ≡ array(document.getElementById("id1"), document.getElementById("id2"), …) $F(id) ≈ document.getElementById("id").value 01:07:47 Programmation Web

52 prototype.js Ajax.Request
Objet encapsulant l'utilisation habituelle d'AJAX new Ajax.Request( url, params ) url : l'url à interroger params : objet anonyme {method : 'post' |'get', parameters : param | data, onComplete : callback asynchronous : true | false} callback (xmlHttp) 01:07:47 Programmation Web

53 Exemple prototype.js <html> <head> <title>AJAX avec prototype.js</title> <script type='text/javascript' src='prototype js'></script> <script type='text/javascript'> function stateCompleted(remote) { $("txtHint").innerHTML=remote.responseText ; } function showHint(str) { if (str.length == 0) { $("txtHint").innerHTML = "" ; return ; } var ajax = new Ajax.Request("gethint.php", { method : "get", parameters : "q="+str, onComplete : stateCompleted, asynchronous : true }) ; } </script> </head> … 01:07:47 Programmation Web

54 Exemple prototype.js … <body> <form> First Name:
<input type="text" id="txt1" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> 01:07:47 Programmation Web

55 Petit bilan autour d'AJAX
Pour : Basé sur des standards ouverts Minimise la bande passante Interfaces réactives, attente réduite Interfaces proches des clients lourds Contre : Maximise le nombre de requêtes Coût de développement Perte de suivant / précédent, favoris A la mode, il faut en coller partout… JavaScript, accessibilité des anciens navigateurs 01:07:47 Programmation Web