AJAX
Qu'est-ce que l'AJAX
AJAX (Asynchronous JavaScript And XML) n'est pas une technologie en elle-même. C'est en fait un ensemble de plusieurs technologies regroupant :
- HTML (ou DHTML)
- CSS (feuilles de style)
- XML (pour transmettre les données)
- DOM (pour parser le XML)
- JavaScript (pour effectuer les traitements)
AJAX va permettre de modifier une page sans la recharger entièrement, ce qui va grandement accélérer les applications et les rendre plus réactives aux actions des utilisateurs. En fait, pour faire de l'ajax, il faut utiliser l'objet XMLHttpRequest. C'est cet objet qui va permettre de communiquer avec les scripts situés sur les serveurs.
Fonctionnement
Pour commencer, il nous faut un objet XMLHttpRequest. Là, deux cas de figure sont à prendre en compte :
- le navigateur est Internet Explorer : dans ce cas on utilise un objet ActiveX
- le navigateur n'est pas Internet Explorer (par exemple Firefox, Safari, ...) : dans ce cas on utilise l'objet XMLHttpRequest qui reprend en fait les propriétés et les méthodes de l'objet ActiveX de Microsoft.
Pour créer notre objet XMLHttpRequest, on peut procéder comme ceci:
if (window.XMLHttpRequest) {
// on est dans le cas où le navigateur n'est pas Internet Explorer
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// on est dans le cas ou le navigateur est Internet Explorer
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
Il est à noter que bien que l'on utilise ActiveX, il n'y aura pas de déclenchement de message de sécurité.
Il faut ensuite s'assurer que tous les navigateurs fonctionneront correctement même sans entête XML (notamment pour Mozilla). Pour ce faire, on peut utiliser le code suivant :
httpRequest.overrideMimeType('text/xml');
L'étape suivant consiste à spécifier à l'objet httpRequest la fonction javascript qu'il faudra appeler pour effectuer le traitement des réponses du serveur. Ceci peut être fait de deux manières différentes :
httpRequest.onreadystatechange = nomDeLaFonction;
ou
httpRequest.onreadystatechange = function(/*ne pas mettre d'arguments*/) {
// traitements de la réponse
};
Il s'agit ensuite de communiquer avec le serveur, c'est à dire appeler un script ou une page et éventuellement lui communiquer des informations. Pour appeler un script ou une page, on utilise la méthode open de l'objet httpRequest. Cette méthode prend trois paramètres en argument :
- la méthode de requête HTTP. Par exemple GET, POST, HEAD, ...
- l'URL de la page ou du script
- un booleen spécifiant si la requête est asynchrone. Si True alors l'execution de la fonction javascript se poursuivra en attendant la réponse du serveur.
Pour transmettre des données au serveur, il faut utiliser la méthode send de l'objet httpRequest. Cette méthode prend null en argument s'il n'y a pas de données à transmettre ou alors une chaîne de requête de la forme nomParam1=valeur1&nomParam2=valeur2&nomParam3=valeur3&......&nomParamN=valeurN. Il est à noter qu'il est préférable de changer le type mime de la requête pour que les données envoyées soient prises en compte. Ceci peut être fait de la manière suivante :
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Pour communiquer avec le serveur, on peut avoir par exemple :
httpRequest.open('GET', 'http://www.monSite.org/monScript', true);
httpRequest.send(null);
Voyons maintenant plus en détails la façon de réaliser la fonction de traitement des données du serveur. Cette fonction doit dans un premier temps attendre d'avoir reçu toutes les données, ensuite vérifier que le serveur n'a pas renvoyer un message d'erreur et seulement après traiter les données.
- Vérifier qu'on a reçu toutes les données : pour ce faire, on utilise la proprité readyState de l'objet httpRequest. Cette propriété est un code indiquant l'état de la réponse du serveur :
- 0 : non initialisée
- 1 : en cours de chargement
- 2 : chargée
- 3 : en cours d'interaction
- 4 : terminée
On a par exemple :
if (httpRequest.readyState == 4) {
// la réponse a été reçue entièrement
} else {
// on est pas encore prêt à traiter la réponse
}
- S'assurer que le serveur n'a pas retourner un message d'erreur : pour ce faire, on utilise la propriété status de l'objet httpRequest. Cette propriété est un code indiquant l'état de la réponse HTTP du serveur. (Codes d'état des réponses HTTP)
On a par exemple :
if (httpRequest.status == 200) {
// il n'y a pas d'erreur : on peut effectuer les traitements
} else {
// il y a eu un problème avec la requête,
// par exemple la réponse peut être un code 404 (Non trouvée)
// ou 500 (Erreur interne au serveur)
}
- Traiter les donner. Il y a deux façons de récupérer les données renvoyées par le serveur :
- utiliser la propriété responseText de l'objet httpRequest (la réponse sera alors sous la forme d'une chaîne de texte)
- utiliser la propriété responseXML de l'objet httpRequest (la réponse sera alors sous la forme d'un objet XMLDocument qui pourra être parser à l'aide des fonctions DOM de javascript)
Par exemple pour afficher la réponse du serveur dans un popup :
alert(httpRequest.responseText);
ou
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
Tutoriels
Les FrameWorks
Devant l'essor grandissant d'AJAX, beaucoup de framworks et de toolkits ont vu le jour. Parmi les frameworks PHP, on a :