Как только автоматически обновить div, если содержание изменилось? - PullRequest
Новая
       0

Как только автоматически обновить div, если содержание изменилось?

2 голосов
/ 14 сентября 2011

Я надеюсь, что это возможно.

Я использую Facebook PHP SDK и API Social Graph для извлечения сообщений со страницы и обновления их каждые 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 имеет массивный массив, который возвращается страницей, и яизвлекаю данные, которые мне нужны, и т.д., но есть ли способ сделать это, только если они отличаются от ранее?

Спасибо за вашу помощь,

Ответы [ 5 ]

2 голосов
/ 15 сентября 2011

Вам понадобится сотрудничество со стороны серверного скрипта, но можно устранить большинство передач, используя условные запросы. HTTP имеет функцию, которая позволяет серверу отправлять ответ, только если он не изменился.

Для части PHP вы можете использовать, например, этот модуль (или переопределить условную логику самостоятельно).

Для части AJAX, если вы используете GET (так как POST не кешируется), ответ будет кэширован, а данные будут переданы, только если они изменились, в противном случае они будут поступать из локального кэша браузера.

Существуют некоторые предупреждения, особенно если ваши страницы обслуживаются заголовком Expires ( см. Здесь ).

1 голос
/ 14 сентября 2011

Я делаю нечто подобное, создав строку JSON и сохранив ее в скрытом текстовом поле, а затем использую setInterval и AJAX для сравнения строк. Если строки не совпадают, вызовите другую функцию для перезагрузки.

0 голосов
/ 17 февраля 2016 
<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>
0 голосов
/ 15 сентября 2011

спасибо за вашу помощь, нам удалось получить его с помощью следующего кода, так что, если кто-то столкнется с этой ситуацией, надеюсь, он вам пригодится: 

<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>
0 голосов
/ 14 сентября 2011

Поскольку вы используете jQuery - почему бы не загрузить содержимое файла graph.php в любом случае? 

$.ajax({
    url: '/graph.php',
    type: 'html',
    success: function(data) {
        $('#bottom-bar').html(data).fadeIn("slow");     
    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...