1/35 UPMC Paris Universitas Programmation des interactions et interfaces homme machine Cours 11 - Interaction : AJAX Carlos Agon - Choun Tong LIEU 8 avril 2016
2/35 Introduction à Javascript Un langage de script 1 Différent de Java!, emprunte en fait a Scheme et a C. 2 Tourne dans une machine virtuelle embarquée dans les navigateurs. 3 Permet d altérer le document affiché. 4 C est un Langage Objet! (Avec un modele assez particulier... ) 5 AJAX.
3/35 Inclusion dans le code html < script language =" Javascript " > <! code ici > </ script > Permet d envoyer le script en même temps que la page. Permet aussi de cacher le code si on utilise un browser non équipé d une VM Javascript.
4/35 Exemple 1 <html > <head > <title >An Ajax example </ title > </head > <body > < script language = " javascript " > document. write (" Hello IHM ") </ script > </body > </html >
5/35 Syntaxe Proche du C. Une expression se fini par ; une variable se declare avec le mot clef var. Il est possible d affecter une variable non déclarée! Une variable non initialisée ne peut etre utilisée! opérateurs usuels pour l arithmétique (entière et flottante) Sur les strings + est un opérateur de concatenation. Si on ajoute un nombre à un string le nombre est converti en string. Operateur de comparaison usuels pour les nombres. if (5=="5") document.write("ok"") ; === est l operateur de comparaison structurel (valeur et type) operateurs logiques &&!
6/35 Exemple 2 <html > <head > <title >An Ajax example </ title > </head > <body > <script language = " javascript " > var d = new Date ( ) var time = d. gethours ( ) if ( time <10) { document. write ( " <b>bon. petit dej </b>" ); else if ( time >10 && time <16) { document. write ( " <b>bon. dejeuner </b>" ); else { document. write ( " <b>bon. diner </b>" ); </ script > </body > </html >
7/35 Boucles for(init ; cond ; incr) while for (variable in object) <html > <head > <title > An Ajax example </ title > </head > <body > < script language = " javascript " > var i = 0; for (i =0; i <=15; i ++) { document. write ( " The number is : " + i); document. write ( " <br/>" ) ; </ script > </body > </html >
8/35 Exceptions Un Bloc try... catch instruction throw valeur <html > <body > <script type =" text / javascript "> var x= prompt ( " Enter a number between 0 and 10: ", "" ) ; try { if (x >10) { throw " Err1 " ; else if (x <0) { throw " Err2 " ; else if ( isnan (x) ) { throw " Err3 " ; catch (er ) { if ( er ==" Err1 ") { alert (" Error! The value is too high " ) ; if ( er ==" Err2 ") { alert (" Error! The value is too low " ) ; if ( er ==" Err3 ") { alert (" Error! The value is not a number " ) ; </ script > </body > </html >
9/35 GUI Exemple <html > <head > <title > Exemple d un Bouton </ title > <script language = " javascript "> function attentiongetter () { alert (" Hello, j ai change le texte aussi " ) var target = document. getelementbyid (" targetdiv "); target. innerhtml = " Ceci est un texte nouveau " </ script > </head > <body > <H1 >Clic dans un bouton </ H1 > <form > <input type = " button " value = " Click me" onclick = " attentiongetter ()" > </form > <div id=" targetdiv " > <p>je suis un vieux texte </p> </div > </body > </html >
10/35 Le Document Object Model Séparation du fond (le DOM) de la forme (la CSS) le DOM est le modèle objet du document HTML. On peut y rajouter/enlever/modifier des noeuds. Les noeud peuvent être nommés et parcourus en fonction de leur nature. Le document complet est vu comme un arbre. Tous les éléments sont des noeuds avec des relations. Possibilité de cycler entre les noeuds. Référencement possible par Id, Tag, ou par relations. Tout text est mis dans un noeud de Type Text. Le noeud racine est le noeud <html>.
11/35 Le Document Object Model (exemple) DocumentBuilderFactory.newInstance() dbf:documentbuilderfactory Node.DOCUMENT_NODE d.getnodetype() d:document dbf.newdocumentbuilder() db.parse(f) db:documentbuilder d.getdocumentelement() n:node n.gettagname() f:file new File("f.xml") n0.getparentnode() "programme1" n.getchildnodes() Fichier XML nl:nodelist nl.item(0) nl.item(2) nl.item(1) n0:node n1:node n2:node
12/35 DOM Exemple <script language =" javascript "> function toto () { var i = 0; var stock = document. body. childnodes. length ; var para = document. createelement ("P"); para. innerhtml = "<p>j ai trouve comme fils : <p>"; document. body. appendchild ( para ); for (i =0; i< stock ; i ++) { var para1 = document. createelement ("P" + i); para1. innerhtml = "<p>" + document. body. childnodes [ i ]. nodename "<p>"; document. body. appendchild ( para1 ); </ script > <body > <p> Ceci est le premier paragraphe </p> <p>ceci est le second </p> <h1 > Un titre en gros </h1 > <script language =" Javascript "> toto (); </ script >
13/35 AJAX Mécanisme par lequel un client peut faire une requête au serveur. Asynchronous JAvascript and Xml. Le but c est que ses applications WEB ressemblent aux applications sur desktop.
14/35 Interface CGI (Common Gateway Interface) : rappel sur les pages dynamiques Côté du serveur : lance un programme sur le serveur programme écrit dans n importe quel langage pouvant récupérer des informations transmises par le client l affichage de ce programme (sortie standard) est envoyé sur le client : l affichage doit respecter le protocole HTTP
15/35 Formulaires Côté du client : ensemble de balises HTML pour la saisie d informations Champs de texte, boutons radio, liste de choix et une balise pour l envoi de ces informations (submit) envoi des informations par une requête HTTP : GET : les informations sont visibles dans l URL la commande CGI les récupère dans une variable d environnement (QUERY_STRING) POST : les informations sont envoyées sur plusieurs lignes, la commande CGI les lit sur l entrée standard en connaissant la longueur des données (CONTENT_LENGTH).
16/35 Appel à une page HTML <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ index. html "> Nom : <input type =" text " name =" Nom "> <br > Prenom : < input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >
17/35 Appel à une commande Shell <html > <head > <title >de la Puce au Web </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ cgi - bin / ex0. cgi "> Nom : <input type =" text " name =" Nom "> <br > Prenom : <input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >
18/35 Environnement de calcul d une commande variables d environnement pour un CGI : comme dans un shell nécessite que le programme de la commande CGI puisse avoir accès aux variables d environnements. bibliothèques fournies pour chaque langage : shell, Java, OCaml, Ada, Perl,...
19/35 Un exemple avec GET <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ cgi - bin /ex1 - get. cgi "> Nom : <input type =" text " name =" Nom "> <br > Prenom : < input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >
20/35 Un exemple avec POST action =" http :// localhost :12345/ cgi - bin /ex1 - post. cg <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" POST " Nom : <input type =" text " name =" Nom "> <br > Prenom : <input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >
21/35 Retour à AJAX L idée est de changer la page web en cherchant des données dans Internet sans recharger la page dans le browser. Mais surtout de manière asynchrone. Le but c est que les applications WEB avec AJAX ressemblent aux applications sur desktop. L échange des données dans une page avec AJAX est invisible pour l utilisateur. Javascript ouvre une connection à un serveur et charge les données (pas forcement en format XML)
22/35 Un exemple
22/35 Un exemple L échange des données est fait via le XMLHttpRequest object. L objet XMLHttpRequest doit être gardé dans une variable XMLHttpRequestObject. Si le browser est Netscape Navigator, Apple Safari, Firefox, etc. on peut créer l objet avec : XMLHttpRequestObject = new XMLHttpRequest (); Si le browser est Internet Explorer, on peut créer l objet avec : \ footnotesize XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); Alors de manière générale on a : var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP ");
23/35 XMLHttpRequest configuration Pour ouvrir et configurer l objet XMLHttpRequest on utilise l instruction : open (" method ", " URL "[, asyncflag [, " username "[, " password " ]]]) avec method "GET", "POST",... URL la ressource. asyncflag un boolean indiquant si l appel est asynchrone ou non (la valeur par défaut est true). username optionnel. password optionnel. XMLHttpRequestObject. open (" GET ", datafile. txt );
24/35 Reception des données A la reception des donn des on utilise une fonction de rappel ou callback. XMLHttpRequestObject. onreadystatechange = callback () function callback () {... avec On peut aussi utiliser des fonctions anonymes : XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;
25/35 Propriétés readystate et status Dans la fonction de rappel ion doit verifier si les données ont été bien chargées et s elles sont disponible pour leur utilisation. La propriété readystate : nous dit où on est avec le chargement. 0 : request not initialized 1 : server connection established 2 : request received 3 : processing request 4 : request finished and response is ready XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;
26/35 Propriété status La propriété status informe sur la donnée chargée. 200 OK 201 Created 204 No Content 205 Reset Content 206 Partial Content 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 411 Length Required 413 Requested Entity Too Large 414 Requested URL Too Long 415 Unsupported Media Type 505 HTTP Version Not Supported XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;
27/35 Envoie et réception de la requête Pour envoyer la requête, on utilise l instruction : XMLHttpRequestObject. send ( null ); Et pour récupérer les données, on utilise : XMLHttpRequestObject. responsetext ; Pour notre exemple, on a : var obj = document. getelementbyid ( divid );... obj. innerhtml = XMLHttpRequestObject. responsetext ;
28/35 En résumé <head > <title >Un exemple Ajax </ title > < script language = " javascript " >... </ script > </head > <body > <H1 >Un exemple Ajax </H1 > <form > < input type = " button " value = " Charge un message " onclick = " getdata ( datafile. txt, targetdiv )"> </form > <div id=" targetdiv "> <p > Le message va apparaitre ici! </ p > </div > </body >
29/35 En résumé <script language = " javascript "> var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); function getdata ( datasource, divid ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open ("GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send ( null ); </ script >
30/35 Envoie de donnés au serveur avec GET function getdata ( datasource, divid ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open (" GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send ( null ); <form > <input type = " button " value = " Fetch message 1" onclick = " getdata ( dataresponder. cgi? data =1, targetdiv )" > <input type = " button " value = " Fetch message 2" onclick = " getdata ( dataresponder. cgi? data =2, targetdiv )" > </form >
31/35 Envoie de donnés au serveur avec POST function getdata ( datasource, divid, data ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open (" POST ", datasource ); XMLHttpRequestObject. setrequestheader ( Content - Type, application /x-www -form - urlencoded ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send (" data=" + data ); // avec & s il y a plusieurs <form > <input type = " button " value = " Fetch message 1" onclick = " getdata ( dataresponder. cgi, targetdiv, 1)" > <input type = " button " value = " Fetch message 2" onclick = " getdata ( dataresponder. cgi, targetdiv, 2)" > </form >
32/35 Evaluation dynamique du code JS function getdata ( datasource ) { if( XMLHttpRequestObject ) { XMLHttpRequestObject. open (" GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { eval ( XMLHttpRequestObject. responsetext ); function show () { var targetdiv = document. getelementbyid (" targetdiv "); targetdiv. innerhtml = " Yep, it worked!";
33/35 loading XML var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); XMLHttpRequestObject. overridemimetype (" text / xml "); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); var xmldocument = XMLHttpRequestObject. responsexml ; colors = xmldocument. getelementsbytagname (" color "); obj. innerhtml = " Here are the fetched colors : <ul >"; for ( loopindex =0; loopindex < colors. length ; loopindex ++) { obj. innerhtml += " <li >" + colors [ loopindex ]. firstchild. data + " </li >"; obj. innerhtml += " </ul >";
34/35 Array de XMLHttpRequest var XMLHttpRequestObjects = new Array (); function getdata1 ( datasource, divid ) { if ( window. XMLHttpRequest ) { XMLHttpRequestObjects. push ( new XMLHttpRequest ()); else if ( window. ActiveXObject ) { XMLHttpRequestObjects. push ( new ActiveXObject (" Microsoft. XMLHTTP " )); index = XMLHttpRequestObjects. length - 1; if( XMLHttpRequestObjects [ index ]) { XMLHttpRequestObjects [ index ]. open (" GET ", datasource ); var obj = document. getelementbyid ( divid ); XMLHttpRequestObjects [ index ]. onreadystatechange = function () { if ( XMLHttpRequestObjects [ index ]. readystate == 4 && XMLHttpRequestObjects [ index ]. status == 200) { obj. innerhtml = XMLHttpRequestObjects [ index ]. responsetext ; XMLHttpRequestObjects [ index ]. send ( null );
35/35 Références et sources Cours TER de Philippe Trebouchet Cours "de la puce au Web" d Emmanuel Chailloux Ajax : A Beginner s Guide Steven Holzner