AJAX Jérôme CUTRONA 06:28:58 Programmation Web 2014-2015 1.

Présentation au sujet: "AJAX Jérôme CUTRONA 06:28:58 Programmation Web 2014-2015 1."— Transcription de la présentation:

1 AJAX Jérôme CUTRONA jerome.cutrona@univ-reims.fr 06:28:58 Programmation Web 2014-2015 1

2 I NTRODUCTION 206:28:58 Programmation Web 2014-2015

3 AJAX ?  AJAX : Asynchronous JavaScript And XML (JavaScript asynchrone et XML) JavaScript : langage de script côté client (navigateur) JavaScript : langage de script côté client (navigateur) Asynchrone : par rapport au chargement de la page Web et des portions de page Web 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 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  AJAJ : Asynchronous JavaScript And JSON 306:28:58 Programmation Web 2014-2015

4 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 HTML CSS CSS DOM / JavaScript DOM / JavaScript XMLHttpRequest (JavaScript) XMLHttpRequest (JavaScript) XML (ou JSON) XML (ou JSON) 406:28:58 Programmation Web 2014-2015

5 Asynchrone ? (une vision)  Fonctionnement classique du Web : Chargement d'une page Chargement d'une page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre page Chargement d'une autre page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre page Chargement d'une autre page......  Fonctionnement "AJAX" du Web : Chargement d'une page Chargement d'une page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une partie de page Chargement d'une partie de page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre partie de page Chargement d'une autre partie de page...... 506:28:58 Programmation Web 2014-2015

6 Échanges client/serveur classiques 606:28:58 Programmation Web 2014-2015 Demande de la page Envoi de la page ClientServeur Traitement url Demande de la page Envoi de la page Traitement Demande de la page Envoi de la page Traitement clic clic

7 Échanges client/serveur en AJAX 706:28:58 Programmation Web 2014-2015 Demande de la page Envoi de la page ClientServeur Traitement url Demande de données Envoi des données Traitement Demande de données Envoi des données Traitement clic clic JavaScript JavaScript JavaScript JavaScript

8 XMLHTTPR EQUEST 806:28:58 Programmation Web 2014-2015

9 XMLHTTPRequest  Cœur d'AJAX  Objet JavaScript  En fait, objets JavaScript Microsoft : Microsoft :  ActiveXObject("Msxml2.XMLHTTP")  ActiveXObject("Microsoft.XMLHTTP") Les autres : Les autres :  XMLHttpRequest()  Permet d'effectuer des requêtes HTTP et d'en récupérer le résultat 906:28:58 Programmation Web 2014-2015

10 XMLHTTPRequest : propriétés 1006:28:58 Programmation Web 2014-2015 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.

11 XMLHTTPRequest : méthodes 1106:28:58 Programmation Web 2014-2015 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.

12 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 1206:28:58 Programmation Web 2014-2015

13 XMLHTTPR EQUEST I NSTANCIER L ' OBJET 1306:28:58 Programmation Web 2014-2015

14 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 1406:28:58 Programmation Web 2014-2015

15 Instancier XMLHTTPRequest function GetXmlHttpObject() { var objXMLHttp = null ; var objXMLHttp = null ; if (window.XMLHttpRequest) { // pour non-IE if (window.XMLHttpRequest) { // pour non-IE objXMLHttp = new XMLHttpRequest() ; objXMLHttp = new XMLHttpRequest() ; } else { else { if (window.ActiveXObject) { if (window.ActiveXObject) { try { // pour IE try { // pour IE objXMLHttp = objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP") ; new ActiveXObject("Msxml2.XMLHTTP") ; } catch (e) { catch (e) { try { // pour une autre version de IE try { // pour une autre version de IE… 1506:28:58 Programmation Web 2014-2015

16 Instancier XMLHTTPRequest … objXMLHttp = objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") ; new ActiveXObject("Microsoft.XMLHTTP") ; } } catch (e) { catch (e) { window.alert("Votre navigateur ne prend window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.") ; pas en charge l'objet XMLHTTPRequest.") ; } } return objXMLHttp ; return objXMLHttp ;} 1606:28:58 Programmation Web 2014-2015

17 XMLHTTPREQUEST INITIALISER UNE REQUÊTE 1706:28:58 Programmation Web 2014-2015

18 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 1806:28:58 Programmation Web 2014-2015

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

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

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

22 XMLHTTPR EQUEST F ONCTION DE TRAITEMENT 2206:28:58 Programmation Web 2014-2015

23 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 2306:28:58 Programmation Web 2014-2015

24 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é 0  non initialisé 1  ouverture. La méthode open() a été appelée avec succès 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 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é 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 4  terminé. Les données sont chargées 2406:28:58 Programmation Web 2014-2015

25 F ONCTIONS ET FERMETURES EN J AVA S CRIPT 2506:28:58 Programmation Web 2014-2015

26 Fonctions en JavaScript  Fonction est un type de variable function f(a) { return a + a ; } var g = function (a) { return a * a ; } ; function h(a, une_fonction) { return une_fonction(a) ; return une_fonction(a) ;} window.alert("f(42) : " + f(42)) ; window.alert("g(12) : " + g(12)) ; window.alert("h(12, g) : " + h(12, g)) ; window.alert("h(12, f) : " + h(12, f)) ; 2606:28:58 Programmation Web 2013-2014 84 144 24

27 Portée des variables  La portée des variables est liée aux fonctions et non aux blocs if, while, etc.  Les variables sont globales si déclarées hors de toute fonction déclarées hors de toute fonction déclarées dans une fonction SANS le mot clé var déclarées dans une fonction SANS le mot clé var  Les variables sont locales à une fonction si déclarées dans une fonction AVEC le mot clé var déclarées dans une fonction AVEC le mot clé var  Les variables sont accessibles après la déclaration après la déclaration après la première affectation après la première affectation 2706:28:58 Programmation Web 2013-2014

28 Fermetures (closures)  Portée des variables d’une fonction étendue : aux fonctions définies dans une fonction aux fonctions définies dans une fonction aux fonctions définies dans les fonctions définies dans une fonction aux fonctions définies dans les fonctions définies dans une fonction aux fonctions définies dans les fonctions définies dans les fonctions définies dans une fonction aux fonctions définies dans les fonctions définies dans les fonctions définies dans une fonction …  Une fonction peut accéder aux variables de son contexte et aux variables des contextes parents  La capture des variables se fait à la fin de l’appel de la fonction contenant les déclarations 2806:28:58 Programmation Web 2013-2014

29 Fermetures : exemple function f() { // Variable a locale à f() // Variable a locale à f() var a = 12 ; var a = 12 ; window.alert("Dans f(), a est " window.alert("Dans f(), a est " + typeof a) ; + typeof a) ; // Fonction g() définie dans la fonction f() // Fonction g() définie dans la fonction f() function g() { function g() { a++ ; // Incrémentation de a définie dans fonction f() a++ ; // Incrémentation de a définie dans fonction f() window.alert("Dans g(), a est " window.alert("Dans g(), a est " + typeof a) ; + typeof a) ; } window.alert("Avant g(), a vaut " + a) ; window.alert("Avant g(), a vaut " + a) ; g() ; g() ; window.alert("Après g(), a vaut " + a) ; window.alert("Après g(), a vaut " + a) ;} window.alert("En global, a est " + typeof a) ; f() ; 2906:28:58 Programmation Web 2013-2014 En global, a est undefined Dans f(), a est number Avant g(), a vaut 12 Dans g(), a est number Après g(), a vaut 13

30 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  xmlHttp. onreadystatechange= function() { if (xmlHttp.readyState == 4) window.alert('Données dispo !'); } 3006:28:58 Programmation Web 2014-2015 Requêteterminée

31 XMLHTTPREQUEST EFFECTUER LA REQUÊTE 3106:28:58 Programmation Web 2014-2015

32 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 3206:28:58 Programmation Web 2014-2015

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

34 XMLHTTPR EQUEST T RAITER LE RÉSULTAT 3406:28:58 Programmation Web 2014-2015

35 Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ? 3506:28:58 Programmation Web 2014-2015

36 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)  Résultat généralement sous 3 formes : texte qui peut aussi être du code HTML texte qui peut aussi être du code HTML XML XML JSON JSON  Le traitement consiste principalement en une modification de la page Web courante en utilisant JavaScript, le DOM et les CSS 3606:28:58 Programmation Web 2014-2015

37 Récupérer le résultat de la requête  Sous forme de texte texte brut texte brut texte contenant du code HTML texte contenant du code HTML XMLHTTPRequest.responseText XMLHTTPRequest.responseText  Sous forme d'un objet DOM XML XMLHTTPRequest.responseXML XMLHTTPRequest.responseXML Serveur : Content-Type: text/xml Serveur : Content-Type: text/xml  Sous forme de données JSON texte contenant du code JSON texte contenant du code JSON JSON.parse(XMLHTTPRequest.responseText) JSON.parse(XMLHTTPRequest.responseText) 3706:28:58 Programmation Web 2014-2015

38 Exploiter des données au format texte  Texte brut document.mon_formulaire.saisie.value = xmlHttp.responseText document.mon_formulaire.saisie.value = xmlHttp.responseText  Texte contenant du code HTML document.getElementById('txt').innerHTML = xmlHttp.responseText document.getElementById('txt').innerHTML = xmlHttp.responseText 3806:28:58 Programmation Web 2014-2015

39 E XEMPLE D ’ UTILISATION BASIQUE 3906:28:58 Programmation Web 2014-2015

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

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

42 JSON 4206:28:58 Programmation Web 2014-2015

43 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"}] }}}   4306:28:58 Programmation Web 2014-2015 Équivalent XML

44 JSON (JavaScript Object Notation)  Deux structures :  Objet {} {} {chaîne : valeur} {chaîne : valeur} {chaîne : valeur, chaîne : valeur, …} {chaîne : valeur, chaîne : valeur, …}  Tableau [] [] [valeur] [valeur] [valeur, valeur, …] [valeur, valeur, …]  Valeur : chaîne|nombre|objet|tableau|true|false|null chaîne|nombre|objet|tableau|true|false|null 4406:28:58 Programmation Web 2014-2015 http://www.json.org/

45 JSON (JavaScript Object Notation) 4506:28:58 Programmation Web 2014-2015  object {} {} { members } { members }  members pair pair pair, members pair, members  pair string : value string : value  array [] [] [ elements ] [ elements ]  elements value value value, elements value, elements  value string string number number object object array array true true false false null null  string "" "" " chars " " chars "  chars char char char chars char chars  char any-Unicode-character- except-"-or-\-or- control-character any-Unicode-character- except-"-or-\-or- control-character \" \" \\ \\ \/ \/ \b \b \f \f \n \n \r \r \t \t \u four-hex-digits \u four-hex-digits http://www.json.org/

46 JSON (JavaScript Object Notation) 4606:28:58 Programmation Web 2014-2015  number int int int frac int frac int exp int exp int frac exp int frac exp  int digit digit digit1-9 digits digit1-9 digits - digit - digit - digit1-9 digits - digit1-9 digits  frac. digits. digits  exp e digits e digits  digits digit digit digits digit digit digits  e e e+ e+ e- e- E E+ E+ E- E- http://www.json.org/

47 JSON (JavaScript Object Notation) 4706:28:58 Programmation Web 2014-2015 http://www.json.org/

48 JSON (JavaScript Object Notation) 4806:28:58 Programmation Web 2014-2015 http://www.json.org/

49 JSON (JavaScript Object Notation) 4906:28:58 Programmation Web 2014-2015 http://www.json.org/

50 JSON (JavaScript Object Notation) 5006:28:58 Programmation Web 2014-2015 http://www.json.org/

51 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+')');  var myObject = JSON.parse(myJSONtext);  Accès aux attributs de l'objet { "menu": { "id": "file", "value": "File" "popup": { "item": … myObject.menu.id  'file' 5106:28:58 Programmation Web 2014-2015

52 E NCAPSULATION DE XML H TTP R EQUEST 5206:28:58 Programmation Web 2014-2015

53 Encapsulation de xmlHttpRequest  La démarche générale exposée précédemment est fastidieuse  Une approche classique consiste à effectuer toutes les étapes sous forme d’une requête : Objet JavaScript Objet JavaScript Paramétré par une structure JSON Paramétré par une structure JSON Fonction de traitement personnalisable Fonction de traitement personnalisable Fonction d’erreur personnalisable Fonction d’erreur personnalisable Contrôle de type de données reçu Contrôle de type de données reçu Bibliothèque JS : dojo, jQuery, mootools, la vôtre, … Bibliothèque JS : dojo, jQuery, mootools, la vôtre, … 5306:28:58 Programmation Web 2014-2015

54 Utilisation de dojo // Encapsulation dojo de xmlHttpRequest dojo.xhrGet( { url:"data.json", url:"data.json", handleAs:"json", handleAs:"json", data : { // Paramètres de la requête data : { // Paramètres de la requête q : "recherche" }, q : "recherche" }, // Associer la fonction de traitement // Associer la fonction de traitement load: function (data){ load: function (data){ /* Traitement des données */ } /* Traitement des données */ } }); 5406:28:58 Programmation Web 2014-2015

55 Utilisation de votre encapsulation // Votre encapsulation de xmlHttpRequest var ajax = new Request( { url : "getJSON.php", // URL de la requête { url : "getJSON.php", // URL de la requête method : "get", // Méthode de la requête method : "get", // Méthode de la requête handleAs : 'json', // Type de résultat attendu handleAs : 'json', // Type de résultat attendu parameters : { // Paramètres de la requête parameters : { // Paramètres de la requête q : "recherche" }, q : "recherche" }, // Associer la fonction de traitement // Associer la fonction de traitement onSuccess : function (json) { /* Traitement des données */ }, asynchronous : true // Requête en mode ASYNCHRONE onSuccess : function (json) { /* Traitement des données */ }, asynchronous : true // Requête en mode ASYNCHRONE }) ; 5506:28:58 Programmation Web 2014-2015 Il ne vous reste plus qu’à l’écrire !