插入数据库时自动刷新 div 标签答案

【问题标题】：Automatic refresh a div tag when something inserted into a database插入数据库时自动刷新 div 标签
【发布时间】：2013-07-21 02:55:39
【问题描述】：

我创建了一个 PHP 页面，该页面从数据库 names 中进行选择，并创建了包含 Javascript 代码的 html 页面，以每 5 秒自动刷新 php 页面中的 div 标签，代码如下

<script>
function Ajax(){
var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
        setTimeout('Ajax()',1);
    }
}
xmlHttp.open("GET","select.php",true);
xmlHttp.send(null);
}

window.onload=function(){
   setTimeout('Ajax()',2000);
}
</script>
<div id="ReloadThis"></div>

所以这太棒了，但我只需要在新插入数据库时刷新。那么有没有办法做到这一点？

【问题讨论】：

浏览器如何知道更新？您应该首先查看长轮询服务器或定期连接并询问是否有更新。
我很确定如果不使用纯 JavaScript/HTML/PHP 进行轮询，就无法做到这一点。没有轮询的解决方案需要服务器能够与客户端通信。但是一旦服务器发送了客户端需要的所有东西，服务器甚至无法知道客户端是否还在。
使用插入数据库中的最新“名称”的时间戳加载名称。然后每隔 X 秒询问服务器数据库中是否有任何新名称 - 不要忘记发送您之前加载的时间戳。如果有更新的名称，请将其发送到浏览器 - 以及新的时间戳。用当前的和覆盖时间戳。让它重复。

标签： php ajax database

【解决方案1】：

我认为可以实现的一种方法是推送通知。这样您就可以保持与数据库的活动连接，这会告诉您何时进行了修改。

这也称为“长轮询”或“彗星编程”。（查看此资源：comet programming）。我个人没有使用过这项技术，所以我不知道它的局限性（我听说过浏览器支持方面的问题）。

我想这是一种肮脏的做法：

当您在数据库中存储新值时，还使用 json 值（或任何您希望的值）更新页面，并假设一个唯一的 ID 号
每隔 X 秒使用一次您的 ajax 并检查该页面上 ID 的值，如果有新值更新您的值，如果不只是休眠。

这可能有效，但它会定期检查，而不是在发生更改时进行检查。

【讨论】：

【解决方案2】：

使用应该使用 Comet（例如 AJAX + Long Polling）

【讨论】：

【解决方案3】：

考虑使用 javascript 库（如 jQuery），您可以在其中找到“setTimeout”之类的函数，它们可以很好地实现您的目标。这是一个例子：

setTimeout(function() {
      // Do something after 5 seconds
}, 5000);

【讨论】：

【解决方案4】：

@hint 嗯……你可以试试http://jquery.com/吗？

例如，您应该发送最后插入的 id：

HTML：

<div id="user-list">
    <div class="user-block" data-id="1">User #1</div>
    <div class="user-block" data-id="2">User #2</div>
    <div class="user-block" data-id="3">User #3</div>
</div>

JS：

var lastID = 0;

$(function() {
    setInterval(function() {
        var callback = function(response) {
            // TODO: for (var i = 0; i < ....)
            $('#user-list').append('<div class="user-block" data-id="' + reponse[i].id + '">' + response[i].name + '</div>');

            lastID = respose[i].id;
        };

        $.post(url, {"id" : lastID}, callback, "json")
    }, 5000);
});

PHP：

$lastID = $_POST['lastID']; // TODO: security
$query = "SELECT id, name FROM users WHERE id > :id"; // TODO: :id => $lastID
// DO QUERY
echo json_encode($data); // $data = result of query

【讨论】：