Question

我有一个MySQL数据库，每隔几分钟就插入新行代表新的新闻。如何打开浏览器接收这些新的新闻项目放在HTML表格的顶部？

在HTML表格的顶部，它可以显示“x个新项目”（x随着新项目的插入而定期更改），点击后，新项目将作为新行放置在表格的顶部。这就像大多数其他实时网络应用程序一样：Twitter搜索，disqus评论，YT评论，hckrnews。

我正在运行LAMP设置并乐于使用HTML5，Jquery，但希望保持简单，容易和无处不在。我不介意轮询服务器以获取更新，理想情况下，用户可以选择打开或关闭轮询（或推送）。

Answer 1

您可以每隔X秒或分钟使用Ajax次来电。然后使用jQuery，您可以将新数据插入到现有表中。

伪代码：

设置间隔为X秒/分钟的JavaScript计时器。
每个间隔后，使用Ajax向服务器发送请求。您可能需要一个参数，如last id，last datetime或类似的东西，告诉服务器已经显示了哪些记录。
获取响应并动态插入表格顶部的新行，并使用responseData.length在某处写“X new items”。

更复杂的Ajax替代方法是实现Comet，但是我听说（没试过），使用PHP和Apache有点困难。

未经测试的例子：

setInterval(function() {
    var currentRowsCount = $('#tableId tr').length - 1; // or ID or Date
    var table = $('#tableId');

    $.ajax({
        type: "POST",
        url: "some.php",
        data: { rows: currentRowsCount },
        dataType: "json"
    }).done(function( response ) {
        var data = $.parseJSON(response);

        $(data).each(function(key, value) {
            // add the new rows using any of the append, prepend, before or after methods
        })
    });
}, 60000); // 1 min

Answer 2

我在jquery中这样做，这是用于消息警报，但可以修改为更容易更新你的表行使用它作为一个概念来开发而不是行的复制行。

<script>
        var messages = {
        endpoint: 'endpoint.php',
        interval: 5, // polling interval, seconds

        poll: function(){
            $.ajax({
                type: 'POST',
                url: messages.endpoint,
                data: {
                    'method': 'messages-poll'
                },
                success: function(data){
                    $(data).each(function(){
                        //Your table update functionality here
                    });

                    setTimeout(function(){
                        messages.poll();
                    }, messages.interval * 1000);
                },
                dataType: 'json'
            });
        }
    };

    messages.poll();
</script>

将新表行推送到浏览器的最佳方法是什么？

2 个答案: