31

Comet/Long Polling を使用して Web ページを最新の状態に保つ AJAX Web アプリを作成していますが、Chrome でページが常に読み込まれているかのように処理されることに気付きました (タブのアイコンが回転し続けます)。

Google Waveでもこの動作があったので、Google Chrome + Ajaxではこれが普通だと思っていました。

今日、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

私は恥知らずにオレグのテストケースを盗み、ロングポーリングをシミュレートするために少し調整しました。

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は回転させます...GoogleWaveはもう長いポーリングを使用していないと思います（たとえば、リソースを節約するためにX秒ごとにポーリングします）が、アカウントを持っていないため、テストできません。

編集：そして私はそれを理解しました：ロードの少しの遅延を追加した後test.php、それは可能な限り小さくすることができます、ロードされた後にロードインジケータは停止しload.htmlます：

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

どういうわけか、別の回答のコメントで確認されているように、ブラウザが制御を取り戻してページのレンダリングを終了すると、インジケータの回転が停止します。もう1つの利点は、。を押しても要求を中止できないことEscです。

于 2010-04-26T13:00:02.360 に答える
2

私の一般的な回答で申し訳ありませんが、ブラウザに依存しないプログラムが必要な場合は、低レベルの XMLHttpRequest と ActiveXObject("Microsoft.XMLHTTP") の代わりに、jQuery またはその他のお気に入りのライブラリを使用する必要があります。

編集: test.htm と load.htm という 2 つの非常に単純な HTML ファイルを作成し、Web サイトの同じディレクトリに配置します (この 1 つの 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>

test.htm:

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

jQuery や Ajax についてはよくわかりませんが、Snippet Manager を使用して Ace Editor にスニペットを挿入する際にも同様の問題がありました。ページが読み込まれているときにエディタにコードを挿入すると、ページがまったく読み込まれないように見え、タブ アイコンが永久に回転していました。.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 に答える