XMLHttpRequest 对象上缺少 onreadystatechange() [关闭]

Question

(function (send) {

     XMLHttpRequest.prototype.send = function () {

         console.log(this.onreadystatechange); //null
         send.apply(this, arguments);
     };

})(XMLHttpRequest.prototype.send);

为什么this.onreadystatechange 为空？根据this，它应该存在并且类型为function。

Answer 1

onreadystatechange 确实存在...这就是为什么它是null。如果它不存在，它将是undefined。这一切都取决于它是否已经设置。它显然已经是一个属性，因为它是 null...如果不是，它将是 undefined...或者至少 "onreadystatechange" in this 将是 false。

这是一个例子：

var a = new XMLHttpRequest();
a.onreadystatechange = function () {
};
a.send();

您的控制台将记录function。

如果你有：

var b = new XMLHttpRequest();
b.send();

您的控制台将记录 null。

这里有一个演示：http://jsfiddle.net/3XKx7/

（我清楚地省略了发送 AJAX 请求的其他步骤，只是为了解释）

我并不是要暗示null 和undefined 之间存在关系——我只是说当创建一个新的XMLHttpRequest 时，onreadystatechange 将在内部设置为null。是否将其设置为函数取决于您。

更新：

创建/发送 XHR 的正常方式是以下顺序：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {    // This and `open` could be flip-flopped
    // whatever
};
xhr.open("POST", url, true);
xhr.send("data=data");

我总是被告知/显示创建新的XMLHttpRequest，然后是设置onreadystatechange 和调用open 的任何顺序，但只有在这两个之后我才应该调用send。

所以，如果一直这样做，onreadystatechange（如果实际设置）将不是null，而是function。

既然您提到您使用的是 jQuery，我决定按照您的意愿覆盖 send 方法并进行 jQuery $.ajax 调用（而不是手动发送 XMLHttpRequest）来进行测试。这是我的测试 - http://jsfiddle.net/3XKx7/1/

为什么onreadystatechange 会是null 是没有意义的，因为 jQuery 必须 绑定到该事件才能知道请求何时完成及其状态。所以我决定看一下jQuery源代码。我发现他们称事物的顺序是：

xhr.open()
xhr.send()
xhr.onreadystatechange = function () {

};

这意味着当您重写 send 方法时，onreadystatechange 是 null，因为 jQuery 在调用 send 之前没有设置它。我不知道他们这样做的原因......可能是为了防止像你正在做的事情......但我从未听说过或看到使用这种约定。

所以你得到它作为null 的值的原因是因为jQuery 设置onreadystatechange 在 调用send。这意味着当您覆盖 send 并尝试访问 onreadystatechange 属性时，它尚未设置。

希望这是一个可以帮助您理解的示例：http://jsfiddle.net/dMP6q/16/

Answer 2

你应该自己设置它，当状态改变时会调用这个函数。就像其他事件处理程序一样，如document.onload、yourelement.onclick 等。

通常你会这样做

    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
              if (httpRequest.status === 200) {
                  // use httpRequest.responseText
              }
        }
    };
    httpRequest.open('GET', url);
    httpRequest.send();