4/page

Plan
Ajax
Architecture des Applications Réticulaires
Id : cours5.bk 75 2010-01-10 20 :35 :25Z queinnec
1
Ajax
Historique
Exemples
JSON
Sécurité
2
Produits Ajax
JQuery
Couplage
3
Conclusions
Christian Queinnec
Université Paris 6
Deuxième vague 2010-2011
c C.Queinnec
UPMC NI584-2010nov
Ajax
2/21
Ajax
Historique
DOM et CSS
À la fois l’arbre XHTML et la feuille de style sont réifiés dans des
structures de données inspectables et modifiables.
Moteur incrémentiel de réaffichage de cet arbre (cf. FireBug,
CSSedit)
Interface DOM :
AJAX (Asynchronous Javascript And XML) est à la confluence de
plusieurs effets :
Interprètes côté client : Javascript (JScript, EcmaScript),
ActionScript (Flash)
DOM et CSS
childNodes
Node
parentNode
séparation structure et apparence
présence d’analyseur syntaxique XML
réflexion et lien causal
NodeList
Réaction aux événements programmable
firstChild
Node
Node
Node
lastChild
XMLHttpRequest
previousSibling
nextSibling
La css n’est pas vraiment un arbre.
UPMC NI584-2010nov
c C.Queinnec
3/21
UPMC NI584-2010nov
c C.Queinnec
4/21
Ajax
Ajax
Manipulations DOM et CSS
Exemple : onglets (idTabs)
< ul class = " idTabs " >
< li > <a href = " # jquery " > jQuery </ a > </ li >
< li > <a href = " # klaus " > Klaus </ a > </ li >
</ ul >
< div id = " jquery " > If you haven ’t checked out ... </ div >
< div id =" klaus " > idTabs is not meant to replace ... </ div >
Greffe, retrait de tout noeud (et tout texte) dans le DOM
Modification de tout attribut dans le DOM (classe, id
notamment pour lien avec css, bgcolor etc.) mais aussi les
attributs onClick, mouseOver, etc.
Modification de la css (CSSedit)
UPMC NI584-2010nov
c C.Queinnec
5/21
UPMC NI584-2010nov
Ajax
c C.Queinnec
6/21
Ajax
Objet XMLHttpRequest
Qualités et défauts
Microsoft a introduit l’objet XMLHttpRequest qui permet, depuis le
client, d’effectuer une requête HTTP (vers le domaine d’où
provient la page).
Javascript permettait d’attacher des traitements à des actions de
l’utilisateur.
var req = window . ActiveXObject
Ajax permet d’impliquer le serveur dans ces réactions. Ainsi le
? new ActiveXObject (" Microsoft . XMLHTTP ")
client peut prendre l’initiative de requêtes et rafraı̂chir
: new XMLHttpRequest ();
partiellement des pages (Google Suggest, Google Mail) avec, par
req . setRequestHeader (" X - Requested - With " , " XMLHttpRequest ");
exemple, des portlets (petits) programmes assemblables dans un
req . setRequestHeader (" Accept " , "*/*");
portail comme par exemple, NetVibes, Google HomePage, etc.
req . on re ad ys tatec ha ng e = function ( isTimeout ) {
Mais
if ( httpRequest . readyState == 4) { // reponse OK
if ( httpRequest . status == 200) {
httpRequest . responseText
// -> String
httpRequest . responseXML
// -> DOM
} } }
req . open ( ’ GET ’ , ’ http :// www . example . org / some . file ’ ,
isAsync );
req . send ();
UPMC NI584-2010nov
c C.Queinnec
7/21
Requêtes plus petites mais plus nombreuses côté serveur
Boutons Previous et Next délicats
Site non arpentable donc non indexable (cf. mod_proxy)
UPMC NI584-2010nov
c C.Queinnec
8/21
Ajax
Ajax
Exemple : complétion automatique
Graphe d’état : complétion automatique
serveur
ab...
a...
a
a−
a+
b
ab−
ab+
clavier
Chaque lettre saisie envoie une requête au serveur, la réponse
provoque un affichage des mots ayant ce préfixe. La réaction est à
la vitesse du réseau (100 à 300 millisecondes).
Nota : x- est l’état où le clavier a reçu x et où la requête
demandant les mots préfixés par x a été émise. x+ représente
l’état où la réponse à cette requête a été reçue.
c C.Queinnec
UPMC NI584-2010nov
9/21
UPMC NI584-2010nov
Ajax
Ordonnancement
10/21
Codage JSON
Au début les réponses convoyaient du XML que l’on pouvait (par
exemple) greffer dans le DOM. JSON est un format plus compact
et plus adapté à JavaScript : c’est le sous-ensemble de définition
de données de JavaScript.
Non instantanéité des transitions ! On peut aussi observer :
serveur
ab...
a...
tableau d’objets entre crochets carrés
a
a−
clavier
a+
ab−
ab+
table associative entre accolades et clés suffixées par deux
points
b
nombres, booléens, chaı̂nes
Il faut donc ordonner les requêtes et leurs réponses ! Ce qui
complique les fonctions de retour (callback) qui doivent alors
passer par un ordonnanceur.
Ne pas oublier que ce sont des requêtes HTTP et qu’il faut donc
considérer les codes 200, 304, 307, etc.
UPMC NI584-2010nov
c C.Queinnec
Ajax
c C.Queinnec
[ { a : 1 , foo : [ -1e -23 , 2.0 , true ] } ,
" et meme \ nUnicode \ uABCD !" ]
Il serait dangereux d’appliquer eval sur ce code d’où l’emploi
d’analyseurs syntaxiques spécialisés (en tout langage : Perl, Java,
C#, C, Scheme, etc.)
11/21
UPMC NI584-2010nov
c C.Queinnec
12/21
Ajax
Produits Ajax
Sécurité
Produits Ajax
Une grande restriction est que l’on ne peut envoyer de requêtes
qu’au site d’où la page provient (ce qui gêne les sites de mashup).
Deux types de contournement :
Côté client : de nombreuses bibliothèques telles que
Prototype, Dojo, script.aculo.us, Yahoo user interface library
(yui), jQuery, etc.
greffer dynamiquement dans le DOM un nœud
<script src=’’/> : une sorte de (très dangereuse) fonction
Interface uniforme masquant les singularités des navigateurs
(afterLoad notamment)
Animations (effets, menu accordéon, etc.)
Support de widgets UI élaborés (complétion automatique)
Fonction de confort, navigation dans DOM : notation $()
eval
Voir aussi JSOD (JavaScript On Demand) ou l’usage de petits
<iframe...> indépendants
côté serveur : Xajax (PHP), CGI : :Ajax
établir des (coûteux pour le serveur) relais (proxys) sur le site
originel
UPMC NI584-2010nov
c C.Queinnec
13/21
UPMC NI584-2010nov
Produits Ajax
c C.Queinnec
14/21
Produits Ajax
Javascript – JQuery
Javascript – JQuery : exemples
15ko compressés (après miniaturisation (pour minified))
$ (" div > p ")
. filter ( function ( i ) ...)
. each ( function ( i ) this . html ( ’ <b > Coucou </ b > ’));
Recherche, filtrage, opérations sur collections de nœuds DOM
(dans un style fonctionnel)
$ ( ’# id ’). attr ( ’ title ’ , " $ { this . src }");
Mécanismes de quasi héritage (JS est un langage à prototype)
$ ( document . body ). bind (" click " , function () {
alert ( $ ( this ). text () ) });
Encapsulation d’envoi/traitement de requêtes asynchrones
Bibliothèque d’effets visuels et greffons
$ (" p . surprise "). addClass (" ohmy "). show (" slow ");
$ ( function () { alert (" Fini !"); });
UPMC NI584-2010nov
c C.Queinnec
15/21
UPMC NI584-2010nov
c C.Queinnec
16/21
Produits Ajax
Produits Ajax
Couplage
Perl – CGI : :Ajax
use CGI ;
use CGI :: Ajax ;
my $cgi = new CGI ;
my $pjx = new CGI :: Ajax ();
$pjx - > register ( ’ JSFUNC ’ = > \& perl_func );
Faciliter l’invocation de fonctions du serveur à partir du client
sans avoir à écrire soi-même son XMLRPC ou autre
# Dans la page HTML , se trouvent des balises div avec les
#
onClick =" JSFUNC ([ ’ source1 ’,’ source2 ’] ,
#
[ ’ dest1 ’, jsfunc2 ]);"
# et la fonction jsfunc2 ( a la jsod )
Une fonction jsfunc en Javascript doit transmettre de l’information
vers une fonction servfun du serveur (dans un quelconque langage
de programmation) puis récupérer et traiter le résultat XML,
JSON, texte (cf. cours 2 sur les services).
print $pjx - > build_html ( $cgi , \& Show_HTML );
sub perl_func {
my ( $input1 , $input2 ) = @_ ;
return ( " Ah $input2 ? " , " Oh $input1 ! " );
}
UPMC NI584-2010nov
c C.Queinnec
17/21
UPMC NI584-2010nov
Produits Ajax
c C.Queinnec
18/21
Produits Ajax
Java
sub Show_HTML {
my $html = << EOHTML ;
< HTML > < HEAD > < script >
function jsfunc2 () { ... }
Javascript caché derrière les UI (côté client) notamment pour
</ script > </ HEAD >
< BODY >
validation (partielle bien sûr !)
Enter something :
tri locaux
< input type = " text " name = " val1 " id = " s1 "
onkeyup = " JSFUNC ([ ’ s1 ’,’ s1 ’] , [ ’ dest1 ’, jsfunc2 ]); " >
onglets
<br >
animations (glissez-deposez, menu accordéon, etc.)
< div id = " dest1 " > </ div >
</ BODY >
Cf. les bibliothèques de composants JSF notamment mais aussi
</ HTML >
XULrunner, Silverlight, . . .
EOHTML
return $html ;
}
UPMC NI584-2010nov
c C.Queinnec
19/21
UPMC NI584-2010nov
c C.Queinnec
20/21
Conclusions
Conclusions
Jusqu’où ira-t-on ?
de plus en plus d’Ajax côté client
le navigateur : nouveau bureau (Desktop application) ou RIA
(Rich Internet Application)
Liens additionnels : YSlow (minification, compression, place dans
la page)
UPMC NI584-2010nov
c C.Queinnec
21/21