1

小さなWebアプリケーションを開発しています。サーバー側のコードはほぼ完成しましたが、クライアント側の JavaScript に苦労しています。

毎秒更新されるhtmlファイルがあります。このファイルは完全に静的であり、ログの目的でのみ使用します。

アイデアはほとんど同じことを行うことですが、クライアント側で自動更新が行われます。

そのために、ajax を使用したデータベース ポーリングを使用したいと考えています。

ここで最初のバージョンを実装しました。これは、同じ html ファイルを単純に出力し、毎秒リロードすることになっています。

問題は、JavaScript コンソールのクライアント側にエラーが表示されていなくても、更新されないことです。ファイルが正しく読み込まれ、div が更新されない理由が見当たらないため、ファイルが見つかりました。

これが私のコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Using Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        (function worker() {
          $.ajax({
            url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
              $('.text').html(data);
            },
            complete: function() {
              setTimeout(worker, 1000);
            }
          });
        })();
    </script>
</head>
<body>
    <div class="text">
        To be loaded <br />
    </div>
</body>
</html>

ローカルで試してみましたが（ファイルは小さいですが）、うまくいきました。

ファイル全体をリロードするのは賢明ではないことはわかっていますが、JavaScript で開発するのはこれが初めてなので、段階的にビルドしたいと考えています。

私は何が欠けていますか？

4

4 に答える 4

7

エラー: 役に立たない setTimeout 呼び出し (引数を囲む引用符がありませんか?)

setTimeout 内でワーカーを実行します。() を削除するか、'' に入れる必要があります:

setTimeout(worker, 1000);

また

setTimeout('worker()', 1000);

*編集: キャッシュを防ぐには、URL を次のように変更します。

 url : 'http://jlengrand.pythonanywhere.com/static/leader.html?rand='+Math.random(),
于 2013-02-01T18:24:49.277 に答える
3

ドキュメントの準備ができたときにワーカー関数を呼び出していないようです。したがって、ループは開始されません。別のドメインにあるファイルを呼び出す場合は、クロスドメインの問題が発生することに注意してください。

このコードを確認してください。問題が解決する可能性があります。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <!-- Using Google CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
       worker();
    });

    function worker(){
        $.ajax({
            url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
                console.log(data);  
                $('.text').html(data);
            },
            complete: function() {
                  setTimeout(worker(), 1000);
            }
        });
    }
   </script>
 </head>
 <body>
   <div class="text">
       To be loaded <br />
   </div>
</body>
</html>
于 2013-02-01T18:36:43.500 に答える
2

すべてが正しいですが、doc ready欠けています：

$(function(){
    (function worker() {
      $.ajax({
        url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function(data) {
          $('.text').html(data);
        },
        complete: function() {
          setTimeout(function(){ // use this way
             worker();
          }, 1000);
        }
      });
    })();
});
于 2013-02-01T18:39:53.473 に答える
0

Deferredを使用して最後のロードの1秒後にリロードする代替ソリューション

function getData() {
    $.ajax({
        url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function (data) {
            $('.text').html(data);
        },
        complete: function () {}
    });
}

function showDiv() {
    var dfd = $.Deferred();
    $('.text').fadeTo(1000, 1, dfd.resolve);
    return dfd.promise();
}

function startme() {
    $.when(getData(), showDiv())
        .then(function (ajaxResult) {
        // ‘ajaxResult’ is the server’s response
            startme();
    });
};
startme();
于 2013-02-01T18:53:20.917 に答える