Choix de la langue :

• 
• 
• 

Menu Principal

• 
• 
• 
• 
• 

Ligams » Publications » Javascript » Ajax xmlHttpRequest

Ajax, xmlHttpRequest et ActiveXObject

Ajax offre la possibilité d'envoyer des requêtes serveur en Javascript depuis une page web. Ajax n'est cependant pas implémenté de la même façon selon les navigateurs que l'on utilise. S'il est possible de gérer ses requêtes Ajax en important une librairie comme Prototype JS, c'est souvent bien lourd (environ 100 kilo-octets) si l'on ne souhaite qu'utiliser l'Ajax.

Ce fichier contient une classe Javascript qui permet d'envoyer des requêtes Ajax en une seule ligne de code, et de traiter la réponse si la requête a fonctionné.

Téléchargement

Compatibilité

Ce script fonctionne avec les navigateurs suivants (pour information il a été testé en synchrone et en asynchrone)

• Internet explorer 7 et 8 (je n'ai pas testé avec les versions précédentes, ça ne devrait pas poser de souci à partir de la 5)
• Firefox 2+
• Opera
• Safari PC/Mac
• Chrome

Utilisation

Insérer le script dans la page

<script type="text/javascript" src="ligams_ajax.js"></script>

Documentation

/**
  * httpRequest : gère les requêtes http
  * @param url <string> : url de la page où la requête est effectuée
  * @param params <object> : paramètres de la requête 
  * @param methode <string> : GET ou POST
  * @param callback <function> : fonction à appeler en cas de réussite
  * @param async <boolean> : détermine si l'appel est synchrone ou non (true ou false)  
  */

httpRequest = function(url,params,method,callback,async)
{
  //....
}

Effectuer une requête http simple en Ajax

var url = 'page.php';
var params = { aoc : 'Pic saint loup', annee: '2009', type: 'rosé' };

//Envoi de la requête :
new httpRequest(url,params,'POST',null,true);

Ici, on envoi une requête simple à la page page.php

Effectuer une requête http et récupérer le résultat

 

var url = 'page.php';
 var params = { aoc : 'Pic saint loup', annee: '2009', type: 'rosé' };
       
//Cette fonction sera appelée si la requête est réussie
function requeteReussie(response)
{
  alert(response);
}

 //Envoi de la requête :
 new httpRequest(url,params,'POST',requeteReussie,true);

Feedback et conclusion

Le but de ce script httpRequest n'etait pas de réaliser une classe Javascript complexe contenant pléthore de méthodes pour gérer les appels Ajax. Il s'agissait simplement de faire un fichier léger permettant de gérer tranquillement ses requêtes http sans se soucier des navigateurs et sans importer de framework trop lourd (1.5 kilo-octets).

Si vous décelez des bugs ou pensez qu'une fonctionnalité ou 2 peuvent être ajoutées, je vous écoute :)

Articles connexes

• Créer une classe en Javascript
• Evénement javascript : addEventListener, attachEvent
• Framework Prototype JS
• ExternalInterface

Commentaires

Les commentaires sont tous validés par un modérateur, votre commentaire n'apparaît pas directement sur le site.
Aucun support n'est assuré ici, vous pouvez néanmoins laisser vos remarques et critiques sur l'article, les points de vue pertinents sont toujours les bienvenus.