Using My Own Callback with an HttpRequest Object

Question

I'm writing an Http Request without the use of a library (another script was having conflits...)

But Im having trouble with the scope of my object. Below is the calling script, then the Ajax_Request object follows.

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)
  }

  ...

 }

  }
}

I'm trying to set the response to a property so my calling object can work with it. But when I try to call this.setResponse(), I get an error that it's undefined. How can I tie the onreadystatechange callback to my program properly?

The script otherwise returns the data properly, and I could simply output it right there, but I need a bit more flexibility.

Thanks Rich

Answer 1

I'm not sure whether this is the problem, but you shouldn't be referring to Ajax_Request within the constructor. Use this instead. (this refers to the actual object instance—Ajax_Request refers to the object constructor.)

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

In this.checkReadyState, try changing this.setResponse(this.responseText) to this.setResponse(this.request.responseText);.

Answer 3

This is happening to you because inside the checkReadyState function this actually represents the XMLHttPRequest instance not you Ajax_Request object, thus this.setResponse is undefined. In order to reference your object´s method you have to use a little trick: 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)
            }

        ...
        }
    }
}