刷新 div，但前提是 php 文件中有新内容

背景信息

我现在正在摆弄一些 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 中）本质上是访问数据库并回显最新的评论...

Question

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

My logic

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

第一次运行..

• 从 feed_main.php 文件加载数据
• 创建一个唯一值（也许是哈希值？）来识别 3 个唯一评论

每隔一段时间就运行一次...

• 从 feed_main.php 文件加载数据
• 创造新的独特价值
• 检查这个值与前一个值
• 如果它们相同，则不要刷新 div，保持原样，但如果它们不同，则刷新。

我之所以要这样做，是因为评论通常都会附有图片，而且每次都看到图片重新加载，这很烦人。

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

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

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

mysql 行插入示例：

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

第二步是对从服务器端发送的数据进行 json 编码：

$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，它还有一个优点，即可以将服务器上的大量工作转移到客户端:)。您还可以更好地控制要一次显示的评论数量。

我做了一些相当大的假设，您将必须修改代码以满足您的需求。如果你使用我的代码，而你的猫|电脑|房子恰好爆炸，你就可以保留所有碎片:)