Une fonction ajax simple, compatible et prête à l’emploi
L’ajax (Asynchronous Javascript And Xml), c’est bien ! Cette technologie permet d’alléger le trafic web et d’accroître l’ergonomie et l’expérience utilisateur.
Pourtant, le concept de transfert asynchrone n’est pas simple à aborder et les tutoriels sur le sujet sont parfois très longs.
Voici une fonction ajax prête à l’emploi, simple à utiliser, compatible avec tous les navigateurs et indépendante (aucune librairie javascript n’est requise).
Un peu d’histoire
Cette fonction a été initialement créée par Sutekidane en 2005 : l’article et la fonction brute d’époque.
Les fonctions (en réalité il y en a deux : XHRConnection et chargeFichier) ont été modifiées principalement pour permettre l’appel d’une fonction après le chargement de l’ajax (un callback), si ce dernier a réussi.
D’autres bugs mineurs ont été corrigés (comme l’erreur lors d’une requête de type POST).
Fonctions et documentation
Voici les deux fonctions, à placer dans un fichier JS ou dans une balise <script> [téléchargement direct] :
function XHRConnection()
{
// + ----------------------------------------------------------------------------------
var conn = false;
var debug = true;
var datas = new String();
var areaId = new String();
// Objet XML
var xmlObj;
// Type de comportement au chargement du XML
var xmlLoad;
// + ----------------------------------------------------------------------------------
try {
conn = new XMLHttpRequest();
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew XMLHttpRequest()\n\n' + error); }
try {
conn = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Microsoft.XMLHTTP")\n\n' + error); }
try {
conn = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Msxml2.XMLHTTP")\n\n' + error); }
conn = false;
}
}
}
// + ----------------------------------------------------------------------------------
// + setDebugOff
// + Désactive l'affichage des exceptions
// + ----------------------------------------------------------------------------------
this.setDebugOff = function() {
debug = false;
};
// + ----------------------------------------------------------------------------------
// + setDebugOn
// + Active l'affichage des exceptions
// + ----------------------------------------------------------------------------------
this.setDebugOn = function() {
debug = true;
};
// + ----------------------------------------------------------------------------------
// + resetData
// + Permet de vider la pile des données
// + ----------------------------------------------------------------------------------
this.resetData = function() {
datas = new String();
datas = '';
};
// + ----------------------------------------------------------------------------------
// + appendData
// + Permet d'empiler des données afin de les envoyer
// + ----------------------------------------------------------------------------------
this.appendData = function(pfield, pvalue) {
datas += (datas.length == 0) ? pfield+ "=" + escape(pvalue) : "&" + pfield + "=" + escape(pvalue);
};
// + ----------------------------------------------------------------------------------
// + setRefreshArea
// + Indique quel elment identifié par id est valoris lorsque l'objet XHR reoit une réponse
// + ----------------------------------------------------------------------------------
this.setRefreshArea = function(id) {
areaId = id;
};
// + ----------------------------------------------------------------------------------
// + createXMLObject
// + Méthode permettant de créer un objet DOM, retourne la réfrence
// + Inspiré de: http://www.quirksmode.org/dom/importxml.html
// + ----------------------------------------------------------------------------------
this.createXMLObject = function() {
try {
xmlDoc = document.implementation.createDocument("", "", null);
xmlLoad = 'onload';
}
catch (error) {
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlLoad = 'onreadystatechange ';
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet XML\n\n'); }
return false;
}
}
return xmlDoc;
}
// + ----------------------------------------------------------------------------------
// + Permet de définir l'objet XML qui doit être valorisé lorsque l'objet XHR reoit une réponse
// + ----------------------------------------------------------------------------------
this.setXMLObject = function(obj) {
if (obj == undefined) {
if (debug) { alert('Paramètre manquant lors de l\'appel de la méthode setXMLObject'); }
return false;
}
try {
//xmlObj = this.createXMLObject();
xmlObj = obj;
}
catch (error) {
if (debug) { alert('Erreur lors de l\'affectation de l\'objet XML dans la méthode setXMLObject'); }
}
}
// + ----------------------------------------------------------------------------------
// + loadXML
// + Charge un fichier XML
// + Entrées
// + xml String Le fichier XML à charger
// + ----------------------------------------------------------------------------------
this.loadXML = function(xml, callBack) {
if (!conn) return false;
// Chargement pour alimenter un objet DOM
if (xmlObj && xml) {
if (typeof callBack == "function") {
if (xmlLoad == 'onload') {
xmlObj.onload = function() {
callBack(xmlObj);
}
}
else {
xmlObj.onreadystatechange = function() {
if (xmlObj.readyState == 4) callBack(xmlObj)
}
}
}
xmlObj.load(xml);
return;
}
}
// + ----------------------------------------------------------------------------------
// + sendAndLoad
// + Connexion à la page désirée avec envoie des données, puis mise en attente de la réponse
// + Entrées
// + Url String L'url de la page à laquelle l'objet doit se connecter
// + httpMode String La méthode de communication HTTP : GET, HEAD ou POST
// + callBack Objet Le nom de la fonction de callback
// + ----------------------------------------------------------------------------------
this.sendAndLoad = function(Url, httpMode, callBack) {
httpMode = httpMode.toUpperCase();
conn.onreadystatechange = function() {
if (conn.readyState == 4 && conn.status == 200) {
// Si une fonction de callBack a été définie
// Si une zone destinée à récupérer le résultat a été définie
if (areaId.length > 0){
try {
document.getElementById(areaId).innerHTML = conn.responseText;
}
catch(error) {
if (debug) { alert('Echec, ' + areaId + ' n\'est pas un objet valide'); }
return false;
}
if (typeof callBack == "function") {
callBack();
}
return;
}
}
};
switch(httpMode) {
case "GET":
try {
Url = (datas.length > 0) ? Url + "?" + datas : Url;
conn.open("GET", Url);
conn.send(null);
}
catch(error) {
if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la méthode GET'); }
return false;
}
break;
case "POST":
try {
tab_url = Url.split('?');
nom_fichier = tab_url[0];
datas = tab_url[1];
conn.open("POST", nom_fichier);
conn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
conn.send(datas);
}
catch(error) {
if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la mthode POST'); }
return false;
}
break;
default :
return false;
break;
}
return true;
};
return this;
}
function chargeFichier(fichier, zone, methode, callback)
{
if (methode == undefined) { methode = "GET"; }
if (callback == undefined) { callback = "void()"; }
callback = new Function("callback", callback + ";");
var XHR = new XHRConnection();
XHR.setRefreshArea(zone);
XHR.sendAndLoad(fichier + "&time=" + new Date().getTime(), methode, callback );
return true;
}
La fonction XHRConnection permet de créer l’objet XML en fonction du navigateur. De votre côté vous utiliserez chargeFichier ainsi :
chargeFichier(fichier, zone, methode, callback);
Voici comment utiliser les paramètres :
- Fichier : fichier à charger et ses paramètres, par exemple : page2.php?id=3&login=xxx
- Zone : Identifiant (attribut id) de l’élément HTML à utiliser : un div, un td, un span…
- Méthode : GET ou POST au choix. La méthode GET sera soumise aux problèmes d’encodage des caractères dans les url.
- Callback : Une fonction JS à appeler à la fin du chargement ajax, si ce dernier à réussi, ce paramètre peut être vide.
Dans le cas d’une requête POST (recommandé), les paramètres doivent être renseignés comme pour une requête GET, sous la forme page.php?parametre=1&utilisateur=2.
Quelques exemples
Requête POST sur page2.php, appel de la fonction postajax() après chargement :
chargeFichier("page.php?parametre=valeur", "div_ajax", "POST", "postajax()");
Requête GET sur page2.php, sans fonction de callback :
chargeFichier("page2.php?parametre=valeur", "span_ajax", "GET", "");
N’hésitez pas à me donner vos retours quant à l’utilisation de la fonction.
Réalisé et rédigé avec Julien TAUBENHAUS dans le cadre de son projet SUPINFO.
