0554 Programmation Web Ajax

AJAX
Jérôme CUTRONA
jerome.cutrona@univ-reims.fr
23:25:38 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

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)

Asynchrone ? (une vision)
 Fonctionnement classique du Web :

 Chargement d'une page
 Interaction de l'utilisateur (clic, sélection, formulaire, …)
 Chargement d'une autre page
 Chargement d'une autre page
 ...
 Fonctionnement "AJAX" du Web :
 Chargement d'une page
 Chargement d'une partie de page
 Chargement d'une autre partie de page
 ...
Échanges client/serveur classiques
Client Serveur
url
Demande de la page
Traitement
clic
Envoi de la page
Demande de la page
Traitement
clic
Envoi de la page
Demande de la page
Traitement
Envoi de la page

Échanges client/serveur en AJAX
Client Serveur
url
Demande de la page
Traitement
clic
Envoi de la page
JavaScript Demande de données

Traitement
clic
JavaScript Envoi des données
JavaScript Demande de données

Traitement
JavaScript Envoi des données

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

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 Statut de l'objet.
Réponse sous forme de chaîne de
responseText
caractères.
responseXML Réponse sous forme d'objet DOM.
Code numérique de réponse du
status
serveur HTTP.
Message accompagnant le code de
statusText
réponse.
XMLHTTPRequest : méthodes
abort Abandonne la requête HTTP.

Renvoie l'ensemble des entêtes
getAllResponseHeaders
HTTP de la réponse.
Renvoie la valeur d'un champ
getResponseHeader
d'entête HTTP.
Prépare une requête HTTP en
open
indiquant ses paramètres.
Effectue la requête HTTP, en
send
envoyant les données.
Assigne une valeur à un champ
setRequestHeader
d'entête HTTP.
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 ?
 Méthode, URL
 Asynchrone ?
la requête
 Texte ?
 XML / JSON ?
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
…
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() ;
 Méthode, URL
 Asynchrone ?
la requête
 Texte ?
 XML / JSON ?
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
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 Caractère Code
SPACE %20 [ %5B
< %3C ] %5D
> %3E ` %60
# %23 ; %3B
% %25 / %2F
{ %7B ? %3F
} %7D : %3A
| %7C @ %40
\ %5C = %3D
^ %5E & %26
~ %7E $ %24
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)
 Méthode, URL
 Asynchrone ?
la requête
 Texte ?
 XML / JSON ?
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
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
 function traiter() { terminée
if (xmlHttp.readyState == 4)
window.alert('Données dispo !');
}
xmlHttp.onreadystatechange=traiter;
 Méthode, URL
 Asynchrone ?
la requête
 Texte ?
 XML / JSON ?
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");

 Méthode, URL
 Asynchrone ?
la requête
 Texte ?
 XML / JSON ?
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

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)
Exploiter des données au format texte
 Texte brut
 document.mon_formulaire.saisie.value
= xmlHttp.responseText
 Texte contenant du code HTML

 document.getElementById('txt').innerHTM
L
= xmlHttp.responseText

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

Exploiter des données au format XML
 Objet XML :

getElementsByTagName(n)  Collection de nœuds
 Collection de nœuds :

length  nombre d'éléments

[x]  accès au xéme élément
 Nœud :

firstChild  Premier fils

childNodes  Collection de fils

hasChildNodes()  Possède des fils ?

nodeValue  Valeur du nœud

nodeName  Nom du nœud

getAttribute(a)  Valeur de l'attribut
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
HTML XML
Structure orientée présentation Toutes structures, données
Jeu de basiles fini et normalisé Jeu de balises extensible
Rendu graphique dépendant du Pas de présentation directe
navigateur (nécessite une feuille de style)
Réutilisation limitée Exploitation sémantique
Cible : Web Cible : Web, PDF, échange,…
Écriture laxiste Rédaction de contenu
Stockage : Fichier Stockage : Fichier, BD, natif
 Normalisation de HTML en XML  XHTML

 XML a été conçu pour décrire, stocker et
échanger des données
 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>

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

 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">
 Commentaires XML

 Entités prédéfinies
< > & " '
 Entités des caractères ne faisant pas partie du
jeu utilisé
Mise en œvre => Mise en œuvre
 Entités de texte définies dans la DTD
&copyright;
 Entité référence à des fichiers binaires
<image photo="flipper">
 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
Exemple XML  DOM
<?xml version="1.0" encoding="UTF-8" ?>
<liste>
<animal idani="AC001-03">
<noman>Aquilon</noman>
<visites>1</visites>
</animal>
<noman>Bobo</noman>
</animal>
</liste>
Exemple XML  DOM
liste
¶·· <?xml ¶··

version="1.0" encoding="UTF-8" ?>
¶··<liste>
animal animal
<noman>Aquilon</noman>
idani="AC001-03" idani="AC001-01"
¶···· ¶···· </animal> ¶····
¶····
<noman>Bobo</noman>
noman visites noman <visites>
visites 3</visites>
</animal>
¶···· ¶····
</liste>
Aquilon 1 Bobo 3

Exemple XML  DOM
liste
xmlHttp.responseXML
¶·· ¶··
.getElementsByTagName(
¶·· 'animal')
animal animal [0]
idani="AC001-03" idani="AC001-01"
.getAttribute('idani')
¶···· ¶···· ¶····
.getElementsByTagName(
¶····
'noman ')[0]
noman visites noman visites
.firstChild
¶···· ¶···· .nodeValue
Aquilon 1 Bobo 3

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>
http://www.json.org/
 Deux structures :
 Objet
 {}
 {chaîne : valeur}
 {chaîne : valeur, chaîne : valeur, …}
 Tableau
 []
 [valeur]
 [valeur, valeur, …]
 Valeur :
 chaîne|nombre|objet|tableau|true|false|null
object value char

{} string any-Unicode-character-
{ members } number except-"-or-\-or-
object control-character
members array \"
pair true \\
pair , members
false \/
pair null \b
 string : value \f

string \n
array "" \r
[] " chars "
\t
[ elements ]
chars \u four-hex-digits
elements char
value char chars
value , elements

number exp
int e digits
int frac
digits
int exp
digit
int frac exp
digit digits
int e
digit e
digit1-9 digits e+
- digit e-
- digit1-9 digits E
frac E+
E-
. digits






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

prototype.js

prototype.js
 Fonctions utilitaires
 $("id") ≡ document.getElementById("id")
$("id1", "id2", …) ≡
array(document.getElementById("id1"),
document.getElementById("id2"),
…)
 $F(id) ≈
document.getElementById("id").value

prototype.js
 Ajax.Request
 Objet encapsulant l'utilisation habituelle d'AJAX
 new Ajax.Request( url, params )

url : l'url à interroger
params : objet anonyme
{method : 'post' |'get',
parameters : param | data,
onComplete : callback
asynchronous : true | false}
 callback (xmlHttp)
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> …
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>

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

0554 Programmation Web Ajax

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

0554 Programmation Web Ajax

Transféré par

Droits d'auteur :

Formats disponibles

AJAX

23:25:38 Programmation Web 2013-2014 1

 AJAX : Asynchronous JavaScript And XML

23:25:38 Programmation Web 2013-2014 2

 N'est PAS une technologie

23:25:38 Programmation Web 2013-2014 3

 Fonctionnement classique du Web :

23:25:38 Programmation Web 2013-2014 5

JavaScript Demande de données

JavaScript Demande de données

JavaScript Envoi des données

23:25:38 Programmation Web 2013-2014 6

23:25:38 Programmation Web 2013-2014 7

abort Abandonne la requête HTTP.

23:25:38 Programmation Web 2013-2014 22

23:25:38 Programmation Web 2013-2014 24

 Sous forme d'un objet DOM XML

 Sous forme de données JSON

 Texte contenant du code HTML

23:25:38 Programmation Web 2013-2014 26

23:25:38 Programmation Web 2013-2014 27

 Normalisation de HTML en XML  XHTML

23:25:38 Programmation Web 2013-2014 31

23:25:39 Programmation Web 2013-2014 33

¶·· <?xml ¶··

23:25:39 Programmation Web 2013-2014 38

23:25:39 Programmation Web 2013-2014 39

object value char

pair null \b

 string : value \f

23:25:39 Programmation Web 2013-2014 42

23:25:39 Programmation Web 2013-2014 43

23:25:39 Programmation Web 2013-2014 44

23:25:39 Programmation Web 2013-2014 45

23:25:39 Programmation Web 2013-2014 46

23:25:39 Programmation Web 2013-2014 47

 Accès aux attributs de l'objet

23:25:39 Programmation Web 2013-2014 49

23:25:39 Programmation Web 2013-2014 50

23:25:39 Programmation Web 2013-2014 51

 new Ajax.Request( url, params )

23:25:39 Programmation Web 2013-2014 54

Vous aimerez peut-être aussi