6

背景情報

コメントを含む自動更新div（10秒ごと）でコードを機能させるために、現時点でPHPとAJAXをいじっています。

これは、divを更新するために使用しているjavascriptコードです..

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
        $.ajaxSetup({ cache: false }); 
            setInterval(function() {
                    $('#content_main').load('/feed_main.php');
        }, 5000);  
});
// ]]></script>

feed_main.php にある「content_main」という div にデータを入力するコードは、基本的にデータベースにアクセスし、最新のコメントをエコーし​​ます ...

質問

内部のデータが最後にロードされてから変更されていない場合にのみ、div「content_main」をロードすることは可能ですか?

私の論理

私はjavascriptとAJAXに比較的慣れていないので、これを行う方法がよくわかりませんが、私のロジックは次のとおりです。

初めて実行されます..

  • feed_main.php ファイルからデータを読み込む
  • 一意の値 (おそらくハッシュ値?) を作成して、たとえば 3 つの一意のコメントを識別します

実行されるたびに...

  • feed_main.php ファイルからデータをロードします
  • 新しい独自の価値を創造する
  • この値を前の値と照合してください
  • それらが同じである場合は、div を更新せず、そのままにしておきますが、異なる場合は更新します。

これを行う理由は、通常、コメントに画像が添付されており、毎回画像がリロードされるのが非常に面倒だからです。

これについての助けをいただければ幸いです。

4

3 に答える 3

5

少し前に同様の問題に直面しました。サーバーサイドのコメントストレージにmysqlなどを使用していると思いますか？

最初にタイムスタンプ整数列をmysqlテーブルに追加することで問題を解決し、次に新しい行を追加したときにtime()、現在の時刻を保存するために使用するだけでした。

mysql 行挿入の例:

$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";

ステップ 2 は、サーバーサイドから送信するデータを json_encode することです。

$output = array();

if ($html && $html !== '') {   // do we have any script output ?
  $output['payload'] = $html;  // your current script output would go in this variable
}
$output['time'] = time();      // so we know when did we last check for payload update

$json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array
echo $json;                    // send it to the client

したがって、純粋な html の代わりに、サーバーサイド スクリプトは次のようなものを返します。

{
  "payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>",
  "time":1354167493
}

JavaScript で簡単にデータを取得できます。

<script type="text/javascript"> // <![CDATA[

var lastcheck;
var content_main = $('#content_main');

pollTimer = setInterval(function() {
  updateJson();
}, 10000);

function updateJson() {
  var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0);

  $.ajax({
    url: request,
    dataType: 'json',
    async: false,
    cache: false,
    success: function(result) {
      if (result.payload) {        // new data
        lastcheck = result.time;   // update stored timestamp
        content_main.html(result.payload + content_main.html()); // update html element
      } else {                     // no new data, update only timestamp
        lastcheck = result.time;
      }
    }
  });
}

// ]]> </script>

これでサーバーとクライアント間の通信がほぼ処理されます。次のようにデータベースにクエリを実行するだけです。

$timestamp = 0;
$where = '';

if (isset($_GET['timestamp'])) {
  $timestamp = your_arg_sanitizer($_GET['timestamp']);
}

if ($timestamp) {
  $where = ' WHERE timestamp >= '.$timestamp;
}

$query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';

タイムスタンプは前後に渡され、クライアントは常に前のクエリでサーバーから返されたタイムスタンプを送信します。

サーバーは、前回チェックした後に送信されたコメントのみを送信し、私が行ったようにそれらを html の末尾に追加できます。(警告: 私はこれにいかなる種類のサニティ コントロールも追加していません。コメントは非常に長くなる可能性があります)

10 秒ごとに新しいデータをポーリングするため、大量のチャンク帯域幅を節約するために、ajax 呼び出しを介して純粋なデータを送信することを検討することをお勧めします (タイムスタンプだけを含む JSON 文字列は、わずか 20 バイト程度です)。

その後、javascript を使用して html を生成できます。これには、サーバーからクライアントに多くの作業をオフロードするという利点もあります :)。また、一度に表示するコメントの数をより細かく制御できます。

かなり大きな仮定をいくつか行ったので、必要に応じてコードを変更する必要があります。あなたが私のコードを使用し、あなたの猫|コンピューター|家がたまたま爆発した場合、あなたはすべてのピースを保持することができます:)

于 2012-11-29T06:35:39.837 に答える
3

これはどう：

<script type="text/javascript">
    // <![CDATA[
    $(function () {

        function reload (elem, interval) {
            var $elem = $(elem);
            // grab the original html
            var $original = $elem.html();
            $.ajax({
                cache : false,
                url : '/feed_main.php',
                type : 'get',
                success : function (data) {
                    // compare the result to the original
                    if ($original == data) {
                        // just start the timer if the data is the same
                        setTimeout(function () {
                            reload(elem, interval)
                        }, interval);
                        return;
                    }
                    // or update the html with new data
                    $elem.html(data);
                    // and start the timer
                    setTimeout(function () {
                        reload(elem, interval)
                    }, interval);
                }
            });
        }

        // call it the first time
        reload('#content_main', 10000);
    });
    // ]]>
</script>

これは、エラーやタイムアウトを処理するものではありません。

于 2012-11-27T08:05:04.400 に答える
0

最高で簡単なコード

setInterval(function()
    { 
        $.ajax({
          type:"post",
          url:"uourpage.php",
          datatype:"html",
          success:function(data)
          {
            $("#div").html(data);
          }
        });
    }, 5000);//time in milliseconds
于 2018-01-05T08:00:28.170 に答える