XMLHttpRequest in Javascript Class

Question

I have defined a class and I am trying to fetch a HTML file using XMLHttpRequest and assign the response to the variable in class but it won't change.

function UIHandler(){
    this.notificatoin = 0;
    this.msgBoxMe = 1;
    this.msgBoxThem = 2;
    this.getMsgBox(1);
    this.getMsgBox(2);
}

UIHandler.prototype.getMsgBox = function(me){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){//here we have the template in xhr.responseText
            this.msgBoxMe = xhr.responseText;
        }
    };
    switch(me){
        case 1:
            xhr.open("GET" , "chat/views/me.html" , true);
            break;
        case 2:
            xhr.open("GET" , "chat/views/them.html" , true);
            break;
    }
    xhr.send();
};

I assign the response in the onreadystatechange event handler to the this.msgBoxMe variable but it still has the value 1.

Side note: JavaScript doesn’t have classes, see Prototype-based programming. — bfontaine
– bfontaine, Commented Jul 12, 2014 at 10:18

Marcel Pfeiffer · Accepted Answer · 2014-07-12 10:18:23Z

6

The this variable in your callback xhr.onreadystatechange doesn't point to the object.

A workaround is to define an additional variable (instance in the following example) that holds the object:

function UIHandler() {
    this.notificatoin = 0;
    this.msgBoxMe = 1;
    this.msgBoxThem = 2;
    this.getMsgBox(1);
    this.getMsgBox(2);
}

UIHandler.prototype.getMsgBox = function(me){
    var instance = this;   // points to object

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
         if(xhr.readyState == 4){ //here we have the template in xhr.responseText
              instance.msgBoxMe = xhr.responseText;
         }
    };
    switch(me){
         case 1:
              xhr.open("GET" , "chat/views/me.html" , true);
              break;
         case 2:
              xhr.open("GET" , "chat/views/them.html" , true);
              break;
    }
    xhr.send();
};

answered Jul 12, 2014 at 10:18

Marcel Pfeiffer

1,06811 silver badges12 bronze badges

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

3 Comments

Saeed Entezari Over a year ago

thanks. i appreciate it very much. works like a charm!

Saeed Entezari Over a year ago

but what does this refer to then?

Marcel Pfeiffer Over a year ago

@SNt Javascript scopes are a messy thing in my mind. It depends on the individual callback where this points to. I don't know what it is in this case. But debugging or console.log(this); will give you a hint.

Collectives™ on Stack Overflow

XMLHttpRequest in Javascript Class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related