Encapsulating ajax call fails probably because of object visibility

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();" />

Answers


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

Need Your Help

Unable to open excel using ApachePOI - Getting Exception

java apache-poi

While trying to open an excel using ApachePOI I get

PHP open another webpage with POST data

php post redirect header

I'm new to PHP and I'm trying to do something that may be bad practise and may well be impossible. I'm basically just hacking something together to test my knowledge and see what PHP can do.

Grammar for Linux command line with yacc and lex

linux ubuntu grammar yacc lex

I'd like to write down a formal grammar for describing the command line usage of some GNU/Linux tools.