停止浏览器“厄运的悸动”；加载 comet/服务器时推送 XMLHttpRequest

Question

（这个问题类似于这个，但它是为了使用 XMLHttpRequest 而不是 Comet 的 iframe。）

我正在启动一个异步长轮询，如下所示：

var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.send();

如果我在 < 中执行此操作/code> 在头部，它将导致文档永远保持加载。 （我正在 Mac OS X 和 iPhone 上的 Safari 中对此进行测试，它是我需要支持的唯一浏览器）。

使用 DOMContentLoaded 或 load 事件将不起作用。

使用具有足够大延迟的 setTimeout 是可行的。 0 不会，1000 会，100 有时会，有时不会。我对此感到不舒服。

我发现有效的唯一方法是两者的结合：

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.send();
    }, 0);
});

我想这暂时解决了问题，但我仍然担心它将来会崩溃。 // 编辑：这不会工作也可靠。

有谁知道更可靠的方法吗？

Answer 1

我不确定，但似乎如果浏览器显示它仍在下载，那么这是完全正确的 - 这不是彗星编程的本质吗？服务器仍在发送未缓冲的内容，当该内容在 JavaScript 块中传输时，它会被执行，从而允许服务器将事件推送到客户端浏览器。

在 Ajax 早期（例如在 IE6 上，XMLHttpRequest 是一个单独的 ActiveX 对象），我希望浏览器不知道它仍在等待。

但在 Safari 4、Chrome、FX3.5 和所有现代浏览器中，XMLHttpRequest 是内置的 - 它知道它仍在等待服务器仍然流式传输其内容，就像使用和 < code>

简而言之 - 我希望任何 Comet 方法都能显示浏览器仍在下载，因为它确实在下载。我希望您找到的任何解决方法都能在未来的版本中得到修复，因为 Comet 本质上是一种让服务器推送模型正常工作的 hack。

然而，他们已经开始在 HTML 5 中构建真正的服务器推送支持。

移动 Webkit 是否支持 HTML 5 草案event-source 标记了吗？如果是这样，您可以尝试一下。

然后你会得到这样的东西：

<!-- new HTML 5 tag supporting server-push -->
<event-source src="http://myPushService.com" id="service">

<script type="text/javascript">

    function handleServiceEvent(event) {
        // do stuff
    }

    // tell browser to fire handleServiceEvent in response to server-push
    document.getElementById('service').addEventListener('event name', handleServiceEvent, false);
</script>

Answer 2

当你说：

...这将导致文档永远持续加载。

你这到底是什么意思？你的意思是进度条永远不会结束吗？或者实际文档甚至不完全可见？ AJAX 请求不太可能阻止整个文档加载，但无论如何...

情况 1：进度条永远不会完成

这可能是由于 AJAX 请求永远不会完成造成的。您是否尝试过在 Firebug 控制台中查看 AJAX 请求？它将向您显示发出的请求和服务器的响应。我将从这里开始只是为了确保服务器正在发回一些东西。

情况 2：文档元素未完全加载/可见

您可以尝试将

当您执行此操作时，DOM 树在脚本执行之前就已完全加载，您不必等待“domready”或“onload”触发。另外，请记住，正在加载的 DOM tree 并不意味着 DOM content （例如图像）已完全加载（您需要等待“onload”）当然）

无论哪种情况，我都会尝试将脚本放在 之前。标签，这样 DOM 骨架就有机会被构建。

旁注：

您是否使用任何类型的调试器查看页面？ （Firebug、Webkit 检查器）。如果您打开控制台并且遇到 JavaScript 错误，Webkit Inspector 实际上会停止整个文档的处理。您在控制台中看到任何 JavaScript 错误吗？如果关闭调试器，页面会加载吗？

Answer 3

您可以尝试使用 load 事件而不是 DOMContentLoaded 事件吗？它应该会有所不同，因为它仅在页面完全加载时被调用。

var xhr;
document.addEventListener('load', function () {
    xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.send();
});

这应该有效。不过，我不经常使用Comet，所以目前我没有任何方法来测试它。

编辑：抱歉，刚刚看到马特已经说过了。

Answer 4

看起来在某些浏览器中，open(...)方法默认同步发送ajax请求，如果不指定第三个参数？尝试：

xhr.open('POST', url, true);

显式使调用异步。