Introduction à AJAX
Transcription
Introduction à AJAX
Introduction à AJAX AJAX signifie Asynchronous JavaScript And XML. Prérequis Avant d'aller plus loin, vous devez déjà connaitre les bases de : • • HTML / XHTML JavaScript AJAX = Asynchronous JavaScript and XML AJAX n'est pas un nouveau langage de programmation, mais une technique pour améliorer l'écriture d'applications Web plus rapides, ergonomiques et interactives. Avec AJAX vos scripts JavaScript peuvent communiquer directement avec le serveur, grâce à l'utilisation de l'objet XMLHttpRequest. Avec cet objet, les JavaScripts peuvent échanger des données avec un serveur Web, sans nécessiter le rechargement de la page. AJAX utilise un mode de transfert asynchrone (HTTP requests) entre le navigateur et le serveur Web, permettant ainsi de demander de petites quantités d'information au serveur plutôt que des pages entières. Ce qui rend les applications Internet plus petites, plus rapides et plus ergonomiques. Cette technologie est indépendante du serveur Web (Apache, IIS, etc) AJAX est basé sur les standards du Web AJAX est basé sur les standards Web suivants : • • • • JavaScript XML HTML CSS Les standards utilisés dans AJAX sont bien définis, et supportés par la majorité des navigateurs. AJAX est donc quasiment indépendant des navigateurs et des plateformes. Requêtes Http AJAX AJAX utilise les requêtes HTTP Dans le codage habituel JavaScript, pour obtenir la moindre information d'une base de données, ou un fichier situé sur le serveur, ou envoyer des informations utilisateur à un serveur, il faut réaliser un formulaire HTML et envoyer par GET ou POST les données sur le serveur. L'utilisateur devra soumettre par bouton "Submit" la demande d'envoi/d'obtention des informations, attendre que le serveur réponde, puis une nouvelle page sera chargée avec les résultats. C'est parce que le serveur renvoie une nouvelle page à chaque demande cliente, que les applications Web traditionnelles peuvent être plus lentes et tendent vers plus de lourdeur. Avec AJAX, les JavaScript communiquent directement avec le serveur, en s'appuyant sur l'objet XMLHttpRequest. Avec une requête HTTP, une page Web peut faire une requête à, et obtenir une réponse du serveur Web - sans rechargement de la page. L'utilisateur restera sur la même page, et il ne remarquera même pas que le script demande une page ou envoie des données au serveur en tâche de fond. L'objet XMLHttpRequest. En utilisant l'objet XMLHttpRequest, un développeur Web peut mettre à jour une page avec des données issues du serveur, après que la page a été chargée. AJAX a été rendu populaire en 2005 par le fameux Google Suggest (saisie interactive des sujets de recherche) Google Suggest utilise un objet XMLHttpRequest pour créer une interface Web très dynamique : lorsqu'on commence à taper une recherche dans une zone de saisie, JavaScript envoie les lettres à un serveur, et le serveur retourne une liste de suggestions. L'objet XMLHttpRequest est supporté dans Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, et Netscape 7. Exemple AJAX Une première application AJAX Pour comprendre comment travaille AJAX, nous créerons une petite application AJAX. Tout d'abord, nous allons créer un formulaire standard HTML avec deux champs : nom d'utilisateur et heure. Le nom d'utilisateur sera rempli par l'utilisateur et le champ heure en utilisant AJAX. Le fichier HTML se nomme "testAjax.htm", et il ressemble à ceci (noter que le formulaire n'a pas de bouton submit!) <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> La prochaine page explique la "clé de voûte" des mécanismes d'AJAX. Support AJAX des navigateurs Support AJAX des navigateurs La clé de voûte d'AJAX est l'objet XMLHttpRequest. Les navigateurs utilisent différentes méthodes pour créer cet objet. Internet Explorer utilise ActiveXObject, alors que d'autres navigateurs utilisent l'objet nommé XMLHttpRequest présent en natif dans JavaScript. Pour créer cet objet et pouvoir faire fonctionner vos scripts avec différents navigateurs, nous allons utiliser une commande "try and catch". Vous pouvez en savoir plus sur cette commande dans le tutoriel try and catch . Mettons à jour le fichier "testAjax.htm" avec le code JavaScript qui crée l'objet XMLHttpRequest : <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } } </script> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Explication de l'exemple: En premier, création de la variable xmlHttp pour contenir l'objet XMLHttpRequest. Ensuite on tente de créer l'objet avec XMLHttp=new XMLHttpRequest(). Ceci fonctionne pour les navigateurs Firefox, Opera, et Safari. Si la création échoue, on essaye xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") qui est la demande pour Internet Explorer 6.0+, si cela échoue, on essaie xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") qui convient pour Internet Explorer 5.5+ Si aucune des trois méthodes ne marche, l'utilisateur a un navigateur très ancien et se verra averti par une alerte indiquant que le navigateur ne supporte pas AJAX. Note: Le code spécifique aux navigateurs ci-dessus est long et assez complexe. Toutefois, c'est le code que vous utiliserez à chaque création d'un objet XMLHttpRequest, et un simple copier coller fera l'affaire. La prochaine page montre comment utiliser l'objet XMLHttpRequest pour communiquer avec le serveur. AJAX - L'objet XMLHttpRequest Compléments sur l'objet XMLHttpRequest Avant d'envoyer des données au serveur, il faut expliquer trois importantes propriétés de cet objet. La propriété onreadystatechange Après l'envoi d'une requête au serveur, nous aurons besoin d'une fonction pour recevoir les données renvoyées par le serveur. La propriété onreadystatechange stocke la fonction qui va traiter la réponse du serveur. Ce n'est pas une méthode, la fonction est stockée dans la propriété pour être appelée automatiquement. Le code suivant initialise la propriété onreadystatechange et y stocke une fonction vide : xmlHttp.onreadystatechange=function() // Nous allons écrire du code ici. } { La propriété readyState La propriété readyState contient le statut de la réponse du serveur. Chaque fois que le readyState change, la fonction onreadystatechange sera exécutée Voici les valeurs possibles de cette propriété : State 0 1 2 3 4 Description The request is not initialized The request has been set up The request has been sent The request is in process The request is complete Nous allons ajouter une commande if à notre fonction onreadystatechange pour tester si c'est terminé (c'est-à-dire que nos données sont prêtes) : xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Obtenir les données fournies pas le serveur } } La propriété responseText Les données renvoyées par le serveur peuvent être récupérées par la propriété responseText. Dans notre code, nous allons affecter comme valeur au champ d'input "time" la valeur contenue par responseText xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } La prochaine page montre comment demander des données au serveur. Appel du Serveur AJAX - Envoi d'une requête au Serveur Pour envoyer une requête au serveur, on utiise la méthode open() et la méthode send(). La méthode open() prend trois arguments. Le premier définit de quelle façon on envoie la requête (GET ou POST). Le second argument spécifie l'URL du script à charger du côté serveur. Le troisième argument spécifie que la requête sera traitée de façon asynchrone. La méthode send() envoie la requête au serveur. En supposant que notre fichier HTML et notre scrit (ASP ou PHP) sont dans le même répertoire (directory), le code ressemble à : xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); Nous devons décider du moment où la fonction AJAX sera exécutée. Ce sera en "arrière plan" lorsqu'un utilisateur tape un caractère dans le champ "username" (onkeyup) <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> Notre fichier AJAX est désormais prêt et ressemble à ceci : <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Noter que l'on pourrait aussi appeler un script PHP (ie time.php) dans l'envoi au serveur : xmlHttp.open("GET","time.php",true); xmlHttp.send(null); La prochaine page complète notre application avec le contenu des scripts "time.asp" et "time.php". Les Scripts côté Serveur Pour ASP Ce script permet d'afficher l'heure du serveur. La propriété responseText vue page précédente, va stocker les données retournées par le serveur. Voici le code du script "time.asp" : <% response.expires=-1 response.write(time) %> . Note: La propriété expires, fixe le temps durant lequel une page sera en cache côté navigateur. La valeur -1 indique pour une page qu'elle ne sera jamais en cache. Pour PHP Le code de "time.php" ressemble à ceci : <? # on affiche l'heure en cours. echo date("H:i:s"); ?> Exécuter l'application Voir http://www.w3schools.com/ajax/ajax_serverscript.asp Ce support est la traduction du tutoriel du site http://www.w3schools.com/ajax/ajax_intro.asp Un autre tutoriel bien construit vous permettra d'aller plus loin, et en particulier de découvrir comment récupérer dans un JavaScript du code JavaScript stocké sur le serveur, l'utilisation de la fonction eval, etc. C'est ici : http://tutoriaux.benzor.com/tutoriaux-17-10-0-0.html Plus généralement, le site http://www.w3schools.com vous sera toujours d'une aide précieuse.