Upload
francoise-leleu
View
111
Download
0
Embed Size (px)
Citation preview
03:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013 11
AJAXAJAX
Jérôme CUTRONAJérôme CUTRONA
[email protected]@univ-reims.fr
2203:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
AJAX ?AJAX ?
AJAX : AJAX : AAsynchronous synchronous JJavaScript avaScript AAnd nd XXMLML
(JavaScript asynchrone et 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 Asynchrone : par rapport au chargement de la page
Web et des portions de page WebWeb et des portions de page Web XML : langage à balises permettant, entre autre, de XML : langage à balises permettant, entre autre, de
structurer des donnéesstructurer des données
Permet, grâce à JavaScript, la récupération de Permet, grâce à JavaScript, la récupération de données XML (mais aussi texte ou JSON) données XML (mais aussi texte ou JSON) disponibles sur un serveur Webdisponibles sur un serveur Web
3303:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
AJAX ?AJAX ?
N'est PAS une technologieN'est PAS une technologie N'est PAS un logicielN'est PAS un logiciel N'est PAS un greffon (plug-in)N'est PAS un greffon (plug-in) N'est PAS un détergentN'est PAS un détergent C'est l'utilisation conjointe de :C'est l'utilisation conjointe de :
HTMLHTML CSSCSS DOM / JavaScriptDOM / JavaScript XMLHttpRequest (JavaScript)XMLHttpRequest (JavaScript) XML (ou JSON)XML (ou JSON)
4403:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Asynchrone ? (une vision)Asynchrone ? (une vision)
Fonctionnement classique du Web :Fonctionnement classique du Web : Chargement d'une Chargement d'une pagepage InteractionInteraction de l'utilisateur (clic, sélection, formulaire, …) de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une Chargement d'une autre pageautre page InteractionInteraction de l'utilisateur (clic, sélection, formulaire, …) de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une Chargement d'une autre pageautre page ... ...
Fonctionnement "AJAX" du Web :Fonctionnement "AJAX" du Web : Chargement d'une Chargement d'une pagepage InteractionInteraction de l'utilisateur (clic, sélection, formulaire, …) de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une Chargement d'une partie de pagepartie de page InteractionInteraction de l'utilisateur (clic, sélection, formulaire, …) de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre Chargement d'une autre partie de pagepartie de page ......
5503:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Échanges client/serveur classiquesÉchanges client/serveur classiques
Demande de la pageDemande de la page
Envoi de la pageEnvoi de la page
ClientClient ServeurServeur
TraitementTraitementurlurl
Demande de la pageDemande de la page
Envoi de la pageEnvoi de la page
TraitementTraitement
Demande de la pageDemande de la page
Envoi de la pageEnvoi de la page
TraitementTraitement
clicclic
clicclic
6603:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Échanges client/serveur en AJAXÉchanges client/serveur en AJAX
Demande de la pageDemande de la page
Envoi de la pageEnvoi de la page
ClientClient ServeurServeur
TraitementTraitementurlurl
Demande de donnéesDemande de données
Envoi des donnéesEnvoi des données
TraitementTraitement
Demande de donnéesDemande de données
Envoi des donnéesEnvoi des données
TraitementTraitement
clicclic
clicclic
JavaScriptJavaScript
JavaScriptJavaScript
JavaScriptJavaScript
JavaScriptJavaScript
7703:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
XMLHTTPRequestXMLHTTPRequest
Cœur d'AJAXCœur d'AJAX Objet JavaScriptObjet JavaScript En fait, objetEn fait, objetss JavaScript JavaScript
Microsoft :Microsoft : ActiveXObject("Msxml2.XMLHTTP")ActiveXObject("Msxml2.XMLHTTP") ActiveXObject("Microsoft.XMLHTTP")ActiveXObject("Microsoft.XMLHTTP")
Les autres :Les autres : XMLHttpRequest()XMLHttpRequest()
Permet d'effectuer des requêtes HTTP et d'en Permet d'effectuer des requêtes HTTP et d'en récupérer le résultatrécupérer le résultat
8803:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
onreadystatechange onreadystatechange
Gestionnaire d'Gestionnaire d'événements pour les événements pour les changements d'étatchangements d'état. Il faut assigner . Il faut assigner une fonction à cette propriété pour une fonction à cette propriété pour traiter sur les données renvoyées.traiter sur les données renvoyées.
readyState readyState StatutStatut de l'objet. de l'objet.
responseText responseText RéponseRéponse sous forme de chaîne de sous forme de chaîne de caractères.caractères.
responseXML responseXML RéponseRéponse sous forme d'objet DOM. sous forme d'objet DOM.
status status CodeCode numérique de numérique de réponseréponse du du serveur HTTP.serveur HTTP.
statusText statusText MessageMessage accompagnant le accompagnant le codecode de de réponseréponse..
XMLHTTPRequestXMLHTTPRequest : : propriétéspropriétés
9903:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
abort abort AbandonneAbandonne la requête HTTP. la requête HTTP.
getAllResponseHeaders getAllResponseHeaders Renvoie l'Renvoie l'ensemble des entêtes ensemble des entêtes HTTPHTTP de la réponse. de la réponse.
getResponseHeader getResponseHeader RenvoieRenvoie la valeur d'un la valeur d'un champ champ d'entête HTTPd'entête HTTP..
open open Prépare une requête HTTPPrépare une requête HTTP en en indiquant ses paramètres.indiquant ses paramètres.
send send Effectue la requête HTTPEffectue la requête HTTP, en , en envoyant les données.envoyant les données.
setRequestHeader setRequestHeader AssigneAssigne une valeur à un une valeur à un champ champ d'entête HTTPd'entête HTTP..
XMLHTTPRequestXMLHTTPRequest : : méthodesméthodes
101003:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
111103:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
121203:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Instancier Instancier XMLHTTPRequestXMLHTTPRequest
functionfunction GetXmlHttpObject GetXmlHttpObject() () {{
varvar objXMLHttp = objXMLHttp = nullnull ; ;
ifif ((windowwindow.XMLHttpRequest.XMLHttpRequest)) { { // pour non-IE// pour non-IE
objXMLHttp = objXMLHttp = newnew XMLHttpRequest XMLHttpRequest()() ; ;
}}
elseelse {{
ifif ((windowwindow.ActiveXObject.ActiveXObject)) {{
trytry {{ // pour IE// pour IE
objXMLHttp =objXMLHttp =
newnew ActiveXObject ActiveXObject(("Msxml2.XMLHTTP""Msxml2.XMLHTTP")) ; ;
}}
catchcatch ((ee)) {{
trytry {{ // pour une autre version de IE// pour une autre version de IE
……
131303:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Instancier Instancier XMLHTTPRequestXMLHTTPRequest
……
objXMLHttp =objXMLHttp =
newnew ActiveXObject ActiveXObject(("Microsoft.XMLHTTP""Microsoft.XMLHTTP")) ; ;
}}
catchcatch ((ee)) {{
windowwindow..alertalert(("Votre navigateur ne prend"Votre navigateur ne prend
pas en charge l'objet XMLHTTPRequest."pas en charge l'objet XMLHTTPRequest.")) ; ;
}}
}}
}}
}}
returnreturn objXMLHttp ; objXMLHttp ;
}}
varvar xmlHttpxmlHttp == GetXmlHttpObjectGetXmlHttpObject() () ;;
Variable globaleVariable globale
141403:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
151503:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
XMLHTTPRequest::open()XMLHTTPRequest::open()
Initialiser une requête HTTPInitialiser une requête HTTP open (open (methodmethod, , URLURL [, [, asyncFlagasyncFlag[,[, userNameuserName [, [, passwordpassword]]])]]])
Paramètres :Paramètres : methodmethod : : "GET""GET" ou ou "POST""POST" (ou(ou "HEAD""HEAD")) URLURL : : relative ou absoluerelative ou absolue asyncFlagasyncFlag : : mode asynchrone ? mode asynchrone ? truetrue ou ou falsefalse userNameuserName : : nom d'utilisateurnom d'utilisateur passwordpassword : : mot de passemot de passe
RemarqueRemarque : l'URL peut contenir des paramètres, : l'URL peut contenir des paramètres, test.php?test.php?id=12&a=salutid=12&a=salut
161603:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Paramètres d'URLParamètres d'URL
Caractères réservés des URL Caractères réservés des URL [/#?&:~…][/#?&:~…] non admissibles dans les paramètres non admissibles dans les paramètres encodage encodage sous la forme %code_hexadécimalsous la forme %code_hexadécimal
Caractère Caractère Code Code
SPACE SPACE %20 %20 < < %3C %3C > > %3E %3E # # %23 %23 % % %25 %25 { { %7B %7B } } %7D %7D | | %7C %7C \ \ %5C %5C ^ ^ %5E %5E ~ ~ %7E %7E
CaractèreCaractère Code Code
[ [ %5B %5B ] ] %5D %5D ` ` %60 %60 ; ; %3B %3B / / %2F %2F ? ? %3F %3F : : %3A %3A @ @ %40 %40 = = %3D %3D & & %26 %26 $ $ %24 %24
171703:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Paramètres d'URL en JavaScriptParamètres d'URL en JavaScript
Comment Comment échapperéchapper une chaîne en JavaScript ? une chaîne en JavaScript ? Écrire une table de transcription (bof…)Écrire une table de transcription (bof…) Utiliser Utiliser stringstring escapeescape((stringstring)) escape("J'ai faim !")escape("J'ai faim !") J%27ai%20faim%20%21 J%27ai%20faim%20%21
Comment Comment déséchapperdéséchapper une chaîne ? une chaîne ? Écrire une table de transcription inverse (bof…)Écrire une table de transcription inverse (bof…) Utiliser Utiliser stringstring unescapeunescape((stringstring)) unescape("J%27ai%20faim%20%21")unescape("J%27ai%20faim%20%21") J'ai faim ! J'ai faim !
var url="test.php?v="+escape(valeur_v)var url="test.php?v="+escape(valeur_v)
181803:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
191903:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Changements d'état de la requêteChangements d'état de la requête
Chaque Chaque changement d'étatchangement d'état de la requête de la requête engendre un engendre un événementévénement
L'état de la requête est reflété par l'L'état de la requête est reflété par l'état de l'objetétat de l'objet XMLHTTPRequestXMLHTTPRequest : propriété : propriété readyStatereadyState 00 non initialisénon initialisé 11 ouvertureouverture. La méthode . La méthode open()open() a été appelée a été appelée
avec succèsavec succès 22 envoyéenvoyé. La méthode . La méthode send()send() a été appelée avec a été appelée avec
succèssuccès 33 en train de recevoiren train de recevoir. Des données sont en train . Des données sont en train
d'être transférées, mais le transfert n'est pas terminé d'être transférées, mais le transfert n'est pas terminé 44 terminéterminé. Les données sont chargées. Les données sont chargées
202003:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Fonction de traitement du résultatFonction de traitement du résultat
Désigner la Désigner la fonctionfonction qui sera qui sera lancéelancée lors des lors des changements d'étatchangements d'état de la requête de la requête
Désigner la Désigner la fonctionfonction qui sera qui sera lancéelancée quand la quand la requête sera terminée et donc que les requête sera terminée et donc que les donnéesdonnées seront seront disponiblesdisponibles
XMLHTTPRequest.XMLHTTPRequest.onreadystatechangeonreadystatechange function traiter() {function traiter() { if (xmlHttp. if (xmlHttp.readyStatereadyState == 4) == 4) window.alert('Données dispo !'); window.alert('Données dispo !');}}xmlHttp.xmlHttp.onreadystatechangeonreadystatechange=traiter;=traiter;
RequêteRequêteterminéeterminée
212103:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
222203:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
XMLHTTPRequest::send()XMLHTTPRequest::send()
Effectue la requêteEffectue la requête HTTP initialisée avec HTTP initialisée avec XMLHTTPRequest::open()XMLHTTPRequest::open()
Requête de type Requête de type "GET""GET" ou ou "HEAD""HEAD" Aucune donnée à envoyerAucune donnée à envoyer xmlHttp.send(null) ;xmlHttp.send(null) ;
Requête de type Requête de type "POST""POST" données à envoyerdonnées à envoyer xmlHttp.xmlHttp.setRequestHeadersetRequestHeader(( 'Content-Type', 'Content-Type', 'application/x-www-form- 'application/x-www-form-urlencoded') ; urlencoded') ; xmlHttp.xmlHttp.sendsend("v=valeur&x=12");("v=valeur&x=12");
232303:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Utilisation de Utilisation de XMLHTTPRequestXMLHTTPRequest
1.1. Instancier l'objetInstancier l'objet
2.2. Initialiser une requêteInitialiser une requête Méthode, URLMéthode, URL Asynchrone ?Asynchrone ?
3.3. Associer une fonction au traitement du résultat Associer une fonction au traitement du résultat de la requêtede la requête
4.4. Effectuer la requêteEffectuer la requête Envoyer des données ?Envoyer des données ?
5.5. Traiter le résultatTraiter le résultat Texte ?Texte ? XML / JSON ?XML / JSON ?
242403:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Traiter le résultat de la requêteTraiter le résultat de la requête
Traitement effectué dans la Traitement effectué dans la fonction associée au fonction associée au changement d'étatchangement d'état de la requête quand l'état est de la requête quand l'état est 4 (requête terminée)4 (requête terminée)
Le résultat peut se présenter sous 3 formes :Le résultat peut se présenter sous 3 formes : textetexte qui peut aussi être du code HTML qui peut aussi être du code HTML XMLXML (http://dej/XML/COURS/introduction_XML.pdf) (http://dej/XML/COURS/introduction_XML.pdf) JSONJSON
Le Le traitementtraitement consiste généralement en une consiste généralement en une modification de la page Webmodification de la page Web courante en courante en utilisant utilisant JavaScriptJavaScript, le , le DOMDOM et les et les CSSCSS
252503:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Récupérer le résultat de la requêteRécupérer le résultat de la requête
Sous forme de Sous forme de textetexte texte bruttexte brut texte contenant du code HTMLtexte contenant du code HTML XMLHTTPRequest.XMLHTTPRequest.responseTextresponseText
Sous forme d'un Sous forme d'un objet DOM XMLobjet DOM XML XMLHTTPRequest.XMLHTTPRequest.responseXMLresponseXML Serveur : Serveur : Content-Type: text/xmlContent-Type: text/xml
Sous forme de Sous forme de données JSONdonnées JSON texte contenant du code JSONtexte contenant du code JSON eval(XMLHTTPRequest.eval(XMLHTTPRequest.responseTextresponseText))
262603:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
Exploiter des données au format texteExploiter des données au format texte
Texte brutTexte brut document.mon_formulaire.saisie.valuedocument.mon_formulaire.saisie.value== xmlHttp.xmlHttp.responseTextresponseText
Texte contenant du code HTMLTexte contenant du code HTML document.getElementById('txt').innerHTMdocument.getElementById('txt').innerHTMLL== xmlHttp.xmlHttp.responseTextresponseText
272703:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
RéseauRéseau
SaisieSaisie
ServeurServeur
Exemple d'utilisation d'AJAXExemple d'utilisation d'AJAX
function showHint(str) {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) ;}}
TraitementTraitement
function stateChanged() function stateChanged() { { if (xmlHttp.readyState == 4) { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTMLdocument.getElementById("txtHint").innerHTML =xmlHttp.responseText ; } =xmlHttp.responseText ; } } }
282803:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Objet XMLObjet XML : : getElementsByTagName(getElementsByTagName(nn)) Collection de nœuds Collection de nœuds
Collection de nœuds :Collection de nœuds : lengthlength nombre d'éléments nombre d'éléments [[xx]] accès au x accès au xémeéme élément élément
NœudNœud : : firstChildfirstChild Premier fils Premier fils childNodeschildNodes Collection de fils Collection de fils hasChildNodes()hasChildNodes() Possède des fils ? Possède des fils ? nodeValuenodeValue Valeur du nœud Valeur du nœud nodeNamenodeName Nom du nœud Nom du nœud getAttribute(getAttribute(aa)) Valeur de l'attribut Valeur de l'attribut
Exploiter des données au format XMLExploiter des données au format XML
292903:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
<?<?xml versionxml version=="1.0""1.0" encoding encoding=="UTF-8""UTF-8"?>?>
<!<!DOCTYPEDOCTYPE Recette Recette SYSTEMSYSTEM "Recette.dtd""Recette.dtd">>
<Recette><Recette>
<Titre><Titre>Tarte aux pommesTarte aux pommes</Titre></Titre>
<Auteur><Auteur> <Nom><Nom>DesjardinDesjardin</Nom></Nom>
<Prenom><Prenom>EricEric</Prenom></Prenom> </Auteur></Auteur>
</Recette></Recette>
Ça ressemble à du HTML où :Ça ressemble à du HTML où : on utilise ses on utilise ses propres balisespropres balises la la syntaxesyntaxe est est rigoureuserigoureuse
Ce document Ce document ne peut pas s’afficherne peut pas s’afficher directement directement On utilise des d’On utilise des d’outilsoutils pourpour manipulermanipuler
l’information de ce l’information de ce documentdocument
303003:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Normalisation de HTML en XML Normalisation de HTML en XML XHTML XHTML XMLXML a été conçu pour a été conçu pour décriredécrire, , stockerstocker et et
échangeréchanger des des donnéesdonnées
HTMLHTMLStructure orientée présentationStructure orientée présentationJeu de basiles fini et normaliséJeu de basiles fini et normaliséRendu graphique dépendant du Rendu graphique dépendant du navigateurnavigateurRéutilisation limitéeRéutilisation limitéeCible : WebCible : WebÉcriture laxisteÉcriture laxisteStockage : FichierStockage : Fichier
XMLXMLToutes structures, donnéesToutes structures, donnéesJeu de balises extensibleJeu de balises extensiblePas de présentation directe Pas de présentation directe (nécessite une feuille de style)(nécessite une feuille de style)Exploitation sémantiqueExploitation sémantiqueCible : Web, PDF, échange,…Cible : Web, PDF, échange,…Rédaction de contenuRédaction de contenuStockage : Fichier, BD, natifStockage : Fichier, BD, natif
313103:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
DéclarationDéclaration XML XML<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="ISO-8859-1"?>
Tout élément doit avoir une Tout élément doit avoir une balise de fermeturebalise de fermeture<p>C'est un paragraphe</p> <br /><p>C'est un paragraphe</p> <br />
Les noms d'éléments sont Les noms d'éléments sont sensibles à la cassesensibles à la casse<Titre><Titre> et et <titre><titre> sont deux éléments différents sont deux éléments différents
Les éléments doivent être Les éléments doivent être correctement correctement appairésappairés<Un><Un><Deux><Deux>Ceci est incorrectCeci est incorrect</Un></Un></Deux></Deux>
Un Un élément racineélément racine qui qui enserre tous les autresenserre tous les autres il doit exister et est unique dans le document il doit exister et est unique dans le documentex : ex : <html><html> … … </html></html>
323203:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Ce qui est Ce qui est entre la balise ouvrante et la balise entre la balise ouvrante et la balise fermantefermante représente le représente le contenu de l'élémentcontenu de l'élément
L'L'ordreordre des éléments est des éléments est significatifsignificatif même si ici même si ici ChiffresChiffres peut être vu comme un conteneur peut être vu comme un conteneur<Chiffres><Chiffres><Un /><Deux /><Un /><Deux /></Chiffres></Chiffres><Chiffres><Chiffres><Deux /><Un /><Deux /><Un /></Chiffres></Chiffres>
Un élément peut contenir Un élément peut contenir plusieurs éléments plusieurs éléments identiquesidentiques<Chiffres><Chiffres>
<Chiffre><Chiffre>UnUn</Chiffre></Chiffre><Chiffre><Chiffre>DeuxDeux</Chiffre></Chiffre>
</Chiffres></Chiffres>
333303:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Un Un élémentélément peut être peut être qualifiéqualifié par des par des attributsattributs<Chiffre <Chiffre combien="1"combien="1" libelle="un"libelle="un" /> />
Un Un attributattribut a un a un nomnom ETET une une valeurvaleur L'L'ordreordre des attributs n'a des attributs n'a pas d'importancepas d'importance≈ ≈ <Chiffre <Chiffre libelle="un" combien="1"libelle="un" combien="1" /> />
Les valeurs des Les valeurs des attributsattributs doivent être doivent être encadrésencadrés par des par des guillemetsguillemets ouou des des apostrophesapostrophes
Un élément ne peut Un élément ne peut paspas avoir avoir deux fois le même deux fois le même attributattribut<Mot <Mot stylestyle='verbe' ='verbe' stylestyle='futur'>verra</Mot>='futur'>verra</Mot>
343403:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Le Le prologueprologue d'un document XML d'un document XML contientcontient tout tout cece quiqui précèdeprécède l'élémentl'élément racineracine et peut contenir : et peut contenir : la déclaration XMLla déclaration XML des instructions de traitementdes instructions de traitement des commentairesdes commentaires une clause DTDune clause DTD
Instructions de traitementInstructions de traitement<?xml-stylesheet type="text/css" <?xml-stylesheet type="text/css" href="style.css"?>href="style.css"?>
Association à une référence externe à la Association à une référence externe à la structure (DTD)structure (DTD)<!DOCTYPE La_racine SYSTEM "Recette.dtd"><!DOCTYPE La_racine SYSTEM "Recette.dtd">
353503:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Commentaires XMLCommentaires XML<!--<!-- Je suis un commentaire Je suis un commentaire -->-->
Entités prédéfiniesEntités prédéfinies&<lt;; &>gt;; &&amp;; &"quot;; &&aposapos;;
Entités des caractères ne faisant pas partie du Entités des caractères ne faisant pas partie du jeu utiliséjeu utiliséMise en Mise en œœvre => Mise en vre => Mise en œœuvreuvre
Entités de texte définies dans la DTDEntités de texte définies dans la DTD&©rightcopyright;;
Entité référence à des fichiers binairesEntité référence à des fichiers binaires<image photo="<image photo="flipperflipper">">
363603:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
Introduction (ou rappel) XMLIntroduction (ou rappel) XML
Noms des entités :Noms des entités : Peuvent Peuvent contenircontenir des des chiffreschiffres, des , des lettreslettres ou ou
d'd'autres caractèresautres caractères Ne peuvent Ne peuvent PASPAS commencercommencer parpar un un chiffrechiffre ouou
un caractère de un caractère de ponctuationponctuation Ne peuvent Ne peuvent PASPAS commencercommencer par par lala chaînechaîne xmlxml
(dans toutes les casses possibles)(dans toutes les casses possibles) Ne peuvent Ne peuvent PASPAS contenircontenir des des espacesespaces Ne doivent Ne doivent PASPAS contenircontenir le caractère " le caractère " :: " qui " qui
est utilisé par les espaces de nomest utilisé par les espaces de nom
373703:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
Exemple XML Exemple XML DOM DOM
<?<?xml versionxml version=="1.0""1.0" encoding encoding=="UTF-8""UTF-8" ?>?>
<liste><liste>
<animal <animal idaniidani=="AC001-03""AC001-03">>
<noman><noman>AquilonAquilon</noman></noman>
<visites><visites>11</visites></visites>
</animal></animal>
<animal <animal idaniidani=="AC001-01""AC001-01">>
<noman><noman>BoboBobo</noman></noman>
<visites><visites>33</visites></visites>
</animal></animal>
</liste></liste>
03:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
Exemple XML Exemple XML DOM DOM
listeliste
animalanimalidani="AC001-03"idani="AC001-03"
nomannoman visitesvisites
Aquilon Aquilon 1 1
animalanimalidani="AC001-01"idani="AC001-01"
nomannoman visitesvisites
Bobo Bobo 3 3
¶··¶··
¶····¶····
¶····¶····
¶··¶··
¶····¶····
¶····¶····
¶····¶···· ¶····¶····
¶··¶··<?<?xml versionxml version=="1.0""1.0" encoding encoding=="UTF-8""UTF-8" ?>?><liste><liste> <animal <animal idaniidani=="AC001-03""AC001-03">> <noman><noman>AquilonAquilon</noman></noman> <visites><visites>11</visites></visites> </animal></animal> <animal <animal idaniidani=="AC001-01""AC001-01">> <noman><noman>BoboBobo</noman></noman> <visites><visites>33</visites></visites> </animal></animal></liste></liste>
3838
03:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
Exemple XML Exemple XML DOM DOM
listeliste
animalanimalidani="AC001-03"idani="AC001-03"
nomannoman visitesvisites
Aquilon Aquilon 1 1
animalanimalidani="AC001-01"idani="AC001-01"
nomannoman visitesvisites
Bobo Bobo 3 3
¶··¶··
¶····¶····
¶····¶····
¶··¶··
¶····¶····
¶····¶····
¶····¶···· ¶····¶····
¶··¶··
39393939
xmlHttp.xmlHttp.responseXMLresponseXML
..getElementsByTagNamegetElementsByTagName(( 'animal')'animal')
[0][0]
.getAttribute.getAttribute('idani')('idani')
..getElementsByTagNamegetElementsByTagName(('noman ')'noman ')[0][0]
..firstChildfirstChild
..nodeValuenodeValue
404003:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation) otation)
Format de Format de structure de donnéesstructure de données Utilise la Utilise la syntaxesyntaxe des des objets JavaScriptobjets JavaScript {"menu":{"menu":
{"id": "file", {"id": "file", "value": "File" "value": "File" "popup": {"item": [ {"value": "New" }, "popup": {"item": [ {"value": "New" }, {"value": "Open"}, {"value": "Open"}, {"value": "Close"}] }}} {"value": "Close"}] }}}
<menu id="file" value="File"><menu id="file" value="File"> <popup> <item value="New" /> <popup> <item value="New" /> <item value="Open" /> <item value="Open" /> <item value="Close" /> <item value="Close" /> </popup> </popup></menu></menu>
Équivalent XML
414103:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)
Deux structuresDeux structures : : ObjetObjet
{}{} {chaîne : valeur}{chaîne : valeur} {chaîne : valeur, chaîne : valeur, …}{chaîne : valeur, chaîne : valeur, …}
TableauTableau [][] [valeur][valeur] [valeur, valeur, …][valeur, valeur, …]
Valeur :Valeur : chaîne|nombre|objet|tableau|true|false|nullchaîne|nombre|objet|tableau|true|false|null
http://www.json.org/http://www.json.org/
424203:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)
objectobject {}{}{ { membersmembers } }
membersmembers pairpairpairpair , , membersmembers
pairpair stringstring : : valuevalue
arrayarray [][][ [ elementselements ] ]
elementselements valuevaluevaluevalue , , elementselements
valuevalue stringstringnumbernumberobjectobjectarrayarraytruetruefalsefalsenull null
stringstring """"" " charschars " "
charschars charcharchar charschar chars
charchar any-Unicode-character-any-Unicode-character- except-except-""-or--or-\\-or--or- control-charactercontrol-character\"\"\\\\\/\/\b\b\f\f\n\n\r\r\t\t\u \u four-hex-digitsfour-hex-digits
http://www.json.org/http://www.json.org/
434303:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)
numbernumber intintint fracint fracint expint expint frac expint frac exp
intint digitdigitdigit1-9 digitsdigit1-9 digits- - digitdigit- - digit1-9 digitsdigit1-9 digits
fracfrac. . digitsdigits
expexp ee digitsdigits
digitsdigits digitdigitdigitdigit digitsdigits
ee eee+e+e-e-EEE+E+E- E-
http://www.json.org/http://www.json.org/
444403:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)http://www.json.org/http://www.json.org/
454503:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)http://www.json.org/http://www.json.org/
464603:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)http://www.json.org/http://www.json.org/
474703:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)http://www.json.org/http://www.json.org/
484803:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Exploiter des données au format JSONExploiter des données au format JSON
Syntaxe des objets JavaScriptSyntaxe des objets JavaScript ÉvaluerÉvaluer une chaîne contenant du code JSON une chaîne contenant du code JSON
Création d'un objetCréation d'un objet var myObject = var myObject = evaleval('('+myJSONtext+')');('('+myJSONtext+')');
Accès aux attributsAccès aux attributs de l'objet de l'objet{ "{ "menumenu":": { " { "idid": "file",": "file", "value": "File" "value": "File" "popup": { "item": … "popup": { "item": …
myObject.myObject.menumenu..idid 'file' 'file'
494903:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
JavaScript Objet avec JavaScript Objet avec prototype.jsprototype.js
prototype.jsprototype.js est une bibliothèque JavaScript est une bibliothèque JavaScript Écrite par Sam StephensonÉcrite par Sam Stephenson http://prototypejs.org/http://prototypejs.org/
Orientée objetOrientée objet Nombreux tâches pénibles encapsuléesNombreux tâches pénibles encapsulées Encapsule AJAX de façon éléganteEncapsule AJAX de façon élégante 1800 lignes / 43 Ko1800 lignes / 43 Ko
505003:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
prototype.jsprototype.js
515103:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
prototype.jsprototype.js
Fonctions utilitairesFonctions utilitaires $($(""idid"")) ≡ document.getElementById(≡ document.getElementById(""idid""))$($(""id1id1"", , ""id2id2"", …, …)) ≡≡ array(document.getElementById(array(document.getElementById(""id1id1""),),
document.getElementById(document.getElementById(""id2id2""),),
…) …) $F($F(idid) ) ≈ ≈
document.getElementById(document.getElementById(""idid"").value).value
525203:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
prototype.jsprototype.js
Ajax.RequestAjax.Request Objet encapsulant l'utilisation habituelle d'AJAXObjet encapsulant l'utilisation habituelle d'AJAX
new Ajax.Request( new Ajax.Request( urlurl, , paramsparams ) )urlurl : l'url à interroger : l'url à interrogerparamsparams : objet anonyme : objet anonyme
{method : 'post' |'get',{method : 'post' |'get', parameters : param | data, parameters : param | data,
onComplete : callback onComplete : callback asynchronous : true | false}asynchronous : true | false}
callback (xmlHttp)callback (xmlHttp)
535303:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Exemple Exemple prototype.jsprototype.js
<<htmlhtml>> <<headhead>> <<titletitle>>AJAX avec prototype.jsAJAX avec prototype.js</</titletitle>> <<scriptscript typetype=='text/javascript''text/javascript'
srcsrc=='prototype-1.4.0.js''prototype-1.4.0.js'></></scriptscript>> <<scriptscript typetype=='text/javascript''text/javascript'>> functionfunction stateCompleted stateCompleted((remoteremote)) {{
$$(("txtHint""txtHint")).innerHTML=remote.responseText ;.innerHTML=remote.responseText ; }} functionfunction showHint showHint((strstr) ) {{
ifif ((str.length == str.length == 0)0) {{ $$(("txtHint""txtHint")).innerHTML = .innerHTML = """" ; ; returnreturn ; ; }}
varvar ajax = ajax = newnew Ajax.Request Ajax.Request(("gethint.php""gethint.php",, {{ method : method : "get""get",, parameters : parameters : "q=""q="+str,+str,
onComplete : stateCompleted,onComplete : stateCompleted, asynchronous : asynchronous : truetrue }})) ; ;
} </} </scriptscript>> </</headhead> …> …
545403:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Exemple Exemple prototype.jsprototype.js
……
<<bodybody>>
<<formform>> First Name: First Name:
<<inputinput typetype=="text""text" idid=="txt1""txt1"
onkeyup="showHintonkeyup="showHint((thisthis.value.value))"">>
</</formform>>
<<pp>>Suggestions: Suggestions: <<spanspan idid=="txtHint""txtHint"></></spanspan></></pp>>
</</bodybody>>
</</htmlhtml>>
555503:24:5703:24:57 Programmation Web 2012-2013Programmation Web 2012-2013
Petit bilan autour d'AJAXPetit bilan autour d'AJAX
Pour :Pour : Basé sur des standards ouvertsBasé sur des standards ouverts Minimise la bande passanteMinimise la bande passante Interfaces réactives, attente réduiteInterfaces réactives, attente réduite Interfaces proches des clients lourdsInterfaces proches des clients lourds
Contre :Contre : Maximise le nombre de requêtesMaximise le nombre de requêtes Coût de développementCoût de développement Perte de suivant / précédent, favorisPerte de suivant / précédent, favoris A la mode, il faut en coller partout…A la mode, il faut en coller partout… JavaScript, accessibilité des anciens navigateursJavaScript, accessibilité des anciens navigateurs