Question

我希望这是可能的。

我正在做的是使用Facebook PHP SDK和社交图谱API从页面检索帖子并每隔x毫秒刷新一次，但如果内容完全相同，这有点浪费资源，所以我想要只进行刷新是内容已经改变。

<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>

所以，graph.php有一个由页面返回的大量数组，我正在取出我想要的数据等但是有没有办法只做它，如果它与以前不同？

感谢您的帮助，

Answer 1

您需要从服务器端脚本进行协作，但可以使用条件请求消除大多数传输。 HTTP具有允许服务器仅在未更改时发送响应的功能。

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

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

有一些警告，特别是如果您的网页使用Expires标头（see here）投放。

Answer 2

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

Answer 3

由于您使用的是jQuery - 为什么不直接加载graph.php asynchronsly的内容？

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

Answer 4

感谢您的帮助，设法使用以下代码获取，所以如果有人遇到这种情况，那么希望它对您有用：

<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>

Answer 5

<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>

如果内容已更改，如何仅自动刷新div？

5 个答案: