javascript - IE，XDomainRequest 并不总是有效

Question

我正在尝试在 IE 上进行跨域。

我使用 XDomainRequest，并为所有事件(onerror、onload、onprogress 和 ontimeout)植入日志记录以监控进度。

它有时会工作，但并非总是如此(一台计算机，IE9，相同的站点，相同的请求，3 或 4 个中有 1 个工作；另一台计算机，IE8，可能 2 个工作中有 1 个)。我没有从日志记录中得到任何有用的信息，因为没有任何触发。

我很困惑。有没有IE调试工具？为什么有时 XDomainRequest 不起作用？

非常感谢冠宁

Answer 1

XDomainRequest 对象中至少有两个重大错误，一个影响 IE8，另一个影响 IE9。

问题 1 - 垃圾收集

在 Internet Explorer 8 中，在调用 send() 但尚未完成后，XDomainRequest 对象会错误地进行垃圾回收。此错误的症状是开发人员工具的网络跟踪显示请求“已中止”，并且没有调用任何错误、超时或成功事件处理程序。

典型的 AJAX 代码看起来有点像这样:

function sendCrossDomainAjax(url, successCallback, errorCallback) {
  var xdr = new XDomainRequest();
  xdr.open("get", url);
  xdr.onload = function() { successCallback(); }
  xdr.onerror = function() { errorCallback(); }
  xdr.send();
}

在此示例中，包含 XDomainRequest 的变量超出范围。如果用户不走运，IE 的 Javascript 垃圾收集器将在 send() 异步完成之前运行，请求将被中止。即使可以将 XDomainRequest 对象捕获到 OnLoad 和 OnError 事件处理程序中，IE 也会看到整个对象图中没有对它的引用，并将对其进行垃圾回收。 IE 应该“固定”对象直到完成。

您会注意到互联网上的许多其他讨论都提到在 xdr.send(); 周围放置一个 setTimeout；调用将以某种方式“解决”神秘的 XDomainRequest 失败。这是一个错误，完全不正确。所发生的一切是 XDomainRequest 对象被“固定”到 setTimeout 闭包中，并且不会很快受到垃圾收集的影响。它不能解决问题。

要正确解决此问题，请确保 XDomainRequest 存储在全局变量中，直到请求完成。例如:

var pendingXDR = [];

function removeXDR(xdr) {
  // indexOf isn't always supported, you can also use jQuery.inArray()
  var index = pendingXDR.indexOf(xdr);
  if (index >= 0) {
    pendingXDR.splice(index, 1);
  }
}

function sendCrossDomainAjax(url, successCallback, errorCallback) {
  var xdr = new XDomainRequest();
  xdr.open("get", url);

  xdr.onload = function() {
    removeXDR(xdr);
    successCallback();
  }

  xdr.onerror = function() {
    removeXDR(xdr);
    errorCallback();
  }

  xdr.send();
  pendingXDR.push(xdr);
}

问题 2 - 缺少 OnProgress 事件处理程序

第二个问题是已知的。 Internet Explorer 9 在 XDomainRequest 对象中引入了回归，其中缺少(空)OnProgress 事件处理程序会导致请求在尝试报告进度信息时中止。

对于快速请求，IE9 从不尝试调用 OnProgress 事件处理程序并且请求成功。某些情况下，例如当 IE 由于太多打开的连接、网络延迟、服务器响应缓慢或大请求或响应负载而延迟请求时，将导致 IE9 开始报告进度信息。

IE9 尝试调用事件处理程序而不首先检查它是否存在，并且 XDomainRequest 对象崩溃并在内部销毁自身。

要解决此问题，请始终确保将事件处理程序附加到 OnProgress。考虑到该错误，防御性地向对象的所有事件添加事件处理程序并不是一个坏主意。

var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.onprogress = function() { };
// regsister other event handlers

其他问题

我似乎报告说，如果在调用 .open() 之前注册了事件处理程序，则 XDomainRequest 可能会失败。同样，从防御的 Angular 来说，在 .open() 和 .send() 调用之间注册它们并不是一个坏主意。我还没有亲自验证这是否是一个真正的错误。

如果您遇到“拒绝访问”错误，那是因为 XDomainRequest 不允许目标页面和主机页面之间存在不匹配的 URI 方案。换句话说，尽量不要从 HTTPS 页面调用 HTTP 资源。

当心互联网上的大多数 XDomainRequest 库。我查看了大多数流行的插件，例如各种 jQuery AJAX 传输插件(包括此处另一个答案中链接的插件)。

当然，XDomainRequest 受制于所有正常的 limitations and constraints .这些本身并不是错误，并且与替代方案(iframe kludges、Flash crossdomain.xml 传输)相比，它们并没有那么坏。

我已经在公共(public)领域许可下发布了一个新的 jQuery AJAX XDomainRequest 传输:https://github.com/ebickle/snippets/tree/master/javascript/xdomainrequest