4/page
Transcription
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