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

Posted 2023-02-27

【中文标题】可以用 xhr.onload 替换 xhr.onreadystatechange 来进行 AJAX 调用吗？

【英文标题】：Can one replace xhr.onreadystatechange with xhr.onload for AJAX calls?

【发布时间】：2013-02-03 11:21:32

【问题描述】：

我只需要支持主流的现代浏览器（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在这方面不是很清楚。

澄清：

我选择不使用框架。

【问题讨论】：

它们在功能上是等效的，因为如果请求失败，您什么也不做。

@elias94xx “试一试”在这种情况下是不可行的。必须在所有主要浏览器的所有版本上试用它，但仍然无法保证支持。此外，一些浏览器实际上可能不支持他们声称支持的规范，因此在这里查找它也可能不合理。

Is onload equal to readyState==4 in XMLHttpRequest?的可能重复

澄清 = +1 m8

【参考方案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...');

【参考方案2】：

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

总而言之，忘记onreadystatechange。

【讨论】：

在 2017 年，这是相当准确的。另见：***.com/a/19247992/1367414

【参考方案3】：

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

活动

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

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

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

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

【参考方案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 提供包装功能。

【讨论】：

xhr2 受 IE10+ 支持，当然还有其他 3 个。caniuse.com/#search=xhr2

更新：现在是 2017 年 - 既然 ES6 存在，框架是可选的 >_

如果两者是等价的，那这篇MDN文章为什么要嵌套这两者：developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…