Problème pour crer une classe pour faire de l'ajax...pleaseHELP !!!

Question

Bonjour à tous et merci de me lire !!

Afin de faire de l'ajax propement je souhaite créer tous d'abord  une classe pour faire de simple requete asyncrhone avec le serveur avec un comportement par défault selon les évenements ( erreur 404 , erreur , success , ect ). Le but est de pouvoir utiliser cette classe comme ceci : 




    var maRequete = new asyncRequest("test.php") ;
    
    //je définie la méthode 
ifSuccess() selon l'utilisation que je désire


    
maRequete
.ifSuccess = function (xhr){
        //si la requete à réussi
    }




   //je définie la méthode 
ifError 
() selon la gestion des erreurs que 
   //je désire
 mais un comportement par défault existe si 
   //je ne définie pas cette   méthode ( a voir dans la class )



    
maRequete
.ifError = function (error){

        //code selon ce que j'ai besoin de faire

    }



       //même chose
    maRequete.onLoading = function (etat){

        //pendant le chargement avec le serveur

    }
    
    maRequete.send() ;        //on envois la requete au serveur

Un comportement par défault existe pour chacune des 4 méthodes de cette objet comme vous allez le voir dans la class. Voilà donc la classe que j'ai ecrite : 

function asyncRequest(file){
    
    //Attributs
    this.data = null ;     //les eventuelles variables
    this.method = 'POST' ; //method utilisé, POST par default
    var filename = file ;  //fichier à joindre
    
    //Gestion d'erreur si filename non renseigné
    if((filename==null) || (filename=='') ){
        //On remonte l'erreur en utilisant la methode iferror
        this.ifError("Le nom du fichier à joindre n'a pas été fournis.") ; 
        return false ;
    }
    
    //Methodes

    //methodes ifError() avec son comportement par défault
    this.ifError = function (error){
        if(error == ""){ 
           alert("Erreur durant la requette avec le serveur"); 
        }else{ 
           alert(error) ; 
        }
    }

    //methodes onLoading () avec son comportement par défault
    this.onLoading = function (statut){
        //vide par default. à redéfinir selon ce qu'on désire faire pendant le chargement
    }

    //methodes ifSuccess () avec son comportement par défault
    this.ifSuccess = function (xhr){
        //vide par default. à redéfinir selon l'utilisation de xhr désiré
    }

    //methodes send() , va creer un XMLHTTPRequest et faire la requette

    this.send = function(){
        xhr = new xhrObj() ; //un objet XmlHTTPRequest
        xhr.open(this.method, filename , true);
        
        //Conditionement des variables si on en as
        if((this.data != null ) && (this.data != '')){
          //Si on a demande POST il faut envoye les variables dans l'entette
          if(this.method == "POST"){ 
             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");     
          }else{ //sinon methode GET
             this.filename = this.filename+"?"+data ; 
          }
        }
        
        //Envois de la requette (instruction commune  GET et POST)
        xhr.send(this.data);
        
        //Processus de la com ASYNCRHONE
        xhr.onreadystatechange = function (){

           /* C'est à partir d'ici que j'ai un probleme. Ici dans onreadystatechange() 
              je n'arrive plus a accéder aux methodes de ma classe ,this.onLoading() , 
              this.ifError() , this.ifSuccess()
            */
            
            if (xhr.readyState != 4){
                   this.onLoading(xhr.readyState) ; //  <- introuvable (this.onLoading is not a function)
            }

            //A la fin de la com
            if (xhr.readyState == 4){

                //Gestion de lerreur 404
                if (xhr.status == 404){
                      //si je provoque l'erreur vonlontairement pour tester j'aurrais "this.ifErroris not a function)"
                      this.ifError('Action Impossible : 
  Le document est introuvable (erreur 404)') ;
                }
                //Si tous s'est bien pass et qu'on a definit une fonction pour le relais, on essaye de l'xcuter
                if (xhr.status == 200){ 
                    this.ifSuccess(xhr) ; //<- introuvable (this.ifSuccess is not a function)
                }
            }
        }
    }
}

Bien sur j'arrive à utiliser mes méthodes en dehors de xhr.onreadystatechange() et je suis désespéré de triturer ce code dans tous les sens. Quelqu'un sait t'il pourquoi je ne peux plus accéder aux méthodes à l'intérieur de xhr.onreadystatechange() ????

Merci d'avance à tous ceux qui ce penche sur mon problème, çà fait maintenant 2 semaines que je bloque sur çà.

cs_Kimjoa · Answer

ton problème viens du 'binding' ,les fonctions passé en paramètre d'autre fonction perdent leurs  contexte d'origine , onreadystatechange va etre appellé par une fonction native du js, qui va lui mettre en paramètre  le onreadystatechangeque que tu aura définit....
en gros, onreadystatechangeva ètre appellé par une autre fonction qui l'aura passé avant en argument.

pour retrouver le contexte de t'as fonction faut en refaire une autre! avec une variable locale à la fonction référencant ton context .

voici en une , celle de prototype;
Function.prototype.bind = function() {      var __method this, args Array.prototype.slice.call(arguments,0), object = args.shift();
      return function() {
         return __method.apply(object, args.concat(Array.prototype.slice.call(arguments,0)));
      }
   }

et pour ton code ca donne 

this.send = function(){...}.bind(this)

a++

Problème pour crer une classe pour faire de l'ajax...pleaseHELP !!!

1 réponse

Votre réponse

Discussions similaires