我现在正在摆弄一些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,只要保留原样,但如果它们不同则刷新..
我想这样做的原因是因为评论通常附有图片,每次看图像重新加载都很烦人.
任何有关这方面的帮助将不胜感激.
解决方法
我通过首先将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,您的serverside脚本返回如下内容：
{
"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,它还具有将大量工作从服务器卸载到客户端的优势:).您还可以更好地控制要一次显示的注释数量.
我做了一些相当大的假设,你必须修改代码以满足你的需要.如果您使用我的代码,并且您的猫|计算机房子碰巧爆炸,您可以保留所有部分:)
