Php 如何仅在内容发生更改时自动刷新div？_Php_Jquery_Facebook Graph Api

Php 如何仅在内容发生更改时自动刷新div？

php jquery facebook-graph-api

Php 如何仅在内容发生更改时自动刷新div？,php,jquery,facebook-graph-api,Php,Jquery,Facebook Graph Api,我希望这是可能的我正在做的是使用Facebook PHP SDK和Social Graph API从页面检索帖子，并每x millseconds刷新一次，但如果内容完全相同，这会有点浪费资源，因此我只想在内容发生更改时进行刷新 <div id="bottom-bar"> <?php require("graph.php"); ?> </div> <script> var auto_refresh = setInterval( funct

我希望这是可能的

我正在做的是使用Facebook PHP SDK和Social Graph API从页面检索帖子，并每x millseconds刷新一次，但如果内容完全相同，这会有点浪费资源，因此我只想在内容发生更改时进行刷新

<div id="bottom-bar">
    <?php require("graph.php"); ?>
</div>

<script>
var auto_refresh = setInterval(
function ()
{
    $('#bottom-bar').fadeOut("slow").load('graph.php').fadeIn("slow");
}, 30000); // refresh every 30000 milliseconds
</script>


var auto_refresh=setInterval(
函数（）
{
$（“#底部栏”）.fadeOut（“慢”）.load（'graph.php'）.fadeIn（“慢”）；
}, 30000); // 每30000毫秒刷新一次

因此，

graph.php

具有页面返回的大量数组，我正在取出我想要的数据，等等，但是有没有一种方法可以只在与以前不同的情况下才这样做

感谢您的帮助，

既然您使用的是jQuery，为什么不异步加载graph.php的内容呢

$.ajax({
    url: '/graph.php',
    type: 'html',
    success: function(data) {
        $('#bottom-bar').html(data).fadeIn("slow");     
    }
})

我通过创建一个JSON字符串并将其存储在一个隐藏的文本字段中，然后使用setInterval和AJAX来比较字符串，从而完成类似的工作。如果字符串不匹配，请调用另一个函数重新加载。

感谢您的帮助，使用以下代码成功地获得了它，因此如果有人遇到这种情况，希望它对您有所帮助：

<script>
var cacheData;
var data = $('#bottom-bar').html();
var auto_refresh = setInterval(
function ()
{
    $.ajax({
        url: 'graph.php',
        type: 'POST',
        data: data,
        dataType: 'html',
        success: function(data) {
            if (data !== cacheData){
                //data has changed (or it's the first call), save new cache data and update div
                cacheData = data;
                $('#bottom-bar').fadeOut("slow").html(data).fadeIn("slow");
            }           
        }
    })
}, 30000); // check every 30000 milliseconds
</script>


var缓存数据；
var data=$（“#底部栏”）.html（）；
var auto_refresh=setInterval(
函数（）
{
$.ajax({
url:'graph.php'，
键入：“POST”，
数据：数据，
数据类型：“html”，
成功：功能（数据）{
如果（数据！==缓存数据）{
//数据已更改（或是第一次调用），请保存新缓存数据并更新div
cacheData=数据；
$（“#底部栏”）.fadeOut（“慢”）.html（数据）.fadeIn（“慢”）；
}           
}
})
}, 30000); // 每30000毫秒检查一次

您需要服务器端脚本的配合，但可以使用条件请求消除大多数传输。HTTP有一个特性，它只允许服务器在没有更改的情况下发送响应

对于PHP部分，您可以使用（或者自己重新实现条件逻辑）

对于AJAX部分，如果使用GET（因为POST是不可缓存的），则响应将被缓存，并且只有在数据发生更改时才会传输数据，否则它将来自本地浏览器缓存

这里有一些注意事项，特别是当您的页面带有Expires标头（）时。


var缓存数据；
var data=$（“#底部栏”）.html（）；
var auto_refresh=setInterval(
函数（）
{
$.ajax({
url:'test.php'，
键入：“POST”，
数据：数据，
数据类型：“html”，
成功：功能（数据）{
如果（数据！==缓存数据）{
//数据已更改（或是第一次调用），请保存新缓存数据并更新div
cacheData=数据；
$（'#底部栏'）.html（数据）；
}         
}
})
}, 300); // 每30000毫秒检查一次
测试
测试
这是一个静态块

这听起来像是我想做的，你手头有代码吗？你的意思是这样做而不是我最初的

require（'graph.php'）

？只是想知道改变它是否有好处，反之亦然？这纯粹是一种表面上的改变-每次你都在传递整个过程，只是省略了显示部分。@Piskvor-是的，我知道，但我看不到一种更优雅、更有效的方法-你有什么建议吗？@martincarlin87你是否考虑过接受Piskvor的答案，或者给出他答案不起作用的原因？为了其他可能正在看这个的人？@Brian Deragon-在Piskvor发布他的答案之前，我已经提交了我自己的答案并接受了。在我的回答中，仍然会提出请求，但元素不应淡入淡出。做Piskvor建议的事情有点复杂，但如果你能让它工作，你可以让我知道。感谢你指出这一点，如果我有时间，我会尝试让它工作，但就目前而言，我将坚持肮脏的方法，因为我现在时间很紧。

<html>
 <head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var cacheData;
var data = $('#bottom-bar').html();
var auto_refresh = setInterval(
function ()
{
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: data,
        dataType: 'html',
        success: function(data) {
            if (data !== cacheData){
                //data has changed (or it's the first call), save new cache data and update div
                cacheData = data;
                $('#bottom-bar').html(data);
            }         
        }
    })
}, 300); // check every 30000 milliseconds
</script>

</head>
<body>

<div id="bottom-bar">test
</div>

            <div id="test">
                Testing
            </div>
            <div id="staticBlock">
                This is a static block
            </div>
</body>
</html>


 <?php
echo "Hello World <br />";
$counter = rand();
echo $counter;
?>

<div class="author-avatar"> <img data-lazy-loaded="true" style="display: inline;" alt="" src="http://1.gravatar.com/avatar/a9c17d250b9b97a7baf76ac13d817a08?s=64&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/a9c17d250b9b97a7baf76ac13d817a08?s=128&amp;d=mm&amp;r=g 2x" class="avatar avatar-64 photo" width="64" height="64"><noscript><img
alt='' src="http://1.gravatar.com/avatar/a9c17d250b9b97a7baf76ac13d817a08?s=64&#038;d=mm&#038;r=g" srcset='http://1.gravatar.com/avatar/a9c17d250b9b97a7baf76ac13d817a08?s=128&amp;d=mm&amp;r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></noscript></div>