XMLHttpRequest.onreadystatechange 与 addEventListener

Question

阅读 XMLHttpRequest 在 Google Chrome 扩展中的使用，我 运行 提出了一个问题。

MDN specifies using XMLHttpRequest.addEventListener, while 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 as a property of the XMLHttpRequest instance is supported in all browsers.

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

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.

由于 Apps Script Web Apps 很快将只支持现代浏览器（因为本机和模拟模式已弃用），您可以使用其中任何一种。

Answer 2

onreadystatechange 发射太多，您可能不需要听它。请改用 loadend (all cases including failure/abort), load（成功）、error、abort 事件。

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

Answer 3

此外，如果您可以控制浏览器 type/version，您可以使用传递给 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 事件列表。