AJAX Jérôme CUTRONA 06:28:58 Programmation Web

I NTRODUCTION 206:28:58 Programmation Web

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

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

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 :28:58 Programmation Web

Échanges client/serveur classiques 606:28:58 Programmation Web 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

Échanges client/serveur en AJAX 706:28:58 Programmation Web 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

XMLHTTPR EQUEST 806:28:58 Programmation Web

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

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

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

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

XMLHTTPR EQUEST I NSTANCIER L ' OBJET 1306:28:58 Programmation Web

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

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

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

XMLHTTPREQUEST INITIALISER UNE REQUÊTE 1706:28:58 Programmation Web

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

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

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 CaractèreCode SPACE%20 <%3C >%3E #%23 %25 {%7B }%7D |%7C \%5C ^%5E ~%7ECaractèreCode[%5B ]%5D `%60 ;%3B /%2F ?%3F =%3D &%26 $%24

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

XMLHTTPR EQUEST F ONCTION DE TRAITEMENT 2206:28:58 Programmation Web

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

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

F ONCTIONS ET FERMETURES EN J AVA S CRIPT 2506:28:58 Programmation Web

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

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

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

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 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

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 Requêteterminée

XMLHTTPREQUEST EFFECTUER LA REQUÊTE 3106:28:58 Programmation Web

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

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

XMLHTTPR EQUEST T RAITER LE RÉSULTAT 3406:28:58 Programmation Web

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

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

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

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

E XEMPLE D ’ UTILISATION BASIQUE 3906:28:58 Programmation Web

Exemple d'utilisation d'AJAX 4006:28:58 Programmation Web 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 ; }}

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

JSON 4206:28:58 Programmation Web

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 Équivalent XML

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

JSON (JavaScript Object Notation) 4506:28:58 Programmation Web  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

JSON (JavaScript Object Notation) 4606:28:58 Programmation Web  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-

JSON (JavaScript Object Notation) 4706:28:58 Programmation Web

JSON (JavaScript Object Notation) 4806:28:58 Programmation Web

JSON (JavaScript Object Notation) 4906:28:58 Programmation Web

JSON (JavaScript Object Notation) 5006:28:58 Programmation Web

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

E NCAPSULATION DE XML H TTP R EQUEST 5206:28:58 Programmation Web

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

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

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 Il ne vous reste plus qu’à l’écrire !