Accueil > > > CLASSE AJAX COMPLÈTE
CLASSE AJAX COMPLÈTE
Information sur la source
Description
Bon cela fait plusieurs classes AJAX qui sont postées sur ce site, mais aucune n'était vraiment complète et ne permettait de simplifier tous les aspects de AJAX. Plusieurs aspects sont souvent manquants comme le format de retour (texte ou xml), le fait que les rêquetes soient asynchronous ou non, etc. L'usage est relativement simple et permet beaucoup de chose, car j'ai fait cette classe pour quel en accepte le plus possible. Voici plusieurs exemples qui vous permettront de pouvoir utiliser toutes les fonctionnalités cette classe au maximum. Exemple 1 (avec la fonction setParam) : ObjAJAX = new Ajax(); ObjAJAX.setParam ({ url : "http://yoururl/index.html", returnFormat : "txt", method : "POST", data : { test : "11", test1 : "4", test2 : "555" }, asynchronus : true, onComplete : function (response) {alert(response)}, onFailure : function (errorCode) {alert("Erreur : " + errorCode)} }); ObjAJAX.execute(); Exemple 2 (avec la fonction setParam) : ObjAJAX = new Ajax(); ObjAJAX.setParam ({ url : "http://yoururl/index.html", returnFormat : "txt", // OU returnFormat : "xml" method : "POST", // OU method : "GET" data : "valeur1=1&valeur2=2", asynchronus : true, // OU asynchronus : false onComplete : "document.body.innerHTML = response" }); ObjAJAX.execute(); Exemple 3 (avec la fonction setParamFromForm et setParam) : JS : ObjAJAX = new Ajax(); ObjAJAX.setParamFromForm(0); // OU ObjAJAX.setParamFromForm("form1"); OU ObjAJAX.setParamFromForm(document.forms[0]); OU ObjAJAX.setParamFromForm(document.getElementById(" form1_id")); ObjAJAX.setParam({ onComplete : "document.body.innerHTML = response" }); ObjAJAX.execute(); HTML : <form action="http://yoururl/index.html" method="POST" name="form1" id="form1_id"> <input type="text" name="valeur1" value="1"> <input type="text" name="valeur2" value="2"> <input type="button" name="button" value="Envoyer" onclick="fonctionblabla()"> <!-- Contrôle ignorer lors de l'envoie avec ma classe --> </form> Note : Lorsque vous utiliser la fonction setParamFromForm avec un chiffre en paramètre, ce chiffre doit correspondre à ça place dans le document HTML (si c'est le premier dans le document, alors c'est 0, si c'est le deuxième c'est 1 et ainsi de suite). Note 2 : Lorsque vous utiliser la fonction setParam, certains paramètres ont déjà une valeur par défault : asynchronus (true), data (""), method ("GET") et returnFormat ("txt"). Si vous utilisez les valeurs par défaut, il n'est pas obligatoire de les paramètrer. Cependant, il est obligatoire d'avoir un paramètre "url" et "onComplete" pour que évidement le tout fonction comme il le faut.
Source
- /*
- Classe pour AJAX Par HoLyVieR aka Arto_8000
- */
-
- // Synthaxe : ErreurObj ([String Message]) Objet
- // Objet pour la gestion d'erreur
- function ErreurObj(txt)
- {
- // Variable //
- this.txt = txt;
- this.caller = getCaller(ErreurObj.caller);
-
- // Fonction //
- this.toString = function () {
- return "Erreur : " + this.txt + " Fonction : " + this.caller;
- }
- }
-
- // Synthaxe : isset ([Variable]) Boolean
- // Même chose que en PHP
- function isset(toTest)
- {
- return (typeof toTest != "undefined");
- }
-
- // Synthaxe : Array.inArray ([String ChercheQuoi]) Boolean
- // Chercher pour une chaine particuliere dans un tableau
- function inArray(text)
- {
- for (a=0;a<this.length;a++)
- {
- if(this[a] == text)
- {
- return true;
- }
- }
- }
- Array.prototype.inArray = inArray;
-
- // Synthaxe : getCaller ([String fonction.caller]) String
- // Retourne le nom de la fonction appartir de l'attribut caller //
- function getCaller(rawCaller)
- {
- rawCaller = rawCaller.toString();
- if (rawCaller == null)
- return "";
-
- return rawCaller.substring(rawCaller.indexOf("function ") + 9,rawCaller.indexOf("(")).replace(" ","");
- }
-
- // Synthaxe : Ajax () Objet
- // Objet centrale de la classe
- function Ajax()
- {
- // Variable //
- this.asyn = true;
- this.data = "";
- this.url = "";
- this.method = "GET";
- this.returnFormat = "txt";
- this.obj;
- this.init();
- }
-
- // Synthaxe : httprequest () Objet XMLHttpRequest
- // Crée l'objet XMLHttpRequest //
- Ajax.prototype.init = function()
- {
- this.obj = null;
- if (window.XMLHttpRequest)
- this.obj = new XMLHttpRequest();
- else if (window.ActiveXObject) // if IE
- {
- var ieversions = ['Msxml2.XMLHTTP','Microsoft.XMLHTTP','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
-
- for(var i=0; !this.obj && i<ieversions.length; i++)
- {
- try
- {
- this.obj = new ActiveXObject(ieversions[i]);
- }
- catch(e) { }
- }
- }
- }
-
- // Lorsque la requête ne réussit pas
- Ajax.prototype.onFailure = function (errorCode)
- {
- // ...
- }
-
- // Lorsque la requête réussit
- Ajax.prototype.onComplete = function (response)
- {
- // ...
- }
-
- // Synthaxe : setParamFromForm ([HTML Form || String Name || Int Index])
- // Ajoute les paramètres et les données d'un formulaire à celui de la requête
- Ajax.prototype.setParamFromForm = function (obj)
- {
- if (!isNaN(obj))
- obj = document.forms[obj];
-
- if (typeof obj == "string")
- eval("obj = document."+obj);
-
- if (!isset(obj))
- {
- return ErreurObj("Donnée Invalide");
- }
-
- this.method = (isset(obj.method) && (["GET","POST"].inArray(obj.method.toUpperCase()))) ? obj.method.toUpperCase() : this.method;
- this.url = obj.action;
-
- for (i=0;i<obj.elements.length;i++)
- {
- if (["file","button","reset","submit"].inArray(obj.elements[i].type.toLowerCase()))
- continue;
-
- if (this.data != null)
- this.data += "&";
-
- this.data += obj.elements[i].name + "=" + escape(obj.elements[i].value);
- }
- }
-
- // Synthaxe : setParam ([Array data])
- // Ajoute les paramètres à la requête à partir d'un tableau
- Ajax.prototype.setParam = function (arr)
- {
- if (typeof arr != "object" && !isset(arr))
- {
- return ErreurObj("Donnée Invalide");
- }
-
- for(k in arr)
- {
- switch (k)
- {
- case "url" : this.url = arr[k]; break;
- case "method" : this.method = (["GET","POST"].inArray(arr[k].toUpperCase())) ? arr[k].toUpperCase() : this.method; break;
- case "data" :
- if (typeof arr[k] == "string")
- {
- if (this.data != "")
- this.data += "&";
- this.data += arr[k];
- }
- else
- {
- if (typeof arr[k] != "object")
- break;
-
- for (j in arr[k])
- {
- if (this.data != "")
- this.data += "&";
- this.data += j + "=" + escape(arr[k][j]);
- }
-
- }
- break;
- case "asynchronus" : this.asyn = arr[k]; break;
- case "onComplete" : this.onComplete = arr[k];break;
- case "onFailure" : this.onFailure = arr[k];break;
- case "returnFormat" : this.returnFormat = arr[k];break;
- }
- }
- }
-
- // Synthaxe : Function execRequest () //
- // Exécute la requête, ainsi que le callback
- Ajax.prototype.execute = function ()
- {
- this.obj.open(this.method,this.url,this.asyn);
-
- if (this.method == "POST")
- this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
-
- if (this.asyn)
- {
- _tempAJAX_Reference_ = this; // Crée une copie de l'objet AJAX courant pour pouvoir le récupérer après //
- this.obj.onreadystatechange = function () {
- if (_tempAJAX_Reference_.obj.readyState == 4 && _tempAJAX_Reference_.obj.status == 200)
- {
- if (_tempAJAX_Reference_.returnFormat != "txt")
- response = _tempAJAX_Reference_.obj.responseXML;
- else
- response = _tempAJAX_Reference_.obj.responseText;
-
- if (typeof _tempAJAX_Reference_.onComplete == "string")
- eval (_tempAJAX_Reference_.onComplete);
- else
- _tempAJAX_Reference_.onComplete(response);
- }
- else if (_tempAJAX_Reference_.obj.readyState == 4)
- {
- errorCode = _tempAJAX_Reference_.obj.status;
-
- if (typeof _tempAJAX_Reference_.onFailure == "string")
- eval(_tempAJAX_Reference_.onFailure);
- else
- _tempAJAX_Reference_.onFailure(errorCode);
- }
- }
- this.obj.send(this.data);
- }
- else
- {
- this.obj.send(this.data);
-
- if (this.obj.status == "200")
- {
- if (this.returnFormat != "txt")
- response = this.obj.responseXML;
- else
- response = this.obj.responseText;
-
- if (typeof this.onComplete == "string")
- eval (this.onComplete);
- else
- this.onComplete(response);
- }
- else
- {
- errorCode = this.obj.status;
- if (typeof this.onFailure == "string")
- eval (this.onFailure);
- else
- this.onFailure(errorCode);
- }
- }
-
- }
/*
Classe pour AJAX Par HoLyVieR aka Arto_8000
*/
// Synthaxe : ErreurObj ([String Message]) Objet
// Objet pour la gestion d'erreur
function ErreurObj(txt)
{
// Variable //
this.txt = txt;
this.caller = getCaller(ErreurObj.caller);
// Fonction //
this.toString = function () {
return "Erreur : " + this.txt + " Fonction : " + this.caller;
}
}
// Synthaxe : isset ([Variable]) Boolean
// Même chose que en PHP
function isset(toTest)
{
return (typeof toTest != "undefined");
}
// Synthaxe : Array.inArray ([String ChercheQuoi]) Boolean
// Chercher pour une chaine particuliere dans un tableau
function inArray(text)
{
for (a=0;a<this.length;a++)
{
if(this[a] == text)
{
return true;
}
}
}
Array.prototype.inArray = inArray;
// Synthaxe : getCaller ([String fonction.caller]) String
// Retourne le nom de la fonction appartir de l'attribut caller //
function getCaller(rawCaller)
{
rawCaller = rawCaller.toString();
if (rawCaller == null)
return "";
return rawCaller.substring(rawCaller.indexOf("function ") + 9,rawCaller.indexOf("(")).replace(" ","");
}
// Synthaxe : Ajax () Objet
// Objet centrale de la classe
function Ajax()
{
// Variable //
this.asyn = true;
this.data = "";
this.url = "";
this.method = "GET";
this.returnFormat = "txt";
this.obj;
this.init();
}
// Synthaxe : httprequest () Objet XMLHttpRequest
// Crée l'objet XMLHttpRequest //
Ajax.prototype.init = function()
{
this.obj = null;
if (window.XMLHttpRequest)
this.obj = new XMLHttpRequest();
else if (window.ActiveXObject) // if IE
{
var ieversions = ['Msxml2.XMLHTTP','Microsoft.XMLHTTP','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
for(var i=0; !this.obj && i<ieversions.length; i++)
{
try
{
this.obj = new ActiveXObject(ieversions[i]);
}
catch(e) { }
}
}
}
// Lorsque la requête ne réussit pas
Ajax.prototype.onFailure = function (errorCode)
{
// ...
}
// Lorsque la requête réussit
Ajax.prototype.onComplete = function (response)
{
// ...
}
// Synthaxe : setParamFromForm ([HTML Form || String Name || Int Index])
// Ajoute les paramètres et les données d'un formulaire à celui de la requête
Ajax.prototype.setParamFromForm = function (obj)
{
if (!isNaN(obj))
obj = document.forms[obj];
if (typeof obj == "string")
eval("obj = document."+obj);
if (!isset(obj))
{
return ErreurObj("Donnée Invalide");
}
this.method = (isset(obj.method) && (["GET","POST"].inArray(obj.method.toUpperCase()))) ? obj.method.toUpperCase() : this.method;
this.url = obj.action;
for (i=0;i<obj.elements.length;i++)
{
if (["file","button","reset","submit"].inArray(obj.elements[i].type.toLowerCase()))
continue;
if (this.data != null)
this.data += "&";
this.data += obj.elements[i].name + "=" + escape(obj.elements[i].value);
}
}
// Synthaxe : setParam ([Array data])
// Ajoute les paramètres à la requête à partir d'un tableau
Ajax.prototype.setParam = function (arr)
{
if (typeof arr != "object" && !isset(arr))
{
return ErreurObj("Donnée Invalide");
}
for(k in arr)
{
switch (k)
{
case "url" : this.url = arr[k]; break;
case "method" : this.method = (["GET","POST"].inArray(arr[k].toUpperCase())) ? arr[k].toUpperCase() : this.method; break;
case "data" :
if (typeof arr[k] == "string")
{
if (this.data != "")
this.data += "&";
this.data += arr[k];
}
else
{
if (typeof arr[k] != "object")
break;
for (j in arr[k])
{
if (this.data != "")
this.data += "&";
this.data += j + "=" + escape(arr[k][j]);
}
}
break;
case "asynchronus" : this.asyn = arr[k]; break;
case "onComplete" : this.onComplete = arr[k];break;
case "onFailure" : this.onFailure = arr[k];break;
case "returnFormat" : this.returnFormat = arr[k];break;
}
}
}
// Synthaxe : Function execRequest () //
// Exécute la requête, ainsi que le callback
Ajax.prototype.execute = function ()
{
this.obj.open(this.method,this.url,this.asyn);
if (this.method == "POST")
this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
if (this.asyn)
{
_tempAJAX_Reference_ = this; // Crée une copie de l'objet AJAX courant pour pouvoir le récupérer après //
this.obj.onreadystatechange = function () {
if (_tempAJAX_Reference_.obj.readyState == 4 && _tempAJAX_Reference_.obj.status == 200)
{
if (_tempAJAX_Reference_.returnFormat != "txt")
response = _tempAJAX_Reference_.obj.responseXML;
else
response = _tempAJAX_Reference_.obj.responseText;
if (typeof _tempAJAX_Reference_.onComplete == "string")
eval (_tempAJAX_Reference_.onComplete);
else
_tempAJAX_Reference_.onComplete(response);
}
else if (_tempAJAX_Reference_.obj.readyState == 4)
{
errorCode = _tempAJAX_Reference_.obj.status;
if (typeof _tempAJAX_Reference_.onFailure == "string")
eval(_tempAJAX_Reference_.onFailure);
else
_tempAJAX_Reference_.onFailure(errorCode);
}
}
this.obj.send(this.data);
}
else
{
this.obj.send(this.data);
if (this.obj.status == "200")
{
if (this.returnFormat != "txt")
response = this.obj.responseXML;
else
response = this.obj.responseText;
if (typeof this.onComplete == "string")
eval (this.onComplete);
else
this.onComplete(response);
}
else
{
errorCode = this.obj.status;
if (typeof this.onFailure == "string")
eval (this.onFailure);
else
this.onFailure(errorCode);
}
}
}
Conclusion
Comme je vise de créer la classe la plus complète possible, si vous croyez qu'il manquerait quelque chose n'hésitez pas à en faire part.
Historique
- 02 juin 2007 21:39:34 :
- fautes de français
- 03 juin 2007 16:57:05 :
- Suite aux commentaires de kankrelune et de Naixn, l'envoie des paramètres avec setParam ce fait maintenant avec un tableau associatif et le parseDataBeforeSend a été remplacé par escape.
- 03 juin 2007 17:35:04 :
- Prototypage de toutes les fonctions de la classe, ajout des events onComplete et onFailure. Modification de la fonction init pour supporter davantage de version de IE. Merci à kankrelune et à Naixn pour leur réponse rapide.
- 06 juin 2007 03:14:32 :
- Une petite erreur c'est glissée dans les exemples.
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
"settimeout" dans une classe [ par francois44 ]
Bonjour à tous!Je suis actuellement en train de bosser sur une classe d'affichage de NEWS.Je sais qu'il y en a plein dans les sources, mais j'ai rien
probleme de classe [ par wonesek ]
bonjour j'ai un petit probleme: comment obtenir le nom d'un objet a partir d'une de ses methodes?par exemple: si mon objet s'appel monObj, faire en so
variable contenant le nom de la methode JAVASCRIPT [ par s1pike ]
Bonjour à tous, j'ai un petit pb à résoudre. J'ai un classe qui se nomme utilisateur et qui contient des methodes getNom(),getPrenom().
onreadystatechange et this.... [ par vinise ]
bonjour à tousjai une petite question pour vous... j'ai créer une classe Ajax qui est et dans cette classe j'utilise onreadystatechange avec une fonct
CRéation d'objet [ par jeanjeandada ]
Bonjour,POur créer un objet avec ces propriété il faut créer une classe ??? si oui, comment faites vous pour en créer une . merci<span style="color:
Problème AJAX et balise <form> [ par Valentino ]
Bonjour,J'ai récuperé un petit script qui me permet de faire de l'upload ajax (http://blogs.developpeur.org/cyril/archive/2007/03/24/ajax-et-upload-pa
AJAX ? Editeur [ par tuneserapasmonnom ]
Bonjour,Je ne m'y connais que très peu en javascript / ajax mais j'ai besoin d'appeler une fonction php quand je modifie un textarea. J'explique : Je
Pause sur un objet Timer [ par benwa74 ]
Bonjour, Je cherche un moyen me permettant de mettre un timer en pause.Pour cela je pense qu'il faut connaitre la valeur de mon Timer a un instant T .
problème liste lié avec AJAX et navigateur et doctype [ par FRED0181 ]
Bonjour,J'ai creer une une page en PHP/AJAX qui comporte deux listes déroulante liées.(listes remplies par BD Mysql)Lorsque j'ai testé ma page, les li
probleme ajax dans require php [ par sarsator ]
Bonjour,voila mon probleme,j'ai une pages avec de 'lajax pour vcerifier avant d'envoyer le formulaire est qui fias changer le texte pour la verificati
|
Derniers Blogs
[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010!LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE
Toutes les vidéos de ce lancement sont en ligne!
Partie I - Intro
http://www.youtube.com/watch?v=LkQzTQ8T6CA
Partie II - Démo 1
http://www.youtube.com/watch?v=drAhYQ7lqvo
Partie III - Démo 2
http://www.youtube.com/watch?v=c8KM_1Gqybc...
Cliquez pour lire la suite de l'article par MPOWARE [WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE[WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE par FREMYCOMPANY
Je pense qu'ils ont besoin d'une piqure de rappel chez Microsoft : c'est bien gentil d'avoir une interface jolie, mais si c'est pour avoir un truc qui ne convainct pas dedans, c'est peine perdue.
---->
Système ouvert ----> Fermé ?
P...
Cliquez pour lire la suite de l'article par FREMYCOMPANY
Logiciels
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
|