Question

背景资讯

我现在正在摆弄一些PHP和AJAX，尝试让代码适用于包含注释的自动刷新div（每10秒）。

这是我用来刷新div的javascript代码..

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
        $.ajaxSetup({ cache: false }); 
            setInterval(function() {
                    $('#content_main').load('/feed_main.php');
        }, 5000);  
});
// ]]></script>

将填充名为“content_main”的div的代码（在feed_main.php中）实际上访问数据库并回显最新的注释...

问题

是否有可能只加载div“content_main”，如果其中的数据自上次加载以来没有改变？

我的逻辑

因为我对javascript和AJAX比较陌生，所以我不太清楚如何做到这一点，但我的逻辑是：

第一次运行..

从feed_main.php文件加载数据
创建一个唯一值（可能是哈希值？）来识别说3个唯一注释

每隔一次运行......

从feed_main.php文件加载数据
创建新的唯一值
使用上一个
如果它们是相同的，不要刷新div，只要保留原样，但如果它们不同则再刷新..

我想要这样做的原因是因为评论通常附有图片，每次看图像重新加载都很烦人。

对此的任何帮助将不胜感激。

Answer 1

我不久前遇到过类似的问题，我假设您使用mysql或其他东西作为存储服务器的评论？

我通过首先将timestamp整数列添加到我的mysql表来解决我的问题，然后当我添加一个新行时，我只需使用time()来保存当前时间。

mysql行插入示例：

$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";

第二步是json_encode你从服务器端发送的数据：

$output = array();

if ($html && $html !== '') {   // do we have any script output ?
  $output['payload'] = $html;  // your current script output would go in this variable
}
$output['time'] = time();      // so we know when did we last check for payload update

$json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array
echo $json;                    // send it to the client

所以，现在，而不是纯html，您的服务器端脚本返回如下内容：

{
  "payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>",
  "time":1354167493
}

您可以在javascript中轻松获取数据：

<script type="text/javascript"> // <![CDATA[

var lastcheck;
var content_main = $('#content_main');

pollTimer = setInterval(function() {
  updateJson();
}, 10000);

function updateJson() {
  var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0);

  $.ajax({
    url: request,
    dataType: 'json',
    async: false,
    cache: false,
    success: function(result) {
      if (result.payload) {        // new data
        lastcheck = result.time;   // update stored timestamp
        content_main.html(result.payload + content_main.html()); // update html element
      } else {                     // no new data, update only timestamp
        lastcheck = result.time;
      }
    }
  });
}

// ]]> </script>

它几乎负责服务器和客户端之间的通信，现在你只需要查询你的数据库：

$timestamp = 0;
$where = '';

if (isset($_GET['timestamp'])) {
  $timestamp = your_arg_sanitizer($_GET['timestamp']);
}

if ($timestamp) {
  $where = ' WHERE timestamp >= '.$timestamp;
}

$query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';

时间戳来回传递，客户端总是在先前的查询中发送服务器返回的时间戳。

您的服务器只发送自您上次检查后提交的评论，您可以像我一样将它们添加到html的末尾。（警告：我没有添加任何理智控制，你的评论可能会非常长）

由于您每隔10秒轮询一次新数据，您可能需要考虑在ajax调用中发送纯数据以节省大量的块带宽（json字符串只包含时间戳，只有大约20个字节）。

然后您可以使用javascript生成html，它还具有将大量工作从服务器卸载到客户端的优势:)。您还可以更好地控制一次要显示的注释数量。

我做了一些相当大的假设，你必须修改代码以满足你的需要。如果您使用我的代码，并且您的猫|计算机房子碰巧爆炸，您可以保留所有部分：）

Answer 2

这个怎么样：

<script type="text/javascript">
    // <![CDATA[
    $(function () {

        function reload (elem, interval) {
            var $elem = $(elem);
            // grab the original html
            var $original = $elem.html();
            $.ajax({
                cache : false,
                url : '/feed_main.php',
                type : 'get',
                success : function (data) {
                    // compare the result to the original
                    if ($original == data) {
                        // just start the timer if the data is the same
                        setTimeout(function () {
                            reload(elem, interval)
                        }, interval);
                        return;
                    }
                    // or update the html with new data
                    $elem.html(data);
                    // and start the timer
                    setTimeout(function () {
                        reload(elem, interval)
                    }, interval);
                }
            });
        }

        // call it the first time
        reload('#content_main', 10000);
    });
    // ]]>
</script>

这只是一个让你上手的想法，它不处理错误或超时。

Answer 3

最简单的代码

setInterval(function()
    { 
        $.ajax({
          type:"post",
          url:"uourpage.php",
          datatype:"html",
          success:function(data)
          {
            $("#div").html(data);
          }
        });
    }, 5000);//time in milliseconds

刷新div，但仅当有来自php文件的新内容时

3 个答案: