2. 2
14:34:10 Programmation Web 2013-2014
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
3. 3
14:34:10 Programmation Web 2013-2014
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)
4. 4
14:34:10 Programmation Web 2013-2014
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 :
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
...
5. 5
14:34:10 Programmation Web 2013-2014
Échanges client/serveur classiques
Demande de la page
Envoi de la page
Client Serveur
Traitement
url
Demande de la page
Envoi de la page
Traitement
Demande de la page
Envoi de la page
Traitement
clic
clic
6. 6
14:34:10 Programmation Web 2013-2014
Échanges client/serveur en AJAX
Demande de la page
Envoi de la page
Client Serveur
Traitement
url
Demande de données
Envoi des données
Traitement
Demande de données
Envoi des données
Traitement
clic
clic
JavaScript
JavaScript
JavaScript
JavaScript
7. 7
14:34:10 Programmation Web 2013-2014
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
8. 8
14:34:10 Programmation Web 2013-2014
onreadystatechange
Gestionnaire d'événements pour les
changements d'état. Il faut assigner
une fonction à cette propriété pour
traiter sur les données renvoyées.
readyState Statut de l'objet.
responseText
Réponse sous forme de chaîne de
caractères.
responseXML Réponse sous forme d'objet DOM.
status
Code numérique de réponse du
serveur HTTP.
statusText
Message accompagnant le code de
réponse.
XMLHTTPRequest : propriétés
9. 9
14:34:10 Programmation Web 2013-2014
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.
XMLHTTPRequest : méthodes
10. 10
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
11. 11
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
12. 12
14:34:10 Programmation Web 2013-2014
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
…
13. 13
14:34:10 Programmation Web 2013-2014
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
14. 14
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
15. 15
14:34:10 Programmation Web 2013-2014
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
16. 16
14:34:10 Programmation Web 2013-2014
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
17. 17
14:34:10 Programmation Web 2013-2014
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)
18. 18
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
19. 19
14:34:10 Programmation Web 2013-2014
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
20. 20
14:34:10 Programmation Web 2013-2014
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
21. 21
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
22. 22
14:34:10 Programmation Web 2013-2014
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");
23. 23
14:34:10 Programmation Web 2013-2014
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
Texte ?
XML / JSON ?
24. 24
14:34:10 Programmation Web 2013-2014
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
25. 25
14:34:10 Programmation Web 2013-2014
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)
26. 26
14:34:10 Programmation Web 2013-2014
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
27. 27
14:34:10 Programmation Web 2013-2014
Réseau
Saisie
Serveur
Exemple d'utilisation d'AJAX
function showHint(str) {
xmlHttp = GetXmlHttpObject() ;
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null) ;
}
Traitement
function stateChanged()
{
if (xmlHttp.readyState == 4) {
document.getElementById("txtHint").innerHTML
=xmlHttp.responseText ; }
}
28. 28
14:34:10 Programmation Web 2013-2014
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
Exploiter des données au format XML
29. 29
14:34:10 Programmation Web 2013-2014
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
30. 30
14:34:10 Programmation Web 2013-2014
Introduction (ou rappel) XML
Normalisation de HTML en XML XHTML
XML a été conçu pour décrire, stocker et
échanger des données
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
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
31. 31
14:34:10 Programmation Web 2013-2014
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>
32. 32
14:34:10 Programmation Web 2013-2014
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>
33. 33
14:34:10 Programmation Web 2013-2014
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>
34. 34
14:34:10 Programmation Web 2013-2014
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">
36. 36
14:34:10 Programmation Web 2013-2014
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
37. 37
14:34:10 Programmation Web 2013-2014
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>
38. 14:34:10 Programmation Web 2013-2014
Exemple XML DOM
liste
animal
idani="AC001-03"
noman visites
Aquilon 1
animal
idani="AC001-01"
noman visites
Bobo 3
¶··
¶····
¶····
¶··
¶····
¶····
¶···· ¶····
¶··
<?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>
38
39. 14:34:10 Programmation Web 2013-2014
Exemple XML DOM
liste
animal
idani="AC001-03"
noman visites
Aquilon 1
animal
idani="AC001-01"
noman visites
Bobo 3
¶··
¶····
¶····
¶··
¶····
¶····
¶···· ¶····
¶··
39
39
xmlHttp.responseXML
.getElementsByTagName(
'animal')
[0]
.getAttribute('idani')
.getElementsByTagName(
'noman ')[0]
.firstChild
.nodeValue
40. 40
14:34:10 Programmation Web 2013-2014
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
48. 48
14:34:10 Programmation Web 2013-2014
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'
49. 49
14:34:10 Programmation Web 2013-2014
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
53. 53
14:34:10 Programmation Web 2013-2014
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> …
54. 54
14:34:10 Programmation Web 2013-2014
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>
55. 55
14:34:10 Programmation Web 2013-2014
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