Introduction à AJAX
publicité
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.
