可以用 xhr.onload 替换 xhr.onreadystatechange 来进行 AJAX 调用吗？

Question

我只需要支持主流的现代浏览器（IE10+、FF、Chrome、Safari）

我可以做这个替换，因为我想简化我的代码库：

发件人：

xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            o.callback(xhr.responseText);
        } else {
            return false;
        }
    } else {
        return false;
    }
};

收件人：

xhr.onload = function (test) {
    o.callback(xhr.responseText);
};

我觉得MDN documentation在这方面不是很清楚。

澄清：

我选择不使用框架。

Answer 1

您可以通过这样做来清理您的第一个示例

xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        o.callback(xhr.responseText);
    } else {
        return false;
    }
};

注意，如果您正在使用 else 语句做某事，您可能还想使用 this.status === 200 检查 onload。虽然，如果你正在检查错误，还有onerror，你可以写类似

xhr.onerror = function(){
    console.log('Error: Do something else...');
}

Answer 2

由于最初的提问者说“我只需要支持主要的现代浏览器（IE10+、FF、Chrome、Safari）”，显然onload、onerror 等是要走的路。此外，截至今天，onreadystatechange 几乎已经过时，因为您显然不会支持它仅支持 onreadystatechange 的任何旧东西。

总而言之，忘记onreadystatechange。

Answer 3

在 MDN 文档中，他们声明了以下内容

活动

onreadystatechange 作为 xhr 对象上的属性在所有版本中均受支持 浏览器。

从那时起，许多额外的事件处理程序在 各种浏览器（onload、onerror、onprogress 等）。这些是 在 Firefox 中支持。特别是，请参阅 nsIXMLHttpRequestEventTarget 并使用 XMLHttpRequest。

更新的浏览器，包括 Firefox，也支持收听 此外通过标准 addEventListener API 的 XMLHttpRequest 事件 将 on* 属性设置为处理函数。

所以我认为你可以假设 onreadystatechange 是要走的路，而 onload 是一个可以在浏览器支持的情况下使用的附加功能。 @mr.VVoo 答案是正确的，如有疑问请坚持使用 w3c。

Answer 4

也许你看看this one 和W3C: XMLHttpRequest 如果你的浏览器支持xhr.onload 是一样的。需要 XMLHttpRequest 2)

如果 xhr.onload 不存在，您还可以编写一个模拟 xhr.onload 的包装函数。 （我认为您需要覆盖XMLHttpRequest.prototype.onload = function(args){//calling onreadystatechanges somehow}）。如果您只支持使用 xhr.onload 的现代浏览器 - 最好的解决方案是使用 framework（如 jquery 或 mootools 提供包装功能。