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

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

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

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

É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 2012-2013

É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 2012-2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 (http://dej/XML/COURS/introduction_XML.pdf) 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 2012-2013

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

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

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

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

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

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

Introduction (ou rappel) XML Déclaration XML <?xml version="1.0" encoding="ISO-8859-1"?> 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 2012-2013

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

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

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

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

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

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

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

.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 2012-2013 39

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

JSON (JavaScript Object Notation) http://www.json.org/ 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 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 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 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 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 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 01:07:47 Programmation Web 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 01:07:47 Programmation Web 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 01:07:47 Programmation Web 2012-2013

JSON (JavaScript Object Notation) http://www.json.org/ 01:07:47 Programmation Web 2012-2013

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

JavaScript Objet avec prototype.js prototype.js est une bibliothèque JavaScript Écrite par Sam Stephenson http://prototypejs.org/ 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 2012-2013

prototype.js 01:07:47 Programmation Web 2012-2013

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

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

Exemple prototype.js <html> <head> <title>AJAX avec prototype.js</title> <script type='text/javascript' src='prototype-1.4.0.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 2012-2013

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

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