Programmation Web FMC Page 1
Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications asynchrones entre le client (navigateur) et le serveur Web. Google Suggest par exemple utilise AJAX: désactivez JavaScript dans votre navigateur et vous verrez. Programmation Web FMC Page 2
Histoire d'ajax Ce terme apparaît en 2005 dans un article de Jesse James Garrett: Ajax : A New Approach to Web Applications. AJAX permet d'éviter le rechargement complet de la page lors de chaque requête. Programmation Web FMC Page 3
Principe d'ajax Communication entre client et serveur classique. Communication entre client, moteur AJAX et serveur Web. Programmation Web FMC Page 4
AJAX en pratique 1 AJAX réagit aux actions de l'utilisateur sur la page. 2 Le code JavaScript contenu dans la page communique ensuite avec le serveur, et modifie éventuellement le contenu de la page. 3 L'utilisateur agit à nouveau sur la page : retour au point 1. Pour que cela soit possible, AJAX utilise XMLHttpRequest, un objet JavaScript, qui gère les communications avec le serveur. Programmation Web FMC Page 5
AJAX : L'objet XMLHttpRequest (1) C'est un objet utilisé côté client, depuis le langage JavaScript. D'abord créé par Microsoft sous la forme d'un objet ActiveX, il a été ensuite généralisé sur tous les navigateurs. Repris par l'ensemble des navigateurs, il est désormais en cours de recommandation par le W3C. (Voir http://www.w3.org/tr/xmlhttprequest/ du 20/08/09) Comme son nom ne l'indique pas, il permet de récupérer toutes sortes de données, et pas simplement du XML. Programmation Web FMC Page 6
AJAX : L'objet XMLHttpRequest (2) Cet objet comporte 6 attributs: 1: readystate (indique la disponibilité des données) 2: status et statustext (code et message HTTP retournés par la requête: 200/OK, 403/Forbidden...) 3: responsetext (réponse au format texte) 4: responsexml (réponse au format XML) 5: onreadystatechange (indique quelle fonction appeler quand Et 6 méthodes: a: open (ouvre une connexion) b: send (envoie une requête) c: abort (annule une requête) l'attribut readystate varie) d: setrequestheader (fixe les en-têtes HTTP) e: getallresponseheaders (lit les en-têtes) f: getresponseheader (lit un en-tête précis) Programmation Web FMC Page 7
AJAX : L'objet XMLHttpRequest (3) 1: readystate L'attribut readystate indique la progression de la requête envoyée par le client au serveur. Il passe successivement des valeurs 0 à 4: 0 non initialisé 1 transfert des données 2 données transférées 3 données partiellement disponibles 4 données disponibles en totalité Programmation Web FMC Page 8
AJAX : L'objet XMLHttpRequest (4) 2: status et statustext L'attribut status indique le code HTTP renvoyé par le serveur; il est donc possible de tester sa valeur et de réagir en conséquence : if(marequete.status == 200) alert("code HTTP " + marequete.status + " OK"); else alert("code HTTP " + marequete.status + " KO"); Info: l'attribut statustext permet d'afficher le message accompagnant le code renvoyé par le serveur: OK, Forbidden, Not found, etc. Programmation Web FMC Page 9
AJAX : L'objet XMLHttpRequest (5) 3: responsetext L'attribut responsetext contient la valeur résultat renvoyée par la page distante, au format texte, sans structure particulière: le programmeur peut donc y écrire du HTML, du code JavaScript (à utiliser ou non avec la commande eval), etc. // création de la requête var marequete = new XMLHttpRequest();... // affiche le résultat dans une boîte d'alerte alert(marequete.responsetext); Programmation Web FMC Page 10
AJAX : L'objet XMLHttpRequest (6) 4: responsexml L'attribut responsexml contient la valeur résultat renvoyée par la page distante, au format XML: il est donc possible d'utiliser les fonctions fournies par le Document Object Model afin de manipuler les informations obtenues. // création de la requête var marequete = new XMLHttpRequest(); // il faut préciser que le type de résultat attendu est XML marequete.overridemimetype('text/xml');... Programmation Web FMC Page 11
AJAX : L'objet XMLHttpRequest (7) 5: onreadystatechange L'attribut onreadystatechange est associé à une fonction appelée à chaque fois que la valeur de l'attribut readystate est modifiée. // affectation de la fonction à l'attribut marequete.onreadystatechange=statechanged;... function statechanged() { } if (marequete.readystate == 4) { alert("résultat = " + marequete.responsetext); } Programmation Web FMC Page 12
AJAX : L'objet XMLHttpRequest (8) a: open(mode, url, boolean, user, password) mode : GET, POST, PUT, DELETE, HEAD url : l'url de la page à atteindre (dans le même domaine) boolean : true (= requête asynchrone) ou false (= requête synchrone) user et password : si nécessaires pour atteindre url Info: Une requête synchrone attend la fin du traitement courant avant que le script ne continue, alors qu'avec une requête asynchrone (à utiliser prioritairement), les différents scripts présents sur la page continueront de s'exécuter. Programmation Web FMC Page 13
AJAX : L'objet XMLHttpRequest (9) b: send(data) data: vaut null dans le cas d'une requête GET. avec POST, est soit une liste de couples clefs-valeurs (a), soit un élément DOM (b). (a) var1=valeur1?var2=valeur2?var3=valeur3 (b) document.getelementbyid("test").value Info: Il faut préciser, lors de l'utilisation de la méthode POST, le type de contenu transféré, à l'aide de la méthode setrequestheader() (voir e). Programmation Web FMC Page 14
AJAX : L'objet XMLHttpRequest (10) c: abort() La méthode abort permet d'abandonner la requête courante. // création de la requête marequete = new XMLHttpRequest(); // ouverture de la connexion marequete.open('get', 'exemple/monphp.php', true); // envoi marequete.send(null); // arrêt marequete.abort() Programmation Web FMC Page 15
AJAX : L'objet XMLHttpRequest (11) d: setrequestheader() Cette méthode permet de fixer le type de contenu transféré lors de l'utilisation de la méthode POST: - application/x-www-form-urlencoded (par défaut) - multipart/form-data (si transfert d'informations binaires) Voir http://www.w3.org/tr/html401/interact/forms.html pour plus de détails sur les formulaires Web. Programmation Web FMC Page 16
AJAX : L'objet XMLHttpRequest (12) e: getallresponseheaders() Cette méthode permet de récupérer la liste des en-têtes de la réponse HTTP envoyée par le serveur, uniquement si readystate vaut 3 ou 4, et la valeur "null" sinon. alert(marequete.getallresponseheaders()); affiche comme résultat: Programmation Web FMC Page 17
AJAX : L'objet XMLHttpRequest (13) f: getresponseheader(header) Cette méthode permet de récupérer la valeur d'un en-tête précis transmis par la réponse HTTP du serveur. alert(xmlhttp.getresponseheader('x Powered By')); affiche : Programmation Web FMC Page 18
Exemple d'utilisation : suggestion.hml <html> <head> <script src="aide.js"></script> </head> <body> <form> Prénom: <input type="text" id="monprenom" onkeyup="aide(this.value)"/> </form> <p>suggestions: <span id="aide"></span></p> </body> </html> Programmation Web FMC Page 19
Exemple d'utilisation : aide.js (1) var xmlhttp function aide(str) { if (str.length==0) { document.getelementbyid("aide").innerhtml=""; return; } xmlhttp=getxmlhttpobject(); xmlhttp.overridemimetype('text/xml'); if (xmlhttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var url="aide.php"; url=url+"?q="+str; xmlhttp.onreadystatechange=statechanged; } xmlhttp.open("get",url,true); xmlhttp.send(null); Programmation Web FMC Page 20
Exemple d'utilisation : aide.js (2) function statechanged() { if (xmlhttp.readystate==4) { document.getelementbyid("aide").innerhtml=xmlhttp.responsetext; xmldoc=xmlhttp.responsexml; repnode = xmldoc.getelementsbytagname('reponse').item(0); } } function GetXmlHttpObject() { if (window.xmlhttprequest) { // code pour IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.activexobject) { // code pour IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } Programmation Web FMC Page 21
Exemple d'utilisation : aide.php <?php // noms des élèves $a[]="albin"; $a[]="alexandre"; $a[]="françois"; $a[]="joanna"; $a[]="julien"; $a[]="karima"; // récupère le paramètre q passé dans l'url $q=$_get["q"]; // vérifie si le paramètre est vide if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } } } if ($hint == "") { $response="aucune proposition"; } else { $response=$hint; } // réponse format XML: echo '<?xml version="1.0"?><a><reponse>'.$response.'</reponse></a>';?> Programmation Web FMC Page 22
Exemple d'utilisation : résultat Programmation Web FMC Page 23
AJAX : Conclusion Permet de dynamiser la consultation des pages Web. Sans plugin supplémentaire car basé sur des technologies largement diffusées. Supporté par tous les navigateurs, mais pas de la même façon! Il est difficile de développer et de corriger les erreurs en JavaScript. Programmation Web FMC Page 24