XMLHttpRequest.onreadystatechange与addEventListener

Question

阅读XMLHttpRequest以在Google Chrome扩展程序中使用，我遇到了一个问题。

MDN specifies using XMLHttpRequest.addEventListener，而他们的例子中有Google uses XMLHttpRequest.onreadystatechange。

在向Google Apps脚本发出GET请求时，这两种方法之间存在偏好吗？我是异步Javascript的新手，在此之前我刚刚在GAS工作。

Answer 1

首选项是浏览器兼容性。来自MSN上的XMLHttpRequest API文档。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties

  

onreadystatechange作为XMLHttpRequest实例的属性在所有浏览器中都受支持。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Events

  

除了将XMLHttpRequest属性设置为处理函数之外，更新的浏览器（包括Firefox）还支持通过标准addEventListener API监听on*事件。

作为应用程序脚本Web应用程序很快将仅支持现代浏览器（因为本机和模拟模式已被折旧），您可以使用它们。

Answer 2

onreadystatechange发射太多，你可能不需要听它。使用loadend（所有情况包括失败/中止），load（成功），error，abort事件。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest。

Answer 3

此外，如果您可以控制浏览器类型/版本，则可以使用传递给onreadystatechange函数的对象执行polyfill：

var oReq = new XMLHttpRequest();
// This part for modern browsers
oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);
// This part for old ones
oReq.onreadystatechange = functionSwitch;

其中functionSwitch将调用正确的函数（将在updateProgress，transferComplete，...之间进行选择），以避免双重代码。

我见过人们使用的是Windows XP，可能任何addEventListener都无法使用。看看：addEventListener Compatibility。我没有通过addEventListener找到特定的xmlhttprequest事件列表。