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)

Answer 1

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