Ajaxを使用してテーブルの列を更新する

Question

私のシステム上で実行されているジョブのテーブルを含むWebページがあります。これらのジョブが終了するか状態が変化すると、テーブルは変更を反映する必要があります。

現在、私はすべてのテーブルをAJAX経由で8秒ごとにリフレッシュします。これは特定の数のジョブでうまく動作しますが、非常に高い（〜100）ジョブのロードではパフォーマンス上の問題が発生し、最終的にブラウザがロックアップする原因となります。

私はこのアップデートを実行するためにstruts2のsx：divを使用しています。これは、ウィジェットを検索するたびに返されるテーブルを解析して、これをブレーク機能から外していると思います。

返されたデータが非常に小さくなるため、状況列だけを更新すると大きな助けになると思いますが、これがどのように機能するかはわかりません。

これを実行するためにstrutsタグ以外のものを使用しています。したがって本質的には、テーブルの列をリフレッシュする簡単な方法があることを尋ねています。

ありがとうございます。

Answer 1

ステータスカラムのテキストのみを更新することは、テーブル全体を再レンダリングするよりも明確に優れています。帯域幅からの節約はそれほど大きな勝利ではないでしょう。しかし、それはちょうど私の腸の感覚です - あなたはもちろん、あなたに最適なものをチェックして測定する必要があります。

各更新で一部の行のステータスが変更されると、変更された行のみを更新すると、パフォーマンスが向上するはずです。

また、m_oLoginが示唆しているように、変更のデルタだけを送信することも検討できます。私の経験では、それが正しいことが最も簡単なことではありませんが、私はそこから始めません。

Answer 2

「8秒ごとにテーブル全体をリフレッシュする」と言うと、8秒ごとにjsonデータ全体を取得するという意味ですか？その場合、スローダウンを行うのが普通です...

私はサーバー側の変更を追跡し、データが変更されていないのに対し、クエリが来たら小さな「同じテーブル」msgを送信します。サーバー側で何か変更があった場合にのみ、テーブルのデータを送り返してください。

Answer 3

すべての列にクラス（col-1,col-2など）がある場合。あなたのAjax呼び出しは行のみを照会し、区切り文字列として新しいテキストを出力することができます。

jQuery.ajaxを使用している場合、最初にコードを分割してsuccessコールバック関数を提供できます。次に$('.col-X').each()を使用して、列の各要素をループして、innerhtmlを更新します。

$.ajax({ 
    url: "YOUR_URL.php", 
    success: function (data) { 
     var return = data.split(','); 
     $('.col-1').each(function (index) { 
      $(this).html(return[index]); 
     }); 
    } 
)};