CLASSE AJAX COMPLÈTE
Naixn
Messages postés
455
Date d'inscription
mardi 17 septembre 2002
Statut
Membre
Dernière intervention
22 juillet 2007
-
3 juin 2007 à 11:28
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 27 févr. 2008 à 16:55
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 27 févr. 2008 à 16:55
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/42970-classe-ajax-complete
https://codes-sources.commentcamarche.net/source/42970-classe-ajax-complete
27 févr. 2008 à 16:55
27 févr. 2008 à 15:31
27 févr. 2008 à 15:29
le problème c'est que ca plante assez souvent...
c'est du a quoi? comment peut-on optimiser ce script ?
24 oct. 2007 à 01:25
var AjaxOBJ = new Ajax();
ObjAJAX.setParam ({
onComplete : "enlever_le_loading()",
onFailure : "enlever_le_loading()",
[... tes autres paramètres ...]
});
23 oct. 2007 à 04:48
{ document.getElementById('loading').style.visibility='visible';
alert('crée');
}
---> avec l'alerte, je voi bien que ca marche, mais sans l'alerte rien ne se passe !
:s
23 oct. 2007 à 04:12
{
this.onCreate();
.......
}
Ajax.prototype.onComplete = function (response)
{
document.getElementById('loading').style.visibility='hidden';
}
Ajax.prototype.onCreate = function ()
{
document.getElementById('loading').style.visibility='visible';
}
elle est ou la faute? ou sinon, je doit procéder comment ?
merci pour ta réponse très rapide :)
23 oct. 2007 à 04:02
Tu peux le faire comme quelque chose dans ce genre là :
affiche_le_loading();
var AjaxOBJ = new ...
[...]
onComplete : enlever_le_loading(),
onFailure : enlever_le_loading()
[...]
Sinon tu peux toujours modifier la classe elle-même.
Ajax.prototype.onCreate = function ()
{
[Code pour afficher le loading]
}
Ajax.prototype.init = function ()
{
[...]
this.onCreate();
}
et ensuite avec le onComplete et onFailure tu enlèves la bar de loading.
23 oct. 2007 à 03:45
10 sept. 2007 à 22:02
Pour le encodeURIComponent, j'en avais jamais entendu parler. Comme ça l'a l'air d'être assez standard et supporter par tous les navigateurs je vais updater pour cela.
10 sept. 2007 à 13:51
je reviens aujourd'hui avec 2 choses assez importantes à modifier, qui se trouvaient dans le même bloc :
à la place de
if (this.data != "")
this.data += "&";
this.data += j + "=" + escape(arr[k][j]);
mettre :
if(typeof arr[k][j] != "function"){
if (this.data != "")
this.data += "&";
this.data += j + "=" + escape(arr[k][j]);
}
car là on se retrouve avec le problème de l'énumération des méthodes de prototypage : si on ne met pas if(typeof arr[k][j] != "function"), il va envoyer toutes les méthodes prototypées de Array dans la requête, ce qui est totalement inutile et génère plus de trafic.
L'autre chose à modifier :
à la place de :
this.data += j + "=" + escape(arr[k][j]);
mettre
this.data += j + "=" + encodeURIComponent(arr[k][j]);
Comme le dit le Mozilla devguide : "Les fonctions escape et unescape ne fonctionnent pas correctement pour les caractères non-ASCII et sont donc déconseillées". Concrètement ce qui se passe, c'est que le UTF8 est viré et que le caractère "&" fait planter. Il faut utiliser encodeURIComponent.
Il y a encore un autre truc que j'ai remarqué, mais que je n'ai pas encore résolu, alors je repasserai plus tard :)
17 août 2007 à 18:46
Pour en revenir à la source, tu pourras même mettre :
if (this.method == 'GET'){
this.url += '?'+this.data;
this.data = null;
}
Je précise pour le data null, histoire de pas envoyer les données une deuxième fois pour rien en GET.
Sinon j'ai trouvé un autre problème dans ta source, que je ne sais pas régler : l'encodage.
Avec ta source, pas moyen d'envoyer de l'utf8 ! J'ai fait mes tests avec 2 scripts AJAX, le premier ultra-basic (pas de classe) où ma chaîne arrive en utf8, et la même chose en passant par ta classe, ça arrive en je-ne-sais-quel format ISO, mais pas du utf8. C'est vraiment étonnant car mes pages appelante et appelée sont toutes les deux en utf8, et même en spécifiant un header Content-type: ... , charset=utf8; dans ta source, pas moyen que la chaine reste en utf8.
Au final ça pourra être sympa qu'on puisse préciser l'encodage au moment de l'instanciation, même si a priori ce n'est pas indispensable. à+
11 août 2007 à 05:39
if (typeof arr[k] == "function")
continue;
Pour le GET c'est sûrement un oublie de ma part.
Aussi le projet est loin d'être mort. Personnellement j'utilise souvent cette classe et de temps en temps je vois des choses que je vais rajouter pour un prochain update. Pour l'instant j'ai pris un peu d'avance sur le commencement d'un autre projet, mon chat PHP, et celui-ci va prendre un peu de temps avant de revenir sur ma table de travaille.
11 août 2007 à 02:01
onComplete : nomdemafonction,
Attention, le seul et unique argument passé à la fonction sera la réponse (sinon il faut modifier le code de Arto_8000).
11 août 2007 à 00:47
bravo pour cette source ! C'est vrai que prototype est excellent pour Ajax, mais j'ai la flemme d'extraire les fonctions Ajax qui sont au milieu d'un framework de 100ko :/ Donc cette classe-ci fera très bien l'affaire en attendant pour une utilisation commune, et je rajouterai onCreate si besoin, car j'aime beaucoup l'idée.
Quelques problèmes quand même :
- comme le dit Cyrano24, il y a un problème avec inArray(). Ca me rajoute une case à tous mes tableaux, et cette case contient "inArray" !? Mes tableaux sont multi-dimensionnels et associatifs, je ne sais pas si cette info peut t'aider à régler le problème ? Enfin bref, en en faisant une fonction normale et pas une méthode prototypée, tout est revenu dans l'ordre.
- personne ne l'a évoqué jusqu'ici, alors je ne sais pas si c'est moi mais : en GET ça ne marche pas :/ Pour POST tu envoies les données avec .send, OK, mais avec GET tu devrais les concaténer dans l'URL, et tu ne le fais pas il me semble. Il manque donc cette ligne au tout début de Ajax.prototype.execute, et là ça marche : if (this.method == 'GET') this.url += '?'+this.data;
- "syntaxe" ne prend pas de "h" :)
Merci encore :D
22 juil. 2007 à 08:32
À un petit détail près toutefois : j'ai du désactiver la méthode inArray() qui me posait un problème assez majeur par rapport au reste de mon code JavaScript, enfin sous cette forme s'entend, c'est à dire en prototype de Array. J'ai donc utilisé une autre fonction autonome que j'avais déjà pour tester la présence d'un élément dans un tableau, plus proche de la méthode PHP en ce sens que je lui envoie deux paramètres : l'élément à chercher et le tableau d'éléments. Ce détail mis à part, je trouve ça très bien.
Compliments :)
4 juin 2007 à 14:29
4 juin 2007 à 10:22
4 juin 2007 à 10:20
j'ai un soucis, j'obtiens systématiquement une erreur que voici :
document.content has no properties
onreadystatechange()ajax.js (ligne 194)
[Break on this error] eval (_tempAJAX_Reference_.onComplete);
PLEASE HELP ;-)
3 juin 2007 à 17:41
3 juin 2007 à 16:51
bah ça peut toujours servir genre pour une barre de chargement... mais bon c'est pas indispensable... .. .
par contre je maintien tu devrais utiliser le prototypage parce que la c'est bof bof... toi qui fais du php... bien que le model objet de javascript n'ai d'objet que le nom... imagine ton code en php... .. .
function Ajax()
{
$thisObj = (object)array();
$thisObj->callback = null;
$thisObj->asyn = true;
$thisObj->data = "";
$thisObj->url = "";
$thisObj->method = "GET";
$thisObj->obj = httprequest();
$thisObj->returnFormat = "txt";
if ($thisObj->obj->txt !== null)
return $thisObj->obj;
$thisObj->execute = create_function('', 'execRequest();');
$thisObj->setParam = create_function('$param', 'setParam($param);');
$thisObj->setParamFromForm = create_function('$param', 'setParamFromForm($param);');
return $thisObj;
}
Comprend tu... au final tu crée des référence sur des fonctions à chaque instanciation... c'est couteux en perf et pô beau... .. . ;o)
Alors qu'avec le prototypage tous tes objets héritent de tes méthodes...
Ajax.prototype.execute = function()
{
// code de ta fonction execRequest()
};
Ajax.prototype.setParam = function(param)
{
// code de ta fonction setParam()
};
Ajax.prototype.setParamFromForm = function(param)
{
// code de ta fonction setParamFromForm()
};
Sinon... tu utilise beaucoup de fonction qui ne sont pas à proprement parlé des méthode (ou alors statique) tu devrait plus travailler en OO... cf code à la fin de mon post... .. .
Pour finir tu risque d'avoir des problèmes d'instanciation avec certaines version de IE... tiens un bout de code tiré du fin fond de la poubelle qui me sert de pc... lol... .. . ;o)
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) { }
}
}
}
Voili voilou... .. .
@ tchaOo°
3 juin 2007 à 16:44
onCreate, c'est quand la requête vient d'être lancée avec succès (pas forcément effectuée), ça permet donc de faire quelque chose juste après.
onInteractive, ce sont les résultat partiels renvoyés, et pour l'avoir utilisé, je peux t'assurer que c'est assez utile.
De toute façon, si javascript et Prototype avec Ajax.Request fournissent ces possibilités, c'est justement parcequ'il peut y avoir une utilité :)
Personellement, je ne fais plus jamais d'ajax sans prototype :p
3 juin 2007 à 16:18
Naixn -> Pour cette source je n'en avais jamais entendu parler, mais je vais sûrement jeter un coup d'oeil.
Pour la façon de passer les paramètres, je vais corriger pour que ça soit un tableau associatif et pour le parseDataBeforeSend c'était un vieille habitude que j'avais pris d'utiliser ça au lieu du escape.
Aussi pour rajouter des events, le onComplete c'est la même chose que le callback et le onFailure c'est une assez bonne idée que je vais rajouter. Sinon je doutes de l'utilité du onInteractive et onCreate.
3 juin 2007 à 12:21
@ tchaOo°
3 juin 2007 à 12:18
for(k in arr)
{
switch (k)
{
case "url" : this.url = arr[k]; break;
... .. .
Comme ça tu peux passer soit un tableau associatif soit un objet... c'est bien plus simple... .. .
Sinon est ce que tu connais escape(), encodeURI(), encodeURIComponent() parce que tu réinvente la roue avec ton getCaller()... .. .
Personellement je pense qu'un approche objet en utilisant le prototypage serait plus propre... .. .
Ton isset() ne sert à rien si ce n'est à faire joli... entre faire
if(isset(toTest))
ou directement faire
if(typeof toTest != "undefined")
autant prendre la deuxième solution... .. .
Sinon c'est plutôt bien... .. .
@ tchaOo°
3 juin 2007 à 11:28
Je veux dire, il aurait été beaucoup plus intéressant de faire :
# ObjAJAX.setParam ({
# url: "http://yoururl/index.html",
# returnFormat: "txt",
# method: "POST",
# data: [{valeur1: "1", valeur2: "2"}],
# asynchronus: "true",
# callback: function (response) {document.body.innerHTML = response}
# });
C'aurait été tellement plus simple...
Et puis, Ajax.Request de prototype est plutôt assez complète, d'autant plus qu'elle permet de faire des callbacks intéressants : onComplete, onFailure (très intéressant ça), onInteractive, onCreate, etc.
Je t'invite à visiter : http://www.prototypejs.org/api/ajax/options :)