Question

我正在关注html5 rocks网站here上的XMLHttpRequest2指南。我也在学习如何用JavaScript创建类。一切似乎都是对的，但是当我在jsfiddle上测试这个代码时，它会从if语句返回两次“error”，然后响应返回undefined。我怀疑这是班上的问题吗？

function Ajax(parameters) {
    this.type = parameters.type;
    this.url = parameters.url;
    this.format = parameters.format;
    this.send = parameters.send;
    this.xhr = new XMLHttpRequest();
}

Ajax.prototype.initialize = function () {
    this.xhr.open(this.type, this.url, true);
    this.xhr.responseType = this.format;
    this.xhr.onload = this.process();
    this.xhr.send(this.send);
};

Ajax.prototype.process = function () {
    var self = this;
    if (self.xhr.readyState === 4 && self.xhr.status === 200) {
        console.log(JSON.parse(self.xhr.response));
    } else {
      console.log("error");
    }
};

var test = new Ajax({type:"GET", url:"http://ip.jsontest.com/", format:"text", send:""});

test.initialize();

console.log(test.process());

Answer 1

我在此处修改了您的代码：http://jsfiddle.net/FpskW/

您的代码中存在两个问题：

在初始化时，this.xhr.onload获得proccess函数执行的值，而不是函数本身。 this.xhr.onload需要一个函数，并且()在proccess的末尾执行代码，而不是委托。
如果您执行this.xhr.onload = this.proccess，则在没有特定上下文的情况下传递proccess函数。这样，当XHR对象执行该函数时，该函数将具有XHR对象的上下文。执行this函数时proccess的值将是XHR对象，而不是您的对象。因此，当xhr对象尝试执行if (self.xhr.readyState === 4..时，它会发现XHR对象没有名为xhr的属性。

您可以这样做：

    Ajax.prototype.initialize = function () {
      this.xhr.open(this.type, this.url, true);
      this.xhr.responseType = this.format;

      // we capture the context of the Ajax object
      var self = this;

      // and we create a lambda that executes the 'proccess' function always with the context
      // of the Ajax object.
      this.xhr.onload = function() {
        self.process();
      }

      this.xhr.send(this.send);
    };

就是这样。

注意：在Javascript中，我们没有类，它们是原型。：）

获取XMLHttpRequest2类的请求返回未定义的响应

1 个答案: