building a simple ajax class in javascript

Question

I am trying to make a simple ajax class for a chrome extension. I get an undefined error Uncaught TypeError: Cannot read property 'readyState' of undefined when I try to run the code. What seems to cause this issue?

function ajax(arguments, callback) {
    this.xhr = new XMLHttpRequest();
    this.xhr.open(arguments.requestType, arguments.requestUrl + arguments.requestParameters, true);
    this.xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            requestedData = JSON.parse(this.responseText);
            callback(requestedData);
        }
    }
    this.xhr.send();
}

var ajaxRequest = new ajax({ 
    requestType: 'GET',
    requestUrl: 'http://ezswag.com/bots/terms.php',
    requestParameters: ' ',
    }, function(json) {
        //console.log(json);  => json {apple: "red", cheery: "red"}
        return json;
    });

    console.log(ajaxRequest);

(Updated code, and working)

Quentin · Accepted Answer · 2013-01-04 14:10:33Z

4

The value of this depends on how the function is being called.

When you call the ajax function as a constructor (note that convention says you should start constructor function names with a capital letter) this is the instance being created.

In the readyState function, this is the XMLHttpRequest object.

All your references to this.xhr inside the readyState function should be simply this

answered Jan 4, 2013 at 14:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Daniel Over a year ago

thank you. I updated the code with a callback. Is there a way to access the json data from the callback outside the function from the variable ajaxRequest ?

Jerome Cance · Accepted Answer · 2013-01-04 14:09:24Z

1

you can't use this.xhr inside the function. This does a reference to the current function and not what do you think.

Use a temp variable like this :

var self = this;

this.xhr.onreadystatechange = function() {
    if (self.xhr.readyState === 4 && self.xhr.status === 200) {
        requestedData = JSON.parse(self.xhr.responseText);
        console.log(requestedData);
    }
}

answered Jan 4, 2013 at 14:09

Jerome Cance

8,20312 gold badges55 silver badges107 bronze badges

Comments

hvgotcodes · Accepted Answer · 2013-01-04 14:09:41Z

1

In your onreadystatechange implementation, this is not what you think it is. You need to capture the scope of your ajax function and use that in your callbacks.

function ajax(parameter) {
    var that = this;
    this.xhr = new XMLHttpRequest();
    this.xhr.open(parameter.requestType, parameter.requestUrl + parameter.requestParameters, true);
    this.xhr.onreadystatechange = function() {
        if (that.xhr.readyState === 4 && that.xhr.status === 200) {
            requestedData = JSON.parse(that.xhr.responseText);
            console.log(requestedData);
        }
    }
    this.xhr.send();
}

answered Jan 4, 2013 at 14:09

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

1 Comment

Šime Vidas Over a year ago

Why not just this instead of that.xhr inside the callback?

Collectives™ on Stack Overflow

building a simple ajax class in javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related