Introduction à AJAX. Isabelle Mougenot May 13, LIRMM Université Montpellier 2

Dimension: px

Commencer à balayer dès la page:

Download "Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2"

Lucie Grégoire
il y a 8 ans
Total affichages :

1 LIRMM Université Montpellier 2 May 13, 2009

2 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications réussies comme GMail ou Flickr simplifier l interaction entre l usager (et son client) et le serveur Web en envoyant notamment de l information au serveur de manière transparente ou encore en s affranchissant du rafraîchissement de la page Web

simplifier l interaction entre l usager (et son client) et le serveur Web en envoyant notamment de l

3 Synchone vs Asynchrone Vision "classique" Requete Serveur Web Reponse Page Web Nouvelle Page Web Vision "ajax" Page Web Requete 1 / Reponse 1 Requete 2 / Reponse 2 Requete 3 / Reponse 3 Serveur Web

4 Objet XMLHttpRequest la requête faite au serveur s exprime au travers d un objet XMLHttpRequest (un controle ActiveX pour ce qui concerne Microsoft IE et un objet JavaScript pour ce qui concerne Firefox ou Safari)

controle ActiveX pour ce qui concerne Microsoft IE et

5 Objet XMLHttpRequest la requête faite au serveur s exprime au travers d un objet XMLHttpRequest (un controle ActiveX pour ce qui concerne Microsoft IE et un objet JavaScript pour ce qui concerne Firefox ou Safari) 2 1 objet XHR evenement Client 7 Application Web function callback() {do something} 3 6 Serveur Conteneur Web ressource 4 5 source de donnees

JavaScript pour ce qui concerne Firefox ou Safari) 2 1 objet XHR evenement Client 7

6 Les méthodes de l objet XMLHttpRequest abort() : stoppe la requête et réinitialise la valeur de readystate à 0 getallresponseheaders() : retourne une chaîne de caractères contenant toutes les en-têtes de réponse getresponseheader(headerfield) : retourne la valeur d un champ d en-tête open(requestmethod, url, asynchronousflag, username, password) : prépare l envoi de la requête, seuls les deux premiers arguments sont obligatoires send(bodycontent) : envoie le corps du message (éventuellement nul par exemple lors de l exploitation de la méthode GET) setrequestheader(headerfield, headervalue) : ajoute une paire champ/valeur à l en-tête lors de l envoi de la requête

username, password) : prépare l envoi de la requête, seuls les deux premiers arguments sont obligatoires send(bodycontent) : envoie le corps du message (éventuellement

7 Les propriétés de l objet XMLHttpRequest onreadystatechange : notifie de l état de la requête et de ses évènements (associée à une fonction de traitement) readystate : état de l objet XHR au cours de la requête (0 : non initialisé, 1 : données en cours de transmission, 2 : données transmises, 3 : données partiellement accessibles, 4 : complétude de la réponse ) responsetext : réponse du serveur sous format chaîne de caractères responsexml : réponse du serveur sous format XML status : code de la réponse HTTP reçue depuis le serveur statustext : libellé du code de la réponse HTTP reçue depuis le serveur

3 : données partiellement accessibles, 4 : complétude de la réponse ) responsetext : réponse du serveur sous format chaîne de caractères responsexml :

8 Exemple de base : afficher un message d alerte

9 Exemple de base : afficher un message d alerte <html><head><title> Un </title> <script> function test() { var xmlhttp = null; if(window.xmlhttprequest) // Client Firefox xmlhttp = new XMLHttpRequest(); else if(window.activexobject) // Client IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("objets XMLHTTPRequest non supportes"); return; } // location.href : page consideree xmlhttp.open("get", location.href, false); xmlhttp.send(null); if(xmlhttp.readystate == 4) alert("fin de l action!"); } </script></head><body> <div><input type="button" value="clic Test" onclick="test()" /></div> </body></html>

XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("objets XMLHTTPRequest non supportes"); return; } // location.href : page consideree xmlhttp.

10 Exemple faisant appel au DOM et à son exploitation JavaScript

11 Exemple faisant appel au DOM et à son exploitation JavaScript <script type="text/javascript"> var xmlhttp = new XMLHttpRequest(); function makerequest(serverpage, objid) { var obj = document.getelementbyid(objid); xmlhttp.open("get", serverpage); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { obj.innerhtml = xmlhttp.responsetext;}} xmlhttp.send(null);} </script> <body onload="makerequest ( content.html, hw ); return false;"> <div align="center"> <h1>dhtml Dynamic HTML </h1> <a href="content1.html" onclick="makerequest( content1.html, hw ); return false;">page 1</a>... <a href="content3.html" onclick="makerequest( content3.html, hw ); return false;">page 3</a> <div id="hw"></div> </div></body></html>

responsetext;}} xmlhttp.send(null);} </script> <body onload="makerequest ( content.html, hw ); return false;"> <div align="center"> <h1>dhtml Dynamic HTML </h1> <a href="content1.

12 Capture écran de l exemple

13 Extension JavaScript à l exemple précédent

14 Extension JavaScript à l exemple précédent <html> <head> <script type="text/javascript"> function changetexte() { document.getelementbyid( e1 ).innerhtml= La Fac des Sciences ; } </script> </head> <body> <p> Bienvenue sur le site de <b id= e1 > l UFR </b></p> <input type="button" onclick="changetexte()" value="changer Texte"/> </body> </html>

innerhtml= La Fac des Sciences ; } </script> </head> <body> <p> Bienvenue sur le site

15 Transmettre des données au serveur (exemple méthode GET) : page Web

16 Transmettre des données au serveur (exemple méthode GET) : page Web <script type="text/javascript"> function exemple3(){ var xmlhttp =new XMLHttpRequest(); var reponse = document.getelementbyid( rep ); var t1a = document.getelementbyid("t1").value; var url = "script3.php?"; var data = "t1="+t1a; url +=data; xmlhttp.open("get",url,true); xmlhttp.onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) {reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.send(null);} </script></head><body> <input type= text id= t1 name= t1 /> <input type= button name= b1 value= clic onclick="exemple3(); return false;"> <div id= rep ></div></body></html>

open("get",url,true); xmlhttp.onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) {reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.

17 Transmettre des données au serveur (exemple méthode GET) : script PHP

18 Transmettre des données au serveur (exemple méthode GET) : script PHP <? echo "<BR>"; echo $_GET["t1"]; echo " a pour chaine inverse ".strrev($_get["t1"]);?>

19 Transmettre des données au serveur (exemple méthode POST) : page Web

20 Transmettre des données au serveur (exemple méthode POST) : page Web <script type="text/javascript"> function exemple4(){ var xmlhttp =new XMLHttpRequest(); var reponse = document.getelementbyid( rep ); var t1a = document.getelementbyid("t1").value; var url = "script4.php?"; var data = "t1="+t1a; xmlhttp.open("post",url,true); xmlhttp.onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) {reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded"); xmlhttp.send(data);} </script></head><body> <input type= text id= t1 name= t1 onblur="exemple4(); return false;"/> <div id= rep ></div></body></html>

onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) {reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.

21 Transmettre des données au serveur (exemple méthode POST) : script PHP

22 Transmettre des données au serveur (exemple méthode POST) : script PHP <? echo "<BR>"; echo $_POST["t1"]; echo " a pour chaine inverse ".strrev($_post["t1"]);?>

23 Interagir avec une base de données MySQL : page Web

24 Interagir avec une base de données MySQL : page Web <html><head> <script type="text/javascript"> function exemple5(){ var xmlhttp =new XMLHttpRequest(); var reponse = document.getelementbyid( rep ); var especea = document.getelementbyid("espece").value; var url = "exemple5.php?"; var data = "espece="+especea; url +=data; xmlhttp.open("get",url,true); xmlhttp.onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) {reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.send(null);} </script></head><body> <input type= text id= espece name= espece value="bos taurus"/> <input type= button name= b1 value= clic onclick="exemple5(); return false;"> <div id= rep ></div></body></html>

25 Interagir avec une base de données MySQL : script PHP

26 Interagir avec une base de données MySQL : script PHP <? $mysql_db "***", $query = "SELECT nom from animal where espece = " ".$_GET["espece"]." "; $result while($r = mysql_fetch_array($result)) echo

27 Interagir avec une base de données MySQL : même exemple avec liste à choix

28 Interagir avec une base de données MySQL : même exemple avec liste à choix function exemple7(){ var xmlhttp;=new XMLHttpRequest(); var reponse = document.getelementbyid( rep ); var selectesp = document.getelementbyid( espece ); var selectedespece = selectesp.options[selectesp.selectedindex].value; var url = "exemple5.php?"; var data = "espece="+selectedespece; url +=data; xmlhttp.open("get",url,true); xmlhttp.onreadystatechange=function() {if(xmlhttp.readystate==4 && xmlhttp.status==200) { reponse.innerhtml = xmlhttp.responsetext;}} xmlhttp.send(null);} </script></head><body> <select id="espece" onchange="exemple7()"> <option value="bos taurus">bos taurus</option> <option value="felix cattus">felis cattus</option> <option value="mus musculus">mus musculus</option> </select> <div id= rep ></div></body></html>

29 Traiter un document XML

30 Traiter un document XML Généralités function submitform() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ document.ajax.dyn.value="wait server..."; if(xmlhttp.readystate == 4) {if(xmlhttp.status == 200){ var doc = xmlhttp.responsexml; var element = doc.getelementsbytagname( root ).item(0); document.ajax.dyn.value= element.firstchild.data;} else {document.ajax.dyn.value="error: returned status code " + xmlhttp.status + " " + xmlhttp.statustext;}}}; xmlhttp.open("get", "exemple8-xml.xml", true); xmlhttp.send(null); } </script><title>exemple : traiter un fichier XML </title></head> <body><p><font size="+3">exemple : traiter un fichier XML </font></p><hr <form name="ajax"><p> <INPUT type="button" value="clic " onclick="submitform()"></p> <p>reponse : <input type="text" name="dyn" size="32" value=""></p> </form></body></html>

31 Traiter un document XML : le document XML

32 Traiter un document XML : le document XML <?xml version="1.0"?> <root> Le contenu qui s affiche! </root>

Documents pareils

DOM - Document Object Model

DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et