AJAX et l'objet XmlHttpRequest Sommaire I- Introduction II- Requêtes synchrones et asynchrones III- L'objet XmlHttpRequest - IV- Utilisation de l'objet V- Premier exemple - VI- Passer des paramètres au script PHP VII- Interroger une base de données VIII- Conclusion - P.1 P.2 P.2 P.3 P.4 P.6 P.10 P.16 I- Introduction L AJAX (Asynchronous Javascript And XML) et un concept permettant de faire des appels asynchrones au serveur depuis le client. Lors de ces appels, le serveur retournera du XML qui sera «récupéré» par javascript et traité. Ceci peut être utile lorsque l on veut exécuter un script PHP sans recharger la page en entière (pour par exemple interroger la base de données au fur et à mesure d une saisie dans une textbox). En effet, le langage JavaScript est exécuté du côté client et non serveur, c est là que tout se joue, pour exécuter un script PHP, le code JavaScript fera appel au script PHP, récupèrera les informations retournés par celui-ci et les affichera. Ce code sera exécuté du côté client, donc aucun rechargement de la page. Voici plusieurs possibilités de l AJAX : -Insérer données dans une base. -Listes déroulantes liées. -Contrôle de formulaire. -Modification du contenu de la page en cours -etc 1
II- Requêtes synchrones et asynchrones Avant de rentrer dans les détails, il faut savoir ce qu est une requête synchrone et asynchrone, ou du moins connaitre la différence entre les deux. Comme son nom l indique, AJAX permet d envoyer des requêtes asynchrones au serveur, mais il peut très bien envoyer des requêtes synchrones. Pour choisir entre les 2, c est le troisième paramètre de la méthode open() (voir chapitre 3- Utilisation de l objet) qui gère cela. Le mode asynchrone est surement celui qui est utilisé le plus souvent, en effet celui-ci permet de ne pas figer la page lorsque le script php s exécute et communique avec le serveur. Au contraire, le mode synchrone lui fige la page le temps que le script s exécute. Ce mode est donc réservé pour de petits scripts, qui ne mettront pas longtemps à s exécuter. En cas de doute, il vaut mieux utiliser l asynchrone. III- L'objet XmlHttpRequest AJAX utilise un composant embarqué dans maintenant la plupart des navigateurs Web. En fonction de ceux-ci, il peut y avoir un comportement varié, voir un résultat non voulu (inutile de rappeler que dans le développement Web, il faut vérifier que tout soit fonctionnel sur différent navigateur..). Pour utiliser AJAX, nous allons donc utiliser un objet XmlHttpRequest qui va nous permettre de faire des requêtes http pour échanger du XML avec le serveur. Code : //Création de l objet XmlHttpRequest var xhr = null; if(window.xmlhttprequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.activexobject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; 2
On peut constater que Internet Exporer se démarque des autres, en effet, celui-ci utilise ActivX, néanmoins aucun message de sécurité ne sera affiché pour ce genre de script. IV- Utilisation de l'objet Nous avons donc créé notre objet nommé xhr prêt à être utilisé, pour cela, nous avons à disposition différentes propriétés et méthodes : open(«methode», «url»,flag) Description : Ouvre la connexion avec le serveur. -Methode : «GET» ou «POST». -url : l url vers le script php en question (si methode GET, les paramètres doivent être fournis dans l url). -flag : true pour un dialogue asynchrone, sinon false. setrequestheader(«nom», «valeur») Description : Assigne une valeur à un header HTTP qui sera envoyé lors de la requête. Par exemple pour un POST : -nom : «Content-Type» -valeur : «application/x-www-form-urlencoded» send(«parametre») Description : Envoi la requête au serveur -parametre : null pour méthode GET -parametre : «nomparam1=valeurparam1&nomparam2=etc..» pour méthode POST abort() Description : Abandonne la requête onreadystatechange Description : Ici, on va lui affecter une fonction à nous qui sera exécutée à chaque changement d état de notre objet. readystate Description : C est cette propriété qui sera testé dans onreadystatechange. Elle représante l état de l objet : 0 : non initialisé. 1 : Ouverture (open() vien de s exécuter). 2 : Envoyé (send() vient de s exécuter). 3 : En cours (La requête est envoyée, en attente de la réponse du serveur). 4 : Prêt (toutes les données sont chargées). 3
status Description : C est le code de la réponse du serveur 200 : OK 404 : Page non trouvée Etc.. statustext Description : Message associé à status. responsetext Description : Réponse retournée par le serveur, au format texte. responsexml Description : Réponse retournée par le serveur, au format XML. V- Premier exemple Maintenant que nous avons vu les différentes méthodes et propriétés, un petit exemple s impose. Le but de cet exemple est basique : on clique sur un bouton, celui ci utilise AJAX pour exécuter un script PHP, le résultat est affiché sous forme d'alert(). La compréhension du code n'est pas très compliqué : index.html <html> <head> <title>tuto AJAX [DevBBS]</title> <script type='text/javascript'> /** * Construction de l objet */ function getxhr(){ var xhr = null; if(window.xmlhttprequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.activexobject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch (e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); 4
else { // XMLHttpRequest non supporté par le navigateur alert("votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; return xhr /** * Méthode qui sera appelée sur le click du bouton */ function go(){ var xhr = getxhr() // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readystate == 4 && xhr.status == 200){ alert(xhr.responsetext); xhr.open("get","ajax.php",true); xhr.send(null); </script> </head> <body> <input type='button' value='goo!!' onclick='go()' /> </body> </html> ajax.php : <?php echo "Appel de PHP reussi avec AJAX :D";?> Script PHP tout con mais cela montre bien que celui ci est exécuté sans rechargement de page. A noter qu il n y a pas besoin de recharger index.html après avoir modifié le script PHP. Celui-ci étant rappelé à chaque clique sur le bouton, il sera rafraichi. 5
VI- Passer des paramètres au script PHP Il est bien entendu possible de passer des paramètres au script PHP, afin que son exécution le rendre plus dynamique. On a vu les différentes méthodes et propriétés mis à notre disposition pour utiliser notre objet, vous avez peut être déjà compris comment on enverra nos paramètre. Pour une méthode GET : Pour passer des paramètre à la méthode GET, nous allons utiliser la méthode open(). Pour rappel : open(«methode», «url»,flag) Description : Ouvre la connexion avec le serveur. -Methode : «GET» ou «POST». -url : l url vers le script php en question (si methode GET, les paramètres doivent être fournis dans l url). -flag : true pour un dialogue asynchrone, sinon false. Le passage des paramètres se fait donc via l url (rien d extraordinaire je le sais ^^). Imaginons une textbox d id param. Pour envoyer le contenu de cette textbox nous procèderons come suit : Code : var param = document.getelementbyid("param").value; var url = "ajax.php?p="; xhr.open("get",url+param,true) ; xhr.send(null); Simple non? Voici la nouvelle function appel_ajax() : Code : function appel_ajax(){ var xhr = getxhr() // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readystate == 4 && xhr.status == 200){ //Ici sera afficher le résultat de notre script PHP ajax.php alert(xhr.responsetext); var param = document.getelementbyid("param").value; var url = "ajax.php?p="; 6
xhr.open("get",url+param,true) ; xhr.send(null); Il est aussi possible d ajouter un paramètre à la fonction appel_ajax(), par exemple : Code : function appel_ajax(param){ var xhr = getxhr() [ ] var url = "ajax.php?p="; xhr.open("get",url+param,true) ; xhr.send(null); Pour une méthode POST : Pour envoyer des paramètre avec la méthode POST c est la fonction send() qui nous intéresse : send(«parametre») Description : Envoi la requête au serveur -parametre : null pour méthode GET -parametre : «nomparam1=valeurparam1&nomparam2=etc..» pour méthode POST Rien de bien compliqué, il suffit de remplir le paramètre de la méthode send() par le(s) paramètre(s) voulu : Code : var param = document.getelementbyid("param").value; var url = "ajax.php"; xhr.open("post",url,true) ; xhr.setrequestheader('content-type','application/x-www-form-urlencoded'); xhr.send("param="+param); Attention toutefois à bien définir la propriété setrequestheader lorsque l on veut envoyer des paramètres par la méthode POST, c est la seul différence qu il y a avec la méthode GET. 7
Codes de ces exemples : index.html <html> <head> <title>tuto AJAX [DevBBS]</title> <script type='text/javascript'> /** * Construction de l objet */ function getxhr(){ var xhr = null; if(window.xmlhttprequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.activexobject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; return xhr /** * Méthode qui sera appelée sur le click du bouton */ function appel_ajax(){ var xhr = getxhr() // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readystate == 4 && xhr.status == 200){ //Ici sera afficher le résultat de notre script PHP ajax.php alert(xhr.responsetext); if(document.formmeth.methode[0].checked){//methode GET var param = document.getelementbyid("param").value; var url = "ajax.php?p="; xhr.open("get",url+param,true) ; xhr.send(null); if(document.formmeth.methode[1].checked){//methode POST 8
var param = document.getelementbyid("param").value; var url = "ajax.php"; xhr.open("post",url,true) ; xhr.setrequestheader('content-type','application/x-www-formurlencoded'); xhr.send("param="+param); </script> </head> <body> <form name="formmeth"> Choisissez une methode : <input type="radio" name="methode" id="meth" value="mget" checked>get</input><input type="radio" name="methode" id="meth" value="mpost">post</input></form><br> Paramètre : <input type="text" id="param"> <input type='button' value='envoyer la requête' onclick="appel_ajax()" /> </form> </body> </html> ajax.php <?php if(isset($_get["p"])){ echo "Appel de PHP reussi avec AJAX :D.\n"; if($_get["p"]!=null) echo "Param : ".$_GET["p"]." \n"; else echo "Pas de parametre\n"; echo "Methode : GET"; elseif(isset($_post["param"])){ echo "Appel de PHP reussi avec AJAX :D.\n"; if($_post["param"]!=null) echo "Param : ".$_POST["param"]." \n"; else echo "Pas de parametre\n"; echo "Methode : POST";?> 9
VII- Interroger une base de données Nous allons voir maintenant comment interroger une base de données grâce à AJAX, et donc sans recharger la page. Rien ne vaut un petit exemple pour bien comprendre. Créez une base de données nommée «ajaxdevbbs» et exécutez ce code SQL (ceci afin de créer et remplir les tables qui nous seront utiles pour l exemple) : Code : phpmyadmin SQL Dump version 2.10.1 http://www.phpmyadmin.net Serveur: localhost Généré le : Mer 01 Avril 2009 à 15:58 Version du serveur: 5.0.45 Version de PHP: 5.2.5 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; Base de données: `ajaxdevbbs` Structure de la table `doc` CREATE TABLE `doc` ( `id` int(2) NOT NULL auto_increment, `id_rub` int(2) NOT NULL, `doc` varchar(100) NOT NULL, `url` varchar(150) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ; Contenu de la table `doc` INSERT INTO `doc` (`id`, `id_rub`, `doc`, `url`) VALUES (1, 1, 'Du bon usage de la Piraterie.pdf', 'ftp://hackbbs.org/u.c.h- Publications/Du%20bon%20usage%20de%20la%20Piraterie.pdf'), (2, 1, 'L''Ethique Hacker.pdf', 'ftp://hackbbs.org/u.c.h- 10
Publications/L%27Ethique%20Hacker.pdf'), (3, 1, 'Le Chemin vers Hackerdom.pdf', 'ftp://hackbbs.org/u.c.h- Publications/Le%20Chemin%20vers%20Hackerdom.pdf'), (4, 1, 'Les Lois de Murphy.pdf', 'ftp://hackbbs.org/u.c.h- Publications/Les%20Lois%20de%20Murphy.pdf'), (5, 1, 'Libre comme dans Liberte.pdf', 'ftp://hackbbs.org/u.c.h- Publications/Libre%20comme%20dans%20Liberte.pdf'), (6, 1, 'Un Manifeste Hacker.pdf', 'ftp://hackbbs.org/u.c.h- Publications/Un%20Manifeste%20Hacker.pdf'), (7, 2, 'Cours Algorithmie et C BTS IRIS.rar', 'ftp://hackbbs.org/documentation%20c/cours%20algorithmie%20et%20c%20bts%20iris.rar'), (8, 2, 'Initiation au langage C.pdf', 'ftp://hackbbs.org/documentation%20c/initiation%20au%20langage%20c.pdf'), (9, 2, 'O''Reilly - The C Programming Language.pdf', 'ftp://hackbbs.org/documentation%20c/o%27reilly%20- %20The%20C%20Programming%20Language.pdf'), (10, 3, 'Les Bases du Langage C# (Cours Hackbbs - vodkanux)', 'ftp://hackbbs.org/documentation%20c%23/les%20bases%20du%20langage%20c%23%20(cou rs%20hackbbs%20-%20vodkanux).doc'), (11, 3, 'O''Reilly - Programming C#.pdf', 'ftp://hackbbs.org/documentation%20c%23/o%27reilly%20-%20programming%20c%23.pdf'), (12, 4, 'Java 2 - The Complete Reference - Osborne Mcgraw-Hill.pdf', 'ftp://hackbbs.org/documentation%20java/java%202%20- %20The%20Complete%20Reference%20-%20Osborne%20Mcgraw-Hill.pdf'), (13, 5, 'Debian.GNU-Linux.Bible.pdf', 'ftp://hackbbs.org/documentation%20linux/debian.gnu- Linux.Bible.pdf'), (14, 5, 'Firewall_GNU_Linux.pdf', 'ftp://hackbbs.org/documentation%20linux/firewall_gnu_linux.pdf'), (15, 5, 'GCC The Complete Guide Reference.pdf', 'ftp://hackbbs.org/documentation%20linux/gcc%20the%20complete%20guide%20reference. pdf'), (16, 5, 'Linux and Unix Commands.pdf', 'ftp://hackbbs.org/documentation%20linux/linux%20and%20unix%20commands.pdf'), (17, 5, 'M?mo Administrateur.pdf', 'ftp://hackbbs.org/documentation%20linux/m%c3%83%c2%a9mo%20administrateur.pdf'), (18, 5, 'M?mo Shell.pdf', 'ftp://hackbbs.org/documentation%20linux/m%c3%83%c2%a9mo%20shell.pdf'), (19, 6, 'Advanced_Python_programming.pdf', 'ftp://hackbbs.org/documentation%20python/advanced_python_programming.pdf'), (20, 6, 'Python.pdf', 'ftp://hackbbs.org/documentation%20python/python.pdf'); Structure de la table `rubrique` CREATE TABLE `rubrique` ( `id` int(2) NOT NULL auto_increment, `rub` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; 11
Contenu de la table `rubrique` INSERT INTO `rubrique` (`id`, `rub`) VALUES (1, 'U.C.H-Publications'), (2, 'Documentation C'), (3, 'Documentation C#'), (4, 'Documentation Java'), (5, 'Documentation Linux'), (6, 'Documentation Python'); Nous avons 2 tables dans notre base de données, une nommée «rubrique» contenant les différentes rubriques des documentations HackBBS (ceci n est qu un exemple, toutes les docs du FTP d HackBBS ne sont pas dispos dans la bdd), et une autre table nommée «doc» contenant les différentes docs avec l id de leur rubrique respective. Table «rub» : Table «doc» : Le but de cet exemple, est de créer une liste liée, c'est-à-dire que l on aura deux listbox, une pour les rubriques et une autre pour les docs, et qu en fonction du choix que l ont va faire sur la listbox «rubrique», la listbox «Docs» se mette à jour avec les documentations qui correspondent avec la rubrique sélectionnée. Pour cela, le script PHP qui sera exécuté via AJAX devra effectuer une requête sur la base de données afin de mettre à jour la deuxième listbox. 12
Voici le code de l index.php : index.php <html> <head> <title>tuto AJAX [DevBBS]</title> <script type='text/javascript'> function getxhr(){ var xhr = null; if(window.xmlhttprequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.activexobject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; return xhr; /** * Méthode qui sera appelée sur le click du bouton */ function appel_ajax(){ var xhr = getxhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readystate == 4 && xhr.status == 200){ var leselect = xhr.responsetext; // On se sert de innerhtml pour rajouter les options a la liste document.getelementbyid('docs').innerhtml = leselect; // requête par méthode POST xhr.open("post","ajax.php",true); // ne pas oublier ça pour le post xhr.setrequestheader('content-type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'auteur sel = document.getelementbyid('rubrique'); id = sel.options[sel.selectedindex].value; xhr.send("id="+id); </script> 13
</head> <body> <form action="ajax.php" method="post"> <fieldset> <legend>docs HackBBS</legend> <label>rubrique</label> <select name="rubrique" id="rubrique" onchange="appel_ajax()"> <option value="-1">aucun</option> <?php mysql_connect("localhost","user","pass"); mysql_select_db("ajaxdevbbs"); $res = mysql_query("select * FROM rubrique ORDER BY rub"); while($data = mysql_fetch_assoc($res)){ echo "<option value='".$data["id"]."'>".$data["rub"]."<br>";?> </select> <label>docs</label> <div id='docs' style='display:inline'> <select name='docs'> <option value='-1'>choisir un auteur</option> </select> </div> </fieldset> </form> </body> </html> J ai surligné les éléments importants dans ce code, afin que la mise à jour puisse se faire. - Tout d abord en rouge, est représenté l id de la <div> qui contient la listbox (<select>) qui sera mis à jour à chaque modification de la première listbox. Cette div est très importante, car lorsque AJAX sera exécuté, elle sera remplacé par le résultat obtenue de notre script PHP. - L évènement JavaScript utilisé est de couleur bleu, onchange nous permettra d appeler AJAX à chaque changement de rubrique dans la première listbox. - En vert sont les infos à changer en fonction de votre serveur de bases de données. - En orange sont les lignes qui récupèrent la valeur de la première listbox (l id de la rubrique) puis la passe en paramètre à notre script PHP via la méthode POST. Nous allons voir maintenant notre script PHP : ajax.php <?php if((isset($_post["go_to_ftp_hbbs"]))&&isset($_post["docs"])) header("location:".$_post["docs"]); echo "<select name='docs'>"; if(isset($_post["id"])){ 14
mysql_connect("localhost","user","pass"); mysql_select_db("ajaxdevbbs"); $res = mysql_query("select id,doc,url FROM doc WHERE id_rub=".$_post["id"]." ORDER BY doc"); while($data = mysql_fetch_assoc($res)){ echo "<option value='".$data["url"]."'>".$data["doc"]."</option>"; echo "</select> <input type='submit' name='go_to_ftp_hbbs' value='ftp HackBBS'>";?> Le script PHP se contente en fait de récupérer le paramètre passé en POST par AJAX, c'est-à-dire l id de la rubrique sélectionné, et envoie une requête afin de récupérer les documentations correspondantes à la rubrique. Une fois ce script exécuté, le contenue de notre <div> dans le fichier index.php est remplacé par le contenu de ajax.php, c'est-à-dire d une listbox contenant les docs, ainsi qu un bouton nous dirigeant vers le FTP d HackBBS (ça c était pour le fun ^^). Voici en image ce que ça donne : Et tout cela. sans rechargement de page. 15
VIII- Conclusion L utilisation de XmlHttpRequest est maintenant beaucoup utilisé dans le Web2.0, ne serait ce que pour son interactivité et son gain de temps, en effet, effectuer des tests lors de la saisie d informations dans un formulaire sans pour autant recharger la page pour effectuer une requête SQL est très pratique. Par exemple, lorsqu on choisit un pseudo sur certain site, celui-ci nous informe de sa disponibilité au fur et à mesure de sa saisie, ce qui est beaucoup plus pratique et agréable pour l utilisateur. Petit rappel avec les requêtes synchrones, l utilisation synchrone risque de figer la page le temps que le script PHP s exécute, ce qui peut avoir un résultat inattendu sur votre site. Cours / Tuto écris pour la communauté DevBBS by Sliim http://dev.hackbbs.org Document libre! 16