AJAX - Des clients légers interactifs
AJAX en pratique - Étape 1 : Lancer une requète
Instanciation de l'objet JavaScript
Dans un premier temps, on instancie l'objet JavaScript qui va servir de requèteur HTTP, et qui par le biais duquel on récupérera plus tard, la réponse XML du serveur.
Suivant le navigateur, aucune norme n'étant établie, l'objet à instancier n'a pas le même nom (mais ces différents objets gardent tout de même les même méthodes de base) :
- Pour Internet Explorer il s'agit de l'objet ActiveX XMLHTTP (il en existe deux différents, suivant la version, on devra donc faire un test),
- Pour Mozilla (et les moteurs Gecko), on instanciera un objet JavaScript XMLHttpRequest
Voici ce que donne la création de l'objet, en tenant compte de IE et Mozilla :
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
Création de la fonction-gestionnaire de réponse
Maintenant, on associe une fonction qui sera chargée de traiter la réponse de l'objet précédemment instancié.
Si l'on a créé une fonction spécifique maFonctionGestionnaire
ailleurs dans notre code :
http_request.onreadystatechange = maFonctionGestionnaire;
ou bien, on peut en créer une anonyme :
http_request.onreadystatechange = function(){
// instructions de traitement de la réponse
};
Lancer la requète HTTP
On peut désormais lancer notre requète HTTP. Cette requète correspond par exemple à la demande de raffraichissement d'une liste de manière interactive avec l'utilisateur, sans qu'il soit conscient qu'une telle requète est effectuée.
Supposons que nous voulons utiliser l'action list.file du serveur www.example.org avec les arguments arg1 et arg2, respectivement de valeur value1 et value2.
Voici l'implémentation en méthode GET
http_request.open('GET',
'http://www.example.org/list.file?arg1=value1&arg2=value2', true);
http_request.send(null);
Et l'implémentation en méthode POST
http_request.open('POST',
'http://www.example.org/list.file', true);
http_request.send('arg1=value1&arg2=value2');
La fonction open ne peut se faire que sur le même nom de domaine que la page courante !
Last modified : 15/03/2006