0

ul li リストをライブで更新する方法を見つけようとしています。

たとえば、順序付けされていないリストがあり、各 li 要素が新しいものから古いものへと表示されます。私は、更新のためにサーバーをポーリングし、その更新をリストに (おそらく jSon を使用して) ライブで、ページを更新せずにプッシュする方法を探しています。

例。

<ul>
<li>12 seconds ago: Apple</li>
<li>32 seconds ago: Banana</li>
<li>42 seconds ago: Grape</li>
</ul>

<ul>
<li>2 seconds ago: Pineapple</li>
<li>22 seconds ago: Apple</li>
<li>32 seconds ago: Banana</li>
<li>52 seconds ago: Grape</li>
</ul>

ですから、悲しい敗者のように、ページをじっと見つめているだけです。リストは、サーバーからの最新データとともに、x 秒ごとに自動的にアップロードされます。

この種のものについて何を探すべきか、そして実際に何を探すべきかについての指針が欲しいだけです。

サーバーからデータをプッシュする方がサーバーからデータをプルするよりも優れた方法であるかどうかはわかりませんが、プッシュによって過負荷が軽減されると思います。

どんな提案でも大歓迎です。

4

2 に答える 2

1

考えられる解決策の 1 つは、XMLHttpRequest を使用して JSON のサーバーをポーリングすることです。クライアント側の JavaScript は次のようになります。

setInterval(updateList, 5000); // run updateList() every 5 seconds

// This assumes you're using jQuery
// You can still do this without jQuery, it just makes things easier
function updateList()
{
    $.getJSON('<<URL to your JSON producing script here>>', function(data) {
        var items = [];

        $.each(data, function(fruit, time) {
            items.push('<li>' + time + ' seconds ago: ' + fruit + '</li>');
        });

        $('#my-list').html(items.join(''));
    });
}

HTML は次のようになります。

<ul id='my-list'>
</ul>

最後に、JSON は次の形式に従う必要があります。

{
    'Pinapple' : 2,
    'Apple' : 22,
    'Banana' : 42,
    'Grape' : 52,
}
于 2012-07-19T02:59:17.503 に答える
0

これを簡単かつ迅速に行う SAAS アプリが実際にあるので、ハードコードする必要がなく、時間を節約できます: Json Data

于 2013-01-02T07:36:13.837 に答える