如何在没有刷新的情况下在页面上显示实时信息?

时间:2011-09-27 01:38:54

标签: php javascript live jquery

Facebook推出了一个自动滚动条,显示实时新闻向下滚动。如何在我的网站上拥有相同的功能时间?我不关心使用iframe并让它刷新,因为它会闪烁而B会使页面加载图标出现(取决于浏览器)。怎么办呢?

5 个答案:

答案 0 :(得分:6)

为此你需要每隔X秒用AJAX获取你正在寻找的数据。也称为轮询。

以下是细分:每隔X秒,我们想查询数据库中的新数据。所以我们向php页面发送异步POST,然后返回结果的数据集。我们还声明了一个回调函数(jQuery原生),它将传递来自PHP的回显数据。

你的PHP:

if (isset($_POST['action'])){
    if ($_POST['action'] == 'pollNewData'){
        pollNewData();
    }
}

function pollNewData(){
    $term = $_POST['term'];
    $sql = "select * from TABLE where TERM = '$term'";
    $result = get_rows($sql);
    echo json_encode(array('status'=>200, 'results'=>$results));
}

你的前端javascript:

setTimeout(pollForNewData, 10000);

function pollForNewData(){
    $.post('url/ajax.php',{
        action: 'pollNewData',
        term: 'your_term'
    }, function(response){
        if (response.status == 200){
            $.each(response.results, function(index, value){
               $("#container").append(value.nodeName);
            });
        }
    }, 'json');
}

这里基本上是你将使用jQuery的ajax方法异步发布。在PHP中触发函数的方法是在帖子中引用一个键值项,描述你想在ajax请求中调用哪个函数。我将此项称为“Acton”,它的值是将为此特定事件调用的函数的名称。

然后通过回显json_encoded数据集返回后端提取的数据。

在javascript中,你每10秒发布一次这个php函数。完成帖子后的回调是function(response)部分,回音数据传递为response。然后,您可以将此响应视为json对象(因为在函数之后我们将返回类型声明为json

答案 1 :(得分:1)

你能做到的唯一方法就是使用某种Asyncronous javascript函数。最简单的方法是让javascript利用该信息priodically轮询另一个http资源,并用新内容替换dom中的当前内容。 Jquery和其他javascript框架提供了AJAX包装器,使这个过程相当简单。您不仅限于在请求中使用XML。

确保即使没有启用javascript也可以确保某些内容可用,这是一个好主意。只需使用javascript即可“更新”,而无需刷新页面。

答案 2 :(得分:1)

你可以使用Ajax做这种方法...使用AJAX可以轮询返回包含新更新的JSON / XML的URL,一旦获得数据,就可以更新DOM。 您可以参考this页面了解Ajax的介绍。

答案 3 :(得分:0)

Ajax是最好的方法,但这是其他人已经提到过的。我想补充一点,虽然我同意ajax是最好的方法,但也有其他方法,比如Flash。

答案 4 :(得分:0)

有两种方法可以获得这样的更新。第一个称为push,第二个称为pull

通过push更新,您依靠服务器告知客户端何时有新信息可用。在您的示例中,push更新将以Facebook的形式告知您的网站发生了新的事情。一般来说,push方案往往更具带宽友好性,因为您只需在需要说明某些内容时传输信息(如果没有任何信息,Facebook不会与您的网站联系)。遗憾的是,push更新要求服务器专门配置为支持它。换句话说,除非您要求更新的服务(例如Facebook)提供push更新服务,否则您无法自行实施。这就是pull技术的用武之地。

更新pull后,客户端会在认为必要时从服务器请求新信息。它通常使用polling实现,以便客户端定期和定期查询服务器以查看最新信息。根据服务的定向方式,您可能必须进行客户端解析,以确定您作为响应收到的内容是否实际上是 new 。这里的缺点当然是您可能会为没有获得有用信息的轮询请求消耗不必要的带宽量。同样,根据您的轮询间隔,您可能无法获得最新信息,具体取决于您的轮询间隔。

最后,由于您的网站是基于网络的并且正在与Facebook连接,因此您可能希望使用某种AJAX系统。

有一些混合方法,例如通过Comet的长轮询,在维基百科上有相当好的概述:

推送技术:http://en.wikipedia.org/wiki/Push_technology

拉技术:http://en.wikipedia.org/wiki/Pull_technology