AJAX
Sommaire Introduction Applications Web Applications AJAX Avantages / Inconvénients Exemple
Introduction AJAX, ou Asynchronous JavaScript And XML («XML et Javascript asynchrones»), est un acronyme désignant une méthode informatique de développement d applications Web. À l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web : HTML (ou XHTML) pour la structure sémantique des informations ; CSS pour la présentation des informations ; DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ; l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web. XML et XSLT
Introduction Les applications AJAX peuvent être utilisées au sein des navigateurs Web qui supportent les technologies décrites précédemment. Parmi eux, on trouve Mozilla, Firefox, Internet Explorer, Konqueror, Safari ou encore Opera. Le terme AJAX est employé depuis 2005 et a rapidement gagné en popularité. Cependant les éléments qui le composent et leur utilisation pour générer des interactions asynchrones sont antérieurs. L'objet XMLHttpRequest (aussi nommé XMLHTTP), point de départ de cette technique, fut développé par Microsoft en tant qu'objet ActiveX ; il fut donc supporté en premier lieu par Internet Explorer 5 dès 1999.
Applications Web Les applications Web permettent aux utilisateurs d'effectuer des choix (suivre un lien, remplir et valider un formulaire). Une requête est alors envoyée au serveur HTTP, qui agit en fonction de l'action et des données reçues, et renvoie une nouvelle page. Ce fonctionnement consomme inutilement une partie de la bande passante, une grande partie du code (X)HTML étant commune aux différentes pages de l'application. Et parce qu'une requête au serveur HTTP doit être réalisée à chaque interaction avec l'application, le temps de réponse de l'application dépend fortement du temps de réponse du serveur HTTP. Cela conduit à des interfaces utilisateurs plus lentes que leurs équivalents natives. Les navigateurs actuels mettent les éléments communs en cache, donc le chargement de pages nouvelles n'oblige pas le serveur à redonner les mêmes éléments à chaque fois.
Applications AJAX Les applications utilisant les techniques AJAX quant à elles peuvent envoyer des requêtes au serveur HTTP pour récupérer uniquement les données nécessaires en utilisant la requête HTTP XMLHttpRequest, et en utilisant la puissance des feuilles de style (CSS) ainsi que le langage Javascript côté client pour interpréter la réponse du serveur HTTP. Les applications sont alors plus réactives, la quantité de données échangées entre le navigateur et le serveur HTTP étant fortement réduite. Le temps de traitement de la requête côté serveur est également légèrement réduit, une partie du traitement étant réalisé sur l'ordinateur d'où provient la requête. En contrepartie, le chargement de la première page peut être pénalisé si l'application utilise une bibliothèque AJAX volumineuse (certains cadres d'applications (frameworks) pèsent plus de 500 ko!).
Avantages / Inconvénients L'avantage de cette méthode est la vitesse à laquelle une application AJAX répond aux actions de l'utilisateur, dont les actions sont traitées (en partie au moins) localement par le navigateur. L'utilisateur d'applications AJAX doit autoriser l'exécution de code Javascript par son navigateur, ce qui peut laisser craindre des problèmes de sécurité. Avec les versions d'internet Explorer 5 ou 6 pour Windows, il doit aussi autoriser les ActiveX car le composant XMLHTTP n'y est pas natif comme dans ses concurrents (Firefox, Safari, Opera, etc.) ou la version 7. Utilisant des techniques apparentées au HTML dynamique, les applications AJAX doivent être testées sur chaque navigateur, en raison du non respect des normes officielles. Un autre inconvénient que l'on peut avancer est la question du référencement puisque les robots d'indexation ne sont pas en mesure d'indexer les contenus engendrés dynamiquement.
Utilisation d AJAX AJAX se base sur l'utilisation d'un composant embarqué dans presque tous les navigateurs récents. Par contre, vous vous doutez bien que le comportement va varier en fonction de ces derniers. Pour pouvoir utiliser AJAX, il nous faut donc créer en javascript un objet que l'on nomme XmlHttpRequest ou xhr pour les intimes, comme son nom l'indique, il va nous permettre de faire des requêtes http pour échanger du XML.
Utilisation d AJAX 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;
Utilisation d AJAX Nous avons donc notre xhr qui est prêt a l'emploi. Pour l'utiliser, nous disposons de différentes propriétés et méthodes : open("méthode","url",flag) setrequestheader("nom", "valeur") abort() onreadystatechange Ouvre la connexion avec le serveur. méthode -> "GET" ou "POST" url -> l'url à laquelle on va envoyer notre requête. Si la méthode est GET, on met les paramètres dans l'url. flag -> true si l'on veut un dialogue asynchrone, sinon, false 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" Abandonne la requête. Ici, on va lui affecter une fonction a nous qui sera exécutée à chaque "changement d'état" de notre objet.
Utilisation d AJAX send("params") readystate Envoi la requête au serveur. Si la méthode est GET, on met null en paramètre. Si la méthode est POST, on met les paramètres a envoyer, sous la forme : "nomparam1=valeurparam1&nomparam2=valeurparam2". C'est cette propriété qu'on va tester dans le onreadystatechange. Elle représente l'état de l'objet et peut prendre plusieurs valeurs : 0 -> Non initialisé. 1 -> Ouverture (open() vient de s'exécuter). 2 -> Envoyé (send() vient de s'exécuter). 3 -> En cours (des données sont en train d'arriver). 4 -> Prêt (toutes les données sont chargées). status Le code de la réponse du serveur. 200 -> OK. 404 -> Page non trouvée....
Utilisation d AJAX statustext responsetext responsexml Le message associé à status. La réponse retournée par le serveur, au format texte. La réponse retournée par le serveur, au format dom XML.
Exemple <html> <head> <title>tutoriel Ajax (XHTML + JavaScript + XML)</title> <script type='text/javascript'> var xhr = null; function getxhr(){ 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;
Exemple function go() { 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> Voilà pour le header de notre page HTML
Exemple Et voici la méthode d appel de notre script <body> <input type='button' value='dis quelque chose!' onclick='go()' /> </body> </html> Le fichier ajax.php <?php echo "Bonjour de php";?> Après avoir fait ce test, vous pouvez aller changer la réponse de php et recliquer sur le bouton sans recharger la page. Vous obtiendrez la nouvelle réponse!