Transcript XML - dut info reims

AJAX
Jérôme CUTRONA
[email protected]
10:56:05
Programmation Web 2013-2014
1
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
10:56:05
Programmation Web 2013-2014
2
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 :





10:56:06
HTML
CSS
DOM / JavaScript
XMLHttpRequest (JavaScript)
XML (ou JSON)
Programmation Web 2013-2014
3
Asynchrone ? (une vision)
 Fonctionnement classique du Web :






Chargement d'une page
Interaction de l'utilisateur (clic, sélection, formulaire, …)
Chargement d'une autre page
Interaction de l'utilisateur (clic, sélection, formulaire, …)
Chargement d'une autre page
...
 Fonctionnement "AJAX" du Web :






10:56:06
Chargement d'une page
Interaction de l'utilisateur (clic, sélection, formulaire, …)
Chargement d'une partie de page
Interaction de l'utilisateur (clic, sélection, formulaire, …)
Chargement d'une autre partie de page
...
Programmation Web 2013-2014
4
Échanges client/serveur classiques
Client
url
Serveur
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
10:56:06
Programmation Web 2013-2014
5
Échanges client/serveur en AJAX
Client
url
Serveur
Demande de la page
Traitement
clic
Envoi de la page
JavaScript
Demande de données
Traitement
clic
10:56:06
JavaScript
Envoi des données
JavaScript
Demande de données
JavaScript
Envoi des données
Programmation Web 2013-2014
Traitement
6
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
10:56:06
Programmation Web 2013-2014
7
XMLHTTPRequest : propriétés
Gestionnaire d'événements pour les
changements d'état. Il faut assigner
onreadystatechange
une fonction à cette propriété pour
traiter sur les données renvoyées.
readyState
responseText
Statut de l'objet.
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.
10:56:06
Programmation Web 2013-2014
8
XMLHTTPRequest : méthodes
abort
Abandonne la requête HTTP.
getAllResponseHeaders
getResponseHeader
open
Renvoie l'ensemble des entêtes
HTTP de la réponse.
Renvoie la valeur d'un champ
d'entête HTTP.
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.
10:56:06
Programmation Web 2013-2014
9
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
10
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
11
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
…
10:56:06
Programmation Web 2013-2014
12
Instancier XMLHTTPRequest
…
objXMLHttp =
new ActiveXObject("Microsoft.XMLHTTP") ;
}
catch (e) {
window.alert("Votre navigateur ne prend
pas en charge l'objet XMLHTTPRequest.") ;
}
}
}
}
return objXMLHttp ;
Variable globale
}
var xmlHttp = GetXmlHttpObject() ;
10:56:06
Programmation Web 2013-2014
13
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
14
XMLHTTPRequest::open()
 Initialiser une requête HTTP
 open (method, URL [, asyncFlag[,
userName [, password]]])
 Paramètres :





method :
URL :
asyncFlag :
userName :
password :
"GET" ou "POST" (ou "HEAD")
relative ou absolue
mode asynchrone ? true ou false
nom d'utilisateur
mot de passe
 Remarque : l'URL peut contenir des paramètres,
test.php?id=12&a=salut
10:56:06
Programmation Web 2013-2014
15
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
SPACE
<
>
#
%
{
}
|
\
^
~
10:56:06
Code
%20
%3C
%3E
%23
%25
%7B
%7D
%7C
%5C
%5E
%7E
Caractère
[
]
`
;
/
?
:
@
=
&
$
Programmation Web 2013-2014
Code
%5B
%5D
%60
%3B
%2F
%3F
%3A
%40
%3D
%26
%24
16
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)
10:56:06
Programmation Web 2013-2014
17
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
18
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





10:56:06
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
Programmation Web 2013-2014
19
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
Requête
terminée
 function traiter() {
if (xmlHttp.readyState == 4)
window.alert('Données dispo !');
}
xmlHttp.onreadystatechange=traiter;
10:56:06
Programmation Web 2013-2014
20
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
21
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"


10:56:06
données à envoyer
xmlHttp.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded') ;
xmlHttp.send("v=valeur&x=12");
Programmation Web 2013-2014
22
Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête


Méthode, URL
Asynchrone ?
3. Associer une fonction au traitement du résultat
de la requête
4. Effectuer la requête

Envoyer des données ?
5. Traiter le résultat


10:56:06
Texte ?
XML / JSON ?
Programmation Web 2013-2014
23
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
10:56:06
Programmation Web 2013-2014
24
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


10:56:06
texte contenant du code JSON
eval(XMLHTTPRequest.responseText)
Programmation Web 2013-2014
25
Exploiter des données au format texte
 Texte brut

document.mon_formulaire.saisie.value
= xmlHttp.responseText
 Texte contenant du code HTML

10:56:06
document.getElementById('txt').innerHTML
= xmlHttp.responseText
Programmation Web 2013-2014
26
Exemple d'utilisation d'AJAX
Serveur
Réseau
Traitement
Saisie
showHint(str) {
function stateChanged()
xmlHttp = GetXmlHttpObject() ;
{
xmlHttp.onreadystatechange=stateChanged
;
if (xmlHttp.readyState == 4) {
xmlHttp.open("GET",url,true)
;
document.getElementById("txtHint").innerHTML
xmlHttp.send(null)
;
=xmlHttp.responseText
; }
}
10:56:06
Programmation Web 2013-2014
27
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 :






10:56:06
firstChild
childNodes
hasChildNodes()
nodeValue
nodeName
getAttribute(a)
 Premier fils
 Collection de fils
 Possède des fils ?
 Valeur du nœud
 Nom du nœud
 Valeur de l'attribut
Programmation Web 2013-2014
28
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
10:56:06
Programmation Web 2013-2014
29
Introduction (ou rappel) XML
HTML
XML
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
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
 Normalisation de HTML en XML  XHTML
 XML a été conçu pour décrire, stocker et
échanger des données
10:56:06
Programmation Web 2013-2014
30
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>
10:56:06
Programmation Web 2013-2014
31
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>
10:56:06
Programmation Web 2013-2014
32
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>
10:56:06
Programmation Web 2013-2014
33
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">
10:56:06
Programmation Web 2013-2014
34
Introduction (ou rappel) XML
 Commentaires XML
<!-- Je suis un commentaire -->
 Entités prédéfinies
&lt; &gt; &amp; &quot; &apos;
 Entités des caractères ne faisant pas partie du
jeu utilisé
Mise en &#339;vre => Mise en œuvre
 Entités de texte définies dans la DTD
&copyright;
 Entité référence à des fichiers binaires
<image photo="flipper">
10:56:06
Programmation Web 2013-2014
35
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
10:56:06
Programmation Web 2013-2014
36
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>
</animal>
</liste>
10:56:06
Programmation Web 2013-2014
37
Exemple XML  DOM
liste
¶··
<?xml ¶··
version="1.0" encoding="UTF-8" ?>
¶··<liste>
<animal idani="AC001-03">
animal
animal
<noman>Aquilon</noman>
idani="AC001-03"
idani="AC001-01"
<visites>1</visites>
</animal>
¶····
¶····
¶····
<animal idani="AC001-01">
¶····
<noman>Bobo</noman>
visites
visites
noman
noman <visites>3</visites>
</animal>
¶····
¶····
</liste>
Aquilon
10:56:06
1
Bobo
3
Programmation Web 2013-2014
38
Exemple XML  DOM
liste
xmlHttp.responseXML
¶··
¶··
.getElementsByTagName(
'animal')
¶··
animal
idani="AC001-03"
¶····
animal
idani="AC001-01"
¶····
¶····
visites
noman
¶····
Aquilon
10:56:06
.getAttribute('idani')
.getElementsByTagName(
'noman
')[0]
¶····
noman
[0]
visites
¶····
1
Bobo
.firstChild
.nodeValue
3
Programmation Web 2013-2014
39
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" />
Équivalent XML
<item value="Close" />
</popup>
</menu>
10:56:06
Programmation Web 2013-2014
40
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 :

10:56:06
chaîne|nombre|objet|tableau|true|false|null
Programmation Web 2013-2014
41
JSON (JavaScript Object Notation)
http://www.json.org/
object
{}
{ members }

members
pair
pair , members

pair

string : value
array
[]
[ elements ]

elements
value
value , elements

10:56:06
value
string
number
object
array
true
false
null

string
""
" chars "

chars
char
any-Unicode-characterexcept-"-or-\-orcontrol-character
\"
\\
\/
\b
\f
\n
\r
\t
\u four-hex-digits

char
char chars

Programmation Web 2013-2014
42
JSON (JavaScript Object Notation)
http://www.json.org/
number
int
int frac
int exp
int frac exp
exp

int
digit
digit1-9 digits
- digit
- digit1-9 digits
frac
10:56:06
e digits
digits
digit
digit digits

e



. digits
e
e+
eE
E+
E
Programmation Web 2013-2014
43
JSON (JavaScript Object Notation)
http://www.json.org/
10:56:06
Programmation Web 2013-2014
44
JSON (JavaScript Object Notation)
http://www.json.org/
10:56:06
Programmation Web 2013-2014
45
JSON (JavaScript Object Notation)
http://www.json.org/
10:56:06
Programmation Web 2013-2014
46
JSON (JavaScript Object Notation)
http://www.json.org/
10:56:06
Programmation Web 2013-2014
47
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'
10:56:06
Programmation Web 2013-2014
48
JavaScript Objet avec prototype.js
 prototype.js est une bibliothèque JavaScript
 Écrite par Sam Stephenson
 http://prototype.conio.net/




Orientée objet
Nombreux tâches pénibles encapsulées
Encapsule AJAX de façon élégante
1800 lignes / 43 Ko
10:56:06
Programmation Web 2013-2014
49
prototype.js
10:56:06
Programmation Web 2013-2014
50
prototype.js
 Fonctions utilitaires


10:56:06
$("id") ≡ document.getElementById("id")
$("id1", "id2", …) ≡
array(document.getElementById("id1"),
document.getElementById("id2"),
…)
$F(id) ≈
document.getElementById("id").value
Programmation Web 2013-2014
51
prototype.js
 Ajax.Request



10:56:06
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)
Programmation Web 2013-2014
52
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> …
10:56:06
Programmation Web 2013-2014
53
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>
10:56:06
Programmation Web 2013-2014
54
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 :





10:56:06
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
Programmation Web 2013-2014
55