Programmation Web Avancée AJAX

rabbitscheesesticksΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 4 χρόνια και 9 μήνες)

497 εμφανίσεις

Programmation Web Avancee
AJAX
Thierry Hamon
Bureau H202 - Institut Galilee
Tel.:33 1.48.38.35.53
Bureau 150 { LIM&BIO { EA 3969
Universite Paris 13 - UFR Leonard de Vinci
74,rue Marcel Cachin,F-93017 Bobigny cedex
Tel.:33 1.48.38.73.07,Fax.:33 1.48.38.73.55
thierry.hamon@univ-paris13.fr
http://www-limbio.smbh.univ-paris13.fr/membres/hamon/
1/26
Asynchronous Javascript And XML (AJAX)
Introduction
Introduit en 2005 par Jesse James Garrett
Applications Web avec interface utilisateur
Deportation d'une partie des traitements lies a l'interface du
code cote client
Reduction des ressources utilisees cote serveur
Economie de bande passante
Exemple d'application Web AJAX:
Google Mail,Maps,Earth,etc.
Liste de suggestions automatiques
Traitement de texte
2/26
Asynchronous Javascript And XML (AJAX)
Introduction
Regroupe un ensemble de technologie Web utilisees
conjointement (HTML,CSS,DOM,Javascript,
XMLHttpRequest,XML)
Permet la recuperation de donnees sur le serveur de maniere
asynchrone,sans interferer avec les donnees dans la page
courante (utilisation de l'objet XMLHttpRequest)
Utilise comme format d'echange,XML,des chiers textes et
aussi JSON
3/26
Asynchronous Javascript And XML (AJAX)
Introduction
Deux composants (Application Web Classique):
Serveur (implementation JAVA ou PHP par exemple)
Contr^ole general de l'application
Propose des ressources statiques:Modele du document,
bibliotheque de scripts,feuilles de style
Traitement dynamique des donnees
Composition dynamique de l'interface
Client (implementation Javascript par exemple)
Contr^ole delegues en fonction du type de vue
Gestion des evenements utilisateur
Composition dynamique de l'interface
Traitement des donnees recues
Dialogue:HTTP,(X)HTML
4/26
Asynchronous Javascript And XML (AJAX)
Introduction
Deux composants (Application Web AJAX):
Serveur (implementation JAVA ou PHP par exemple)
Contr^ole general de l'application
Propose des ressources statiques:Modele du document,
bibliotheque de scripts,feuilles de style
Traitement dynamique des donnees
Composition dynamique de l'interface
Client (implementation Javascript par exemple)
Contr^ole delegues en fonction du type de vue
Gestion des evenements utilisateur
Composition dynamique de l'interface
Traitement des donnees recues
Dialogue:HTTP,XML,JSON
4/26
Fonctionnement
Schema
Source:http:
//www.codeproject.com/KB/showcase/FarPointAJAX.aspx
5/26
Fonctionnement
Illustration
1
Requ^ete asynchrone au serveur dans une fonction JavaScript,
declenchee par un evenement
2
Transfert asynchrone de donnees en XML
3
Traitement dynamique du c^ote client pour achage inclusion
au document HTML,transformation XSLT,etc.
4
Requ^ete asynchrone sur un document XML en utilisant un
objet XMLHttpRequest (Mozilla) ou un contr^ole ActiveX
XMLHTTP (IE)
5
Puis communication AJAX
6/26
Fonctionnement
Communication AJAX
Client:
Envoi de la requ^ete:
Creation de l'objet requ^ete (XMLHttpRequest)
Specication des elements de la requ^ete (URL,methode,
headers HTTP,parametres)
Association d'un gestionnaire d'evenements
Envoi de l'objet
Reception de la reponse:
A chaque modication de l'etat de la requ^ete:tester si dans
l'etat ready
Traitement des donnees recues (Ajout a l'interface,
transformation XSL)
7/26
Fonctionnement
Communication AJAX
Serveur:
Denition des actions a realiser lors de la reception d'une
requ^ete asynchrone AJAX
8/26
Objet XMLHttpRequest
API utilisee
par JavaScript et d'autres langages de scripts
pour transferer des donnees au format XML,texte ou JSON
entre le client (navigateur) et le serveur Web
de maniere asynchrone generalement.Mais possibilite
d'utilisation synchrone
Creation de l'objet XMLHttpRequest:methode ActiveXObject
(IE) et objet Javascript XMLHttpRequest
9/26
Exemples de code
creation de l'objet requ^ete
var r eq = nul l;
f unc t i on get Request ( )
f
i f ( window.XMLHttpRequest )
f
r eq = new XMLHttpRequest ( );
g
el s e i f ( t ypeof Act i veXObj ect!="undef i ned")
f
r eq=new Act i veXObj ect ("Mi cr os of t.XMLHTTP");
g
return r eq;
g
10/26
Exemples de code
creation de l'objet requ^ete
f unc t i on basi cAj axExampl e ( ) f
var xml Http;
t r y f
xml Http=new XMLHttpRequest ( );//Fi r e f ox,Opera 8.0+,Sa f a r i
g catch ( e ) f
t r y f
xml Http=new Act i veXObj ect ("Msxml2.XMLHTTP");//I E 6.0+
g catch ( e ) f
t r y f
xml Http=new Act i veXObj ect ("Mi cr os of t.XMLHTTP");//I E 5.5+
g catch ( e ) f
a l e r t ("Your br owser does not s uppor t AJAX!");
r et ur n f a l s e;
g
g
g
g
11/26
Exemples de code
Chargement asychrone - simple
f unc t i on GetDataUsingAJAX ( req,e l t )
f
//e l t:contenu d'un champs
i f ( r eq!= nul l )
f
//As s oc i at i on de l a f onc t i on de ge s t i on de l'e t at
var ur l="ht t p://www.uni vpar i s 13.f r/mons cr i pt.php?e l t="+ e l t;
//methode sans par ametr e
r eq.onr eadys t at echange = st at eChange;
r eq.open ("GET",ur l,t r ue );
r eq.send ( nul l );
g
g
f unc t i on stateChanged ( r eq )
f
i f ( r eq.r eadySt at e==4) f
document.getEl ementByI d ("t x t").innerHTML=r eq.r es pons eText;
g
g
12/26
Exemples de code
Chargement asychrone - XML
f unc t i on GetDataUsingAJAX ( req,e l t )
f
//e l t:el ement XML du document
i f ( r eq!= nul l )
f
//As s oc i at i on de l a f onc t i on de ge s t i on de l'e t at
var ur l="ht t p://www.uni vpar i s 13.f r/mons cr i pt.php?e l t="+ e l t;
//methode avec par amet r es
r eq.onr eadys t at echange = f unc t i on ( ) fst at eChange ( e l t )g;
r eq.open ("GET",ur l,t r ue );
//pour l e s r e que t e s XML
r eq.s et Request Header ("Accept","a p p l i c a t i o n/xml");
r eq.send ( nul l );
g
g
13/26
Exemples de code
Gestion de l'etat - XML
f unc t i on st at eChange ( e l t )
f//e l t:el ement XML du document
i f ( r eq.r eadySt at e == 4) f//READY
STATE
COMPLETE
i f ( r eq.responseXML!= nul l ) f
var docXML= r eq.responseXML;
g e l s e f
var docXML= r eq.r es pons eText;
docXML=par s eFr omSt r i ng (docXML );
g
var docXMLresul t = trai teXML (docXML );
var s t r = (new XMLSer i al i zer ( ) ).s e r i a l i z e To St r i n g ( docXMLresul t );
document.getEl ementByI d ( e l t ).innerHTML += s t r;
g
g
14/26
Exemples de code
Transformation XSLT
//Apres chargement asynchr one des documents XML et XSLT
f unc t i on t r ans f or m XSLT (XMLDoc,XSLDoc,i d )
f
i f (XMLDoc == nul l j j XSLDoc == nul l ) fr et ur n;g
t r y f
//I nt e r ne t Expl or e r
i f ( window.Act i veXObj ect )
f
var t ar ge t = document.getEl ementByI d ( i d );
t ar ge t.innerHTML = xml.tr ansf or mNode ( x s l );
g e l s e i f ( window.XSLTProcessor ) f//Sa f a r i/Moz i l l a
var f r agment;
var x s l t Pr o c e s s o r = new XSLTProcessor ( );
x s l t Pr o c e s s o r.i mpor t St y l e s he e t ( x s l );
f r agment = x s l t Pr o c e s s o r.transf ormToFragment ( xml,document );
var t ar ge t = document.getEl ementByI d ( i d );
t ar ge t.appendChi l d ( f r agment );
g
g catch ( e ) f
r et ur n e;
g
g
15/26
Proprietes de l'objet XMLHttpRequest
Status
Renvoie l'etat de la requ^ete
200:OK,page trouvee
404:page non trouvee
onreadystatechange
Association d'une fonction recevant et traitant les donnees
retournees par le serveur apres une requ^ete
Utilisation d'un pointeur de fonction
16/26
Proprietes de l'objet XMLHttpRequest
readyState
Gestion de l'etat de la reponse du serveur
A chaque changement d'etat,la fonction associee a
onreadystatechange est executee
Valeurs possibles:
Etat
Description
0
Requ^ete non initialisee
1
Connexion etablie
2
Requ^ete recue
3
Reponse en cours/Traitement de la requ^ete en cours
4
Reponse envoyee/Termine
17/26
Proprietes de l'objet XMLHttpRequest
responseXML
Retourne un objet DOM du XML renvoye par le serveur
responseText
Retourne une cha^ne de caracteres contenant les donnees
chargees
A utiliser si on ne souhaite pas traiter les donnees en
Javascript mais uniquement les acher (par exemple,donnees
HTML)
18/26
Methode de l'objet XMLHttpRequest
Utilisation de 2 methodes pour l'envoi
open() { preparation de la requ^ete
3 arguments:
1
Methode utilisee pour l'envoi de la requ^ete (GET ou POST)
2
URL du script cote server
3
booleen indiquant si la requ^ete doit ^etre envoyee de maniere
asynchrone ou non
send() { envoie de la requ^ete au serveur
1 argument:
1
donnees a passer au script cote serveur
methode GET:null
methode POST:variable ou cha^ne de caracteres
19/26
JavaScript Object Notation (JSON)
Format alternatif a XML
Natif en Javascript
Permet l'echange de donnees entre client et serveur sans
analyse (contrairement au XML).
JSON vs.XML:
JSON:facilite de lecture et simplicite de mise en oeuvre
XML:extensible et reconnu dans tous les langages de
programmation
20/26
Syntaxe
Elements:
Objet:contient des
objets sous forme d'une liste de membres
{ nommembre1:valmembre1,nommembre2:valmembre2,...}
tableaux sous forme d'une liste de valeurs
[ valeur1,valeur2,...]
Variable scalaire de type Number,String ou Boolean
Tableaux [ valeur1,valeur2,...] (valeur:objet,
tableau,etc.)
Valeurs litterales:null,false,true,valeur numerique,
cha^ne de caracteres (entre")
Membre:
"nom":"valeur"
21/26
Exemple de chier JSON
f
"menu":"Fi c h i e r",
"commandes":[
f
"t i t l e":"Nouveau",
"ac t i on":"CreateDoc"
g,
f
"t i t l e":"Ouvr i r",
"ac t i on":"OpenDoc"
g,
f
"t i t l e":"Fermer",
"ac t i on":"Cl oseDoc"
g
]
g
<?xml ver s i on="1.0"?>
<r oot>
<menu>Fi c h i e r</menu>
<commands>
<i tem>
<t i t l e>Nouveau</val ue>
<ac t i on>CreateDoc</ac t i on>
</i tem>
<i tem>
<t i t l e>Ouvr i r</val ue>
<ac t i on>OpenDoc</ac t i on>
</i tem>
<i tem>
<t i t l e>Fermer</val ue>
<ac t i on>Cl oseDoc</ac t i on>
</i tem>
</commands>
</r oot>
22/26
Utilisation d'un chier JSON
cote client
Recuperation des donnees avec la methode eval() et utilisation
d'elements et de la syntaxe Javascript:
r eq.open ("GET","f i c h i e r.j s on",t r ue );//r equ^et e
var doc = e v al ('('+ r eq.r es pons eText +')');//r e c upe r at i on
var nomMenu = document.getEl ementByI d ('j smenu');//r echer che
nomMenu.val ue = doc.menu.val ue;//a s s i g na t i o n
doc.commands [ 0 ].t i t l e//l e c t u r e de l a v a l e ur"t i t l e"dans l e t abl eau
doc.commands [ 0 ].ac t i on//l e c t u r e de l a v a l e ur"ac t i on"dans l e t abl eau
Fichier fichier.json:
f"menu":"Fi c h i e r",
"commandes":[
f"t i t l e":"Nouveau",
"ac t i on":"CreateDoc"
g,
f"t i t l e":"Ouvr i r",
"ac t i on":"OpenDoc"
g,
f"t i t l e":"Fermer",
"ac t i on":"Cl oseDoc"
g
]
g
23/26
Utilisation d'un chier JSON
cote serveur
Utilisation de librairie propres a chaque langage (voir
json.org):
Java:org.json.*
Perl:JSON
PHP:(interne en 5.2),json
etc.
24/26
Avantages et inconvenients d'AJAX
Avantages:
plus interactivite au niveau du client
reponse plus rapide
reduction des transactions client/serveur (recuperation des
scripts et des feuilles de style une fois pour toute)
separation des methodes pour la transmission de l'information
et des formats utilises pour representer les informations
Inconvenients:
Pas d'enregistrement dans l'historique du navigateur des pages
modiees dynamiquement
Solution en modiant la partie ancre (#) de l'URL
Diculte a bookmarker l'etat particulier d'une page
Pas d'indexation possible des pages par les moteurs de
recherche
Si un navigateur ne supporte pas Javascript et AJAX,la page
est inutilisable
25/26
Alternatives
Flex et Flash:concurrents de AJAX
Mais possibilite de combiner leur utilisation
voir Goowy http://www.goowy.com/(Bureau virtuel)
YAML (YAML Ain't Markup Language):format d'echange
base sur l'utlisation de caracteres speciaux:
:&!?- --- [ ] *,etc.
Fichier JSON:contenu YAML valide (et non l'inverse),sauf
les commentaires
Format YAML moins lisible que JSON (?)
26/26
Pour aller plus loin
Description d'AJAX:
https://developer.mozilla.org/fr/AJAX
Exemples et tutoriels du W3C:
http://www.w3schools.com/Ajax/ajax_examples.asp
Frameworks:voir http://www.ajaxprojects.com/
openAjax (IBM):Dojo
Ruby/Ruby on Rails (RoR)
Plugins Eclipse:Rich Ajax Platform,Direct Web Remoting
PHP:http://ajaxpatterns.org/PHP_Ajax_Frameworks
Bibliotheques:
SAJAX
Google Web Toolkit (AJAXSLT...)
Article de Jesse James Garrett introduisant AJAX:
http://www.adaptivepath.com/ideas/essays/archives/000385.php
27/26