The value of 'this' in a callback function

Question

I have this code for doing an ajax request to a webservice:

var MyCode = {
    req: new XMLHttpRequest(), // firefox only at the moment

    service_url: "http://url/to/Service.asmx",

    sayhello: function() {
        if (this.req.readyState == 4 || this.req.readyState == 0) {
            this.req.open("POST", this.service_url + '/HelloWorld', true);
            this.req.setRequestHeader('Content-Type','application/json; charset=utf-8');
            this.req.onreadystatechange = this.handleReceive; 
            var param = '{}';
            this.req.send(param);
        }
    },

    handleReceive: function() {
        if (this.req.readyState == 4) {
            // todo: using eval for json is dangerous
            var response = eval("(" + this.req.responseText + ")");
            alert(response);
        }
    }
}

It is called with MyCode.sayhello() of course.

The problem with it is that "req is not defined" at the first line in the handleReceive function. It does get called 4 times, so I know the code above sends the request to the server.

How can I solve this?

Should be this.responseText .. not this.req.responseText (since 'this' refers to the XHR object) — James
– James, Commented May 8, 2009 at 11:40

cgp · Accepted Answer · 2009-05-08 11:48:12Z

5

Classic closure problem. When you get the callback, the closure actually refers already to the HTTP object.

You can do the following as someone suggests:

var that = this;
this.req.onreadystatechange = function() { this.handleReceive.apply(that, []); };

OR just do the following:

var that = this;
this.req.onreadystatechange = function() { that.handleReceive(); };

edited May 8, 2009 at 11:48

answered May 8, 2009 at 11:31

cgp

41.4k12 gold badges107 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tominator Over a year ago

Thanks! For the record: working code is: handleReceive: function() { if (this.readyState == 4) { var response = eval("(" + this.responseText + ")"); alert(response); } }

Ikke · Accepted Answer · 2009-05-08 11:39:13Z

2

You can solve that by makeing a variable refering to this in MyCode. Like

var MyCode = {
    req: new XMLHttpRequest(), // firefox only at the moment

    self = this

    ...
}

Then you can refer to self in stead of this.

answered May 8, 2009 at 11:39

Ikke

102k23 gold badges101 silver badges121 bronze badges

Comments

Greg · Accepted Answer · 2009-05-08 11:39:16Z

0

Change this:

this.req.onreadystatechange = this.handleReceive;

to this:

var self = this;
this.req.onreadystatechange = function() { self.handleReceive(); }

This creates a closure that should fix your problems.

answered May 8, 2009 at 11:39

Greg

323k55 gold badges378 silver badges338 bronze badges

Comments

xnhy · Accepted Answer · 2009-05-08 11:41:36Z

0

you should be able to make it work by changing

this.req.onreadystatechange = this.handleReceive;

to

var that = this;
this.req.onreadystatechange = function() { this.handleReceive.apply(that, []); };

Function.prototype.apply can be used to call a function while explicitly this and the function's arguments.

answered May 8, 2009 at 11:41

xnhy

Collectives™ on Stack Overflow

The value of 'this' in a callback function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related