31

我正在编写一个 AJAX 网络应用程序，它使用 Comet/Long Polling 来保持网页最新，我注意到在 Chrome 中，它将页面视为一直在加载（选项卡的图标一直在旋转）。

我认为这对于 Google Chrome + Ajax 来说是正常的，因为即使是 Google Wave 也有这种行为。

那么今天我注意到 Google Wave 不再保持加载图标旋转，有人知道他们是如何解决这个问题的吗？

这是我的ajax调用代码

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);
4

4 回答 4

36

我无耻地窃取了 Oleg 的测试用例，并对其进行了一些调整以模拟长轮询。

load.html：

<!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php：

<?php
  sleep(5);
?>
<b>OK!</b>

结果很有趣：在 Firefox 和 Opera 中，在 XMLHTTPRequests 期间没有显示加载指示符。Chrome 让它旋转......我怀疑 Google Wave 不再使用长轮询（但是，例如，每 X 秒轮询一次，以节省资源），但我无法测试它，因为我没有帐户.

编辑：我想通了：在加载中添加一点延迟（test.php可以尽可能小）后，加载指示器在加载后停止load.html：

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

不知何故，正如在另一个答案的评论中所证实的那样，当浏览器重新获得控制权以完成页面呈现时，指示器停止旋转。另一个优点是不能通过按 中止请求Esc。

于 2010-04-26T13:00:02.360 回答
2

对不起我的一般回答，但如果你想要一个更独立于浏览器的程序，你应该使用 jQuery 或其他你喜欢的库，而不是低级 XMLHttpRequest 和 ActiveXObject("Microsoft.XMLHTTP")。

编辑： 我创建了两个非常简单的 HTML 文件：test.htm 和 load.htm 并放置在网站上的同一目录中（试试这个 URL http://www.ok-soft-gmbh.com/jQuery/load /load.htm )。我看不到您在问题中描述的效果。将此文件与您的示例进行比较，您将解决您的问题。

加载.htm：

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

测试.htm:

<b>OK!</b>
于 2010-04-24T09:17:00.893 回答
0

我不确定 jQuery 或 Ajax，但我在使用 Snippet Manager 将片段插入 Ace 编辑器时遇到了类似的问题。在页面加载时将代码插入编辑器时，页面似乎永远不会加载 - 选项卡图标会永远旋转。.setTimeout()只是工作非常不一致。当页面加载速度非常快时它会起作用，但当页面加载速度较慢时则不起作用。那可能是因为我没有包装任何东西$(document).ready()——我只是在文档正文的末尾调用我的代码。

这是我为永远旋转的选项卡图标问题找到的非 jQuery 解决方案：

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

就我而言，// load whatever是：

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});
于 2016-07-18T23:29:51.800 回答
-3

使用这个功能

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};
于 2010-04-24T09:20:49.147 回答