Question

我正在编写一个Javascript库，其中包含以下代码：

构造函数（创建初始密钥并创建XMLHTTP请求对象）：

function hrce(key) {    
    var about = {
        Version: 0.1,
        Author: "AAA",
        Created: "Spring 2014",
        Updated: "March 2014"
    };

    if (key) {

        this.xhr = "";
        this.xhrdata = "";
        this.xhrmethod = "";
        this.xhrurl = "";
        this.xhrquery = "";

        //init with the current avaliable information
        this.key = key;
        this.protocol = "http:" === document.location.protocol ? "http://" : "https://";
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            this.xhr = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        return this;
    } else {
        // No 'id' parameter was given, return the 'about' object
        return about;
    }
};

以下是我的图书馆功能：

hrce.prototype = {
    load: function() {
        if (this.xhr && this.xhr != "" && this.key && this.key != "") {
            this.xhrdata = [{"access_key": this.key}];
            this.xhrurl = this.protocol + "localhost/hrce/v1/action/hsio/";
            this.xhr.onreadystatechange = this.initilizer();
            this.xhr.open("POST", this.xhrurl, true);
            this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xhrquery = "access_key=" + this.key;
            this.xhr.send(this.xhrquery);
        }
        return this;
    },
    initilizer: function() {
        if (this.xhr.readyState == 4 && this.xhr.status == 200)
        {
            console.log(this.xhr.responseText);
        }
    }
};

现在，如果我调用例如：hrce("f07c7156").load(); Ajax调用成功，但它没有在load prototype函数中调用this.xhr.onreadystatechange = this.initilizer();调用。什么错了？

Answer 1

您没有将该功能用作构造函数。
您没有分配绑定函数或将闭包传递给onreadystatechange。

对于您必须决定的第一个，您希望函数返回一个对象，还是希望该函数作为构造函数工作。如果你想要一个构造函数，那么请看下面的示例代码（我将函数名大写为构造函数应该以大写字母开头）。

对于第二个，你必须传递一个闭包或使用bind，我在下面的示例中使用了一个闭包。

function Hrce(key) {
  var about = {
    Version: 0.1,
    Author: "AAA",
    Created: "Spring 2014",
    Updated: "March 2014"
  };

  if (key) {
    this.xhr = "";
    this.xhrdata = "";
    this.xhrmethod = "";
    this.xhrurl = "";
    this.xhrquery = "";

    //init with the current avaliable information
    this.key = key;
    this.protocol = "http:" ===
            document.location.protocol ? "http://" : "https://";
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      this.xhr = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //constructor funcitons do not need to return this
    return this;
  } else {
    // No 'id' parameter was given, return the 'about' object
    return about;
  }
}
;

Hrce.prototype = {
  load: function() {
    if (this.xhr && this.xhr != "" && this.key && this.key != "") {
      this.xhrdata = [{"access_key": this.key}];
      this.xhrurl = this.protocol + "localhost/hrce/v1/action/hsio/";
      //note that initilizer returns a function that has a closure
      //  scope with the current instance
      this.xhr.onreadystatechange = this.initilizer(this);
      this.xhr.open("POST", this.xhrurl, true);
      this.xhr
        .setRequestHeader("Content-type"
        , "application/x-www-form-urlencoded");
      this.xhrquery = "access_key=" + this.key;
      this.xhr.send(this.xhrquery);
    }
    return this;
  },
  initilizer: function(me) {
    //returning a function used as closure
    // the variable me is the current instance of Hrce
    return function(){
      if (me.xhr.readyState == 4 && me.xhr.status == 200)
      {
        console.log(me.xhr.responseText);
      }
    }
  }
};

var connector = new Hrce("f07c7156");
connector.load();

有关构造函数，原型以及this变量代表的内容的更多信息in this answer。

Ajax没有在Javascript库中获取响应文本

1 个答案: