Utilisation de My Own Callback avec un objet HttpRequest

Question

J'écris une demande Http sans l'utilisation d'une bibliothèque (un autre script avait des conflicts ...)

Mais Im ayant des problèmes avec la portée de mon objet. Voici le script appelant, puis l'objet Ajax_Request suit.

function loadCard(e) { 
var element = e.target; 
if($('overlay')) { 
    return false; //something is already over the layout 
} 

var card = '/card/'+element.id; 
var option = {method:'post', parameters:'test', async:true} 

loadOverlay(); 
var ajax = new Ajax_Request(card, option); 

}

// Ajax_Request

function Ajax_Request(url, options) { 

if(typeof url !== 'undefined') { 
    this.url = url; 
} 

if(typeof options.method !== 'undefined') { 
    this.method = options.method; 
} else { 
    this.method = 'get'; 
} 

if(typeof options.parameters !== 'undefined') { 
    this.parameters = options.parameters; 
} 

if(typeof options.async !== 'undefined') { 
    this.async = true; 
} else { 
    this.async = false; 
} 

if(window.XMLHttpRequest) { 
    this.request = new XMLHttpRequest(); 
} //check for MS browser 

this.makeRequest = function() { 
    try { 
     this.request.onreadystatechange = this.checkReadyState; 
     this.request.open(this.method, this.url, this.async); 
     if(this.method == 'post') { 
      this.request.send(this.parameters); 
     } else { 
      this.request.send(null); 
     } 
    } catch(err) { 
     alert(err); 
    } 
} 

this.setResponse = function(r) { 
    alert(r) 
    this.response = r; 
} 

this.getResponse = function() { 
    return this.responseText; 
} 


this.checkReadyState = function(r) { 
    switch(this.readyState) { 
     case 4: 
     //Represents a "loaded" state in which the response has been completely received. 
     if(this.status == 200) { 
      this.setResponse(this.responseText) 
     } 

     ... 

    } 

    } 
} 

Je suis en train de régler la réponse à une propriété si mon objet appelant peut travailler avec elle. Mais quand j'essaie d'appeler this.setResponse(), j'obtiens une erreur qui n'est pas définie. Comment puis-je lier correctement le rappel onreadystatechange à mon programme?

Le script renvoie sinon les données correctement, et je pourrais simplement le sortir juste là, mais j'ai besoin d'un peu plus de flexibilité.

Merci Rich

Answer 1

Je ne suis pas sûr que ce soit le problème, mais vous ne devriez pas faire référence à Ajax_Request dans le constructeur. Utilisez this à la place. (this fait référence à l'objet réel instance- Ajax_Request fait référence au constructeur de l'objet.)

this.makeRequest = function() { 
     try { 
       this.request.onreadystatechange = this.checkReadyState; 
       this.request.open(this.method, this.url, this.async); 
       if(this.method == 'post') { 
         this.request.send(this.parameters); 
       } else { 
         this.request.send(null); 
       } 
     } catch(err) { 
       alert(err); 
     } 
}; 

Answer 2

Dans this.checkReadyState, essayez de changer this.setResponse(this.responseText)-this.setResponse(this.request.responseText);.

Answer 3

Cela vous arrive car à l'intérieur de la fonction checkReadyStatethis représente en fait l'instance XMLHttpRequest pas l'objet Ajax_Request, ainsi this.setResponse est indéfini. Pour référencer la méthode de votre objet, vous devez utiliser une petite astuce: var that = this.

function Ajax_Request(url, options) { 
    var that = this; 

    ... 

    this.checkReadyState = function (r) { 
     switch(this.readyState) { 
      case 4: 
      if(this.status == 200) { 
        // "this" refers to the XMLHttpRequest, 
        // but "that" refers your custom Ajax object 
        that.setResponse(this.responseText) 
      } 

     ... 
     } 
    } 
}