11:04:45 Programmation Web 2012-2013 1 AJAX Jérôme CUTRONA [email protected]

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


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)


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


É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



TraitementTraitement




clicclic

clicclic


Échanges client/serveur en AJAXÉchanges client/serveur en AJAX



ClientClient ServeurServeur

TraitementTraitementurlurl

Demande de donnéesDemande de données

Envoi des donnéesEnvoi des données


Demande de donnéesDemande de données

Envoi des donnéesEnvoi des données


clicclic

clicclic

JavaScriptJavaScript





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


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


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


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 ?









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

……


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









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


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


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)









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


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









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");









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


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


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


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) ;}}


function stateChanged() function stateChanged() { { if (xmlHttp.readyState == 4) { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTMLdocument.getElementById("txtHint").innerHTML =xmlHttp.responseText ; } =xmlHttp.responseText ; } } }


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


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



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



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 fermetureC'est un paragraphe C'est un paragraphe 

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>



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>



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>



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



Commentaires XMLCommentaires XML-->

Entités prédéfiniesEntités prédéfinies&&ltlt;; &&gtgt;; &&ampamp;; &&quotquot;; &&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&&copyrightcopyright;;

Entité référence à des fichiers binairesEntité référence à des fichiers binaires<image photo="<image photo="flipperflipper">">



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


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>



listeliste

animalanimalidani="AC001-03"idani="AC001-03"

nomannoman visitesvisites

Aquilon Aquilon 1 1



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



listeliste



Aquilon Aquilon 1 1



Bobo Bobo 3 3

¶··¶··

¶····¶····

¶····¶····

¶··¶··

¶····¶····

¶····¶····

¶····¶···· ¶····¶····

¶··¶··

39393939

xmlHttp.xmlHttp.responseXMLresponseXML

..getElementsByTagNamegetElementsByTagName(( 'animal')'animal')

[0][0]

.getAttribute.getAttribute('idani')('idani')

..getElementsByTagNamegetElementsByTagName(('noman ')'noman ')[0][0]

..firstChildfirstChild

..nodeValuenodeValue


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


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/



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




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-



JSON (JSON (JJavaavaSScript cript OObject bject NNotation)otation)http://www.json.org/http://www.json.org/








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'


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


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



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)


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


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


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

Documents

11:04:45 Programmation Web 2012-2013 1 AJAX Jérôme CUTRONA [email protected]