0

我正在这里的 html5 Rocks 网站上关注 XMLHttpRequest2 的指南。我也在学习如何在 JavaScript 中创建类。一切似乎都是正确的，但是当我在 jsfiddle 上测试这段代码时，它会从 if 语句中返回两次“错误”，然后响应返回未定义。我怀疑这是班级的问题？

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

1 回答 1

0

我在这里修改了你的代码：http: //jsfiddle.net/FpskW/

您的代码中有两个问题：

  1. 在初始化中，this.xhr.onload获取函数执行的值proccess，而不是函数本身。this.xhr.onload需要一个函数，()最后proccess你正在执行代码，而不是委托。

  2. 如果你这样做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 中，我们没有类，它们是原型。:)

于 2013-01-08T08:05:13.880 回答