用javascript构建一个简单的ajax类

我试图为chrome扩展创建一个简单的ajax类。我得到一个未定义的错误

uncaughttypeerror:当我试图运行代码时，无法读取未定义的属性'readyState'。是什么导致了这个问题

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

（更新的代码，正在运行）
您不能在函数中使用this.xhr。这是对当前函数的引用，而不是您的想法

使用如下所示的临时变量：

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

不能在函数中使用this.xhr。这是对当前函数的引用，而不是您的想法

使用如下所示的临时变量：

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

在您的
onreadystatechange
实现中，
这个
不是您认为的那样。您需要捕获
ajax
函数的作用域，并在回调中使用它

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

在您的
onreadystatechange
实现中，
这个
不是您认为的那样。您需要捕获
ajax
函数的作用域，并在回调中使用它

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

this
的值取决于调用函数的方式

当您将
ajax
函数作为构造函数调用时（请注意，惯例要求您应该以大写字母开头构造函数函数名）
这就是正在创建的实例

在
readyState
函数中，
this
是XMLHttpRequest对象

在
readyState
函数中对
this.xhr
的所有引用都应该是
this
this
的值取决于调用函数的方式

当您将
ajax
函数作为构造函数调用时（请注意，惯例要求您应该以大写字母开头构造函数函数名）
这就是正在创建的实例

在
readyState
函数中，
this
是XMLHttpRequest对象

您在
readyState
函数中对
this.xhr
的所有引用都应该是
this
为什么不在回调中使用
this
而不是
this.xhr
呢？为什么不在回调中使用
this
而不是
this.xhr
呢？谢谢。我用回调更新了代码。是否有方法从变量
ajaxRequest
从函数外部的回调访问json数据？谢谢。我用回调更新了代码。是否有方法从变量
ajaxRequest
从函数外部的回调访问json数据？