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.