Question

I have this piece of code that is supposed to work on Firefox 3.6 . The problem is that the variable this.xmlhttp that should be defined to STEP2 and used on STEP3 acts as if the code on STEP2 and STEP3 is on different variable environments even though I expect the 2 usages in server_request and callback_function to point to the same member object in the query_request_manager superobject defined lower . I have also created similar code without asynchronous callback at the time of server response that works as I intend it to work .

function Generic_server_request(server_location, server_file, client_callback_function)
{
    this.server_location = server_location;
    this.server_file = server_file;
    this.query_parameters = "";
    this.client_callback_function = client_callback_function;
    this.xmlhttp = undefined;
} // STEP1 should create xmlhttp as undefined

Generic_server_request.prototype.callback_function = function ()
{
    if (this.xmlhttp.readyState === 4 // STEP3 ERROR this.xmlhttp is undefined
    // I expected it to be the object defined at STEP2
    // but it's not so according to firebug
    // similar code without asynchronous callback
    // seems to work as I expect it to : no undefined error
    && this.xmlhttp.status === 200)
    {
        this.client_callback_function(
        this.xmlhttp.responseText);
    }
    else if (this.xmlhttp.status !== 200 || (this.xmlhttp.status === 200 && this.xmlhttp.readyState !== 2 && this.xmlhttp.readyState !== 3))
    {
        alert("readystate " + this.xmlhttp.readyState + " status " + this.xmlhttp.status);
    }
};

Generic_server_request.prototype.server_request = function ()
{
    this.xmlhttp = new XMLHttpRequest(); // STEP2 xmlhttp defined for use
    this.xmlhttp.onreadystatechange = this.callback_function; // server callback to prototype.callback
    this.xmlhttp.open("GET", this.server_location + this.server_file + this.query_parameters, true);
    this.xmlhttp.send();
};

Generic_server_request.prototype.set_query_parameters = function (query_parameters)
{
    this.query_parameters = query_parameters;
};

var query_request_manager;

function do_querry()
{
    server_querry("test");
}

function server_querry(input)
{
    if (query_request_manager === undefined)
    {
        query_request_manager = new Generic_server_request( // the definition
        "http://localhost/cgi-bin/", "querry_handler.php", status_text);
    }
    query_request_manager.set_query_parameters("?input=" + input);
    query_request_manager.server_request();
} // the usage

//end javascript

<input type="button" value="Enter" onclick="do_querry();" />

Answer 1

The issue is that this assignment:

this.xmlhttp.onreadystatechange = this.callback_function;

is assigning the function defined by this.callback_function to onreadystatechange, but is not binding its scope to your query_request_manager (meaning this will be bound to the global scope when the callback is executed, rather than the object you want). To remedy this, you can use a delegate function:

this.xmlhttp.onreadystatechange = (function () {
    var me = this;
    return function () {
       return me.callback_function.apply(me, arguments);
    }
}).call(this);