AJAX EN MOINS DE 50 LIGNES ajax, simple, binding, httprequest, xmlhttprequest, Source N°46500

Information sur la source

Catégorie :Divers Classé sous : ajax, simple, binding, httprequest, xmlhttprequest Niveau : Débutant Date de création : 28/04/2008 Date de mise à jour : 28/04/2008 21:18:07 Vu : 2 847

Auteur : Kimjoa

Ecrire un message privé

Note :

7,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

class ajax super réduite pour les noob :) , pas de gestion d'erreur ni de formulaire, mais reconnaissance du type de format de retour .

exemple: oublier pas le serveur sinon ca marche po :(
<script type="text/javascript" src="js/ajax.js"></script>
<script>
monObj={
    maPropriete:'moi',
    maFonctionAjax : function(){
        ObjAJAX = new Ajax({
            url          : "test.txt",
            returnFormat : "txt",
            method       : "POST",
            data         : {
                test  : "'''''",
                test1 : "4",
                test2 : "555"
            },
            asynchronus  : true,
            onComplete   :this.maFonctionDeRetour.bind(this)
        });
    },
    maFonctionDeRetour : function(response){
        alert(response+'+'+this.maPropriete)
    }
};
monObj.maFonctionAjax();
</script>

Source

// permet de referencer l objet lors de l apel d une fonction
Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}
function Ajax(property){
// ini des variables
var url = property.url;
var data = '';
for (j in property.data)
data += "&" + j + "=" + escape(property.data[j]);
var method = property.method || 'GET';
var asyn = property.asyn ;
var onComplete = property.onComplete;
var returnFormat = property.returnFormat || "txt";
// construit l objet requeteur
if (window.XMLHttpRequest)
this.obj = new XMLHttpRequest();
else if (window.ActiveXObject)
this.obj = new ActiveXObject("Microsoft.XMLHTTP");
//envoie la requete et appel le callback
this.obj.open(method,url,asyn);
if (method == "POST")
this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
if (asyn){
this.obj.onreadystatechange = function () {
if (this.obj.readyState == 4 && this.obj.status == 200)
if (returnFormat != "txt")
response = this.obj.responseXML;
else response = this.obj.responseText;
onComplete(response);
}.bind(this)
this.obj.send(data);
}else{
this.obj.send(data);
if (this.obj.status == "200"){
if (returnFormat != "txt")
response = this.obj.responseXML;
else response = this.obj.responseText;
onComplete(response);
}
}
}

// permet de referencer l objet lors de l apel d une fonction
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
function Ajax(property){
// ini des variables
    var url = property.url;
	var data = '';
	for (j in property.data)
        data += "&" + j + "=" + escape(property.data[j]);
	var method = property.method || 'GET';
	var asyn = property.asyn ;
	var onComplete = property.onComplete;
	var returnFormat = property.returnFormat || "txt";
// construit l objet requeteur
	if (window.XMLHttpRequest)
       this.obj = new XMLHttpRequest();
    else if (window.ActiveXObject)
         this.obj = new ActiveXObject("Microsoft.XMLHTTP");
 //envoie la requete et appel le callback
    this.obj.open(method,url,asyn);
    if (method == "POST")
       this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    if (asyn){
        this.obj.onreadystatechange = function () {
            if (this.obj.readyState == 4 && this.obj.status == 200)
                if (returnFormat != "txt")
                    response = this.obj.responseXML;
                else response = this.obj.responseText;
            onComplete(response);
        }.bind(this)
        this.obj.send(data);
    }else{
        this.obj.send(data);
        if (this.obj.status == "200"){
            if (returnFormat != "txt")
                response = this.obj.responseXML;
            else response = this.obj.responseText;
            onComplete(response);
        }
    }
}

Historique

28 avril 2008 17:21:47 :: j avais oublier le bind dans la fonction de retour
28 avril 2008 21:18:07 :: modifier grace au commentaire de ralecul

Sources du même auteur

GENERATEUR D ARBRE

Toutes les sources de Kimjoa

Sources de la même categorie

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

Commentaires

Commentaire de ralecul le 28/04/2008 18:54:39

Salut,

Bel effort ! Mais je vais rester sur la version de prototype...
Au contraire de ce que tu avances dans ta description, cette version est plus complexe à utiliser pour un noob.

Exemple :
---------
onComplete :this.maFonctionDeRetour.bind(this)
Je suis pas sur que ça soit très explicite comme méthode d'utilisation ...

Il manque pas mal de truc indispensable fournit de base avec la version de prototype:
- evalScript
- Ajax.Updater, Ajax.Request, Ajax.PeriodicalUpdater
- Gestion des erreurs...

En parlant d'erreurs : je n'ai pas testé ton code mais je pense qu'il doit y avoir quelques erreurs :
- this.asyn = property.asyn || true; //toujours égal à true
- boucle de test des ActiveXObject //je pense que this.obj doit rester égal à la dernière version testé (pas sur)
- trop de variable publique : "this.maVariable" remplaçable par "var maVariable"
- response qui est global
- onComplete non facultatif, ...

Je suis tout de même content de voir une tentative de clone de prototype.Ajax.
La réalisation est au-dessus des scripts standards que l'on trouve tout le temps avec des fonctions et variables globales...
Il ne manque plus qu'une véritable séparation entre les variables membres et publiques.

Bonne continuation !
Commentaire de Kimjoa le 28/04/2008 20:38:11

salut ralecul, merci pour ton commentaire :).
Pour ce ki concerne le bind dans la fonction de retour, celui ci permet d identifier l objet sur lequel on applique la fonction , et non pas l objet ajax, j aurais pu faire un exemple sans blinding, mais j ai pensé que ca serait interressant pour un novice de connaitre cette fonction indispensable des que l on commence a faire de l objet, fonction tiré de la bibliotheque prototype !!!

"Il manque pas mal de truc indispensable fournit de base avec la version de prototype:"
Justement c est un script fait uniquement pour des besoins très limiter, je n ai pas voulu copier prototype, seulement faire une source ajax la plus simple possible, et pour eviter de charger le presque 100ko de prototype

concernant les erreurs , this.asyn peut etre egal a false , cela veux dire que l on ne continue par l analyse du script avant le retour de la requete , cette option peut etre utile dans certain cas.
Tu as raison concernant les variables globales, et le onComplete .

vais allé voir tes source a+ :)
Commentaire de ralecul le 28/04/2008 21:02:58

Je sais bien que this.asyn = false signifie que l'on est en mode synchrone.
Je pense juste qu'il y a une erreur au niveau de ton test : this.asyn = property.asyn || true;
Car quel que soit la valeur de property.asyn, this.asyn vaudra toujours true (false || true = true !)

PS : mes sources datent un petit peu, j'ai vraiment changé de façon de coder en javascript, je te conseille plutôt de jeter un coup d'½il aux sources disponibles sur mon site perso...

Ajouter un commentaire

Discussions en rapport avec ce code source

Rechargement d'objet "AJAX" par benjiman2

AJAX - XMLHttpRequest - il ne veux pas afficher par jnbdzjnbdz

Ajax et IE7 par arnaultp

Ajax - Impossible d'appeler ma page par darude94

certain caractère non transmis avec POST par supers03

Formulaire tout simple avec envoi en JAVASCRIPT ! NO PHP par putainnn

HTTPS par MasterCent

[AJAX]Tableau et Liste déroulante par Ssayan

Problème actualisation auto Ajax par misterdod

Fonction AJAX sous Firefox par whostheboss2