如何像Gmail的收件箱一样进行AJAX刷新？

Question

我正在创建一个消息传递系统，我正在使用jQuery的.load()每10秒重新加载包含消息的div的内容，但我有一个问题：当尝试创建“全选”按钮时，“删除已选中”按钮等，当10秒钟出现时，它会重新加载按钮并重新加载消息，因此重新加载会取消选择消息。

我想知道的是如何让它实际加载新消息，但实际上并没有重新加载整个div。我知道Gmail不会重新加载整个div，因为它可以正常工作。

这是我的JavaScript函数，它重新加载div并更改页面标题（具有收件箱数），以便它保持更新：

function title() {
setTimeout("document.title = $('#heading').text();", 500);
}
function ajaxStuff() {
setTimeout("$('#heading').load('/employee/message/inbox.php #h1_head'); $('#messages').load('/employee/message/inbox.php #messages_inner');title();ajaxStuff();", 10000);
}
ajaxStuff();

以下是设置收件箱的方法：

基本上我想要做的是用AJAX加载新消息，但不知何故不刷新div。我试着查看Gmail的来源，但是有太多的东西需要通过，它们会让一些随机的类和ID混淆。

注意：我已经在Google上搜索了一段时间，但没有找到任何内容。

Answer 1

回应评论：

我认为这里的教程不合理。更改服务器代码以返回带有class="new"属性的“新”消息，然后使用：

$.ajax({
  url: "/employee/message/inbox.php",
  success: function(result) {
    $(result).find(".new").prependTo("#heading");
  }
});

当然，该代码可能需要进行一些修改才能适合您的环境/返回数据。

Answer 2

检查新邮件时，请在您的请求中发送最新邮件的ID。那么你的php将只返回你添加到现有数据中的所有新东西。

    jQuery.ajax({
        type: 'get',
        dataType: 'text',
        url: "/employee/message/inbox.php",
        data: {
            from_user : from_user, 
            to_user: to_user, 
            message_id: message_id,  
            something_else_you_need_to_send: its_value 
            t: Math.random() 
        },
        success: function(data, textStatus){
                      // whatever you need to do with the result returned from php (server)                    
        }

然后在您的SQL查询中执行

select * from table 
  where user_id=user_id_from_ajax 
    and message_id > message_id_from_ajax`

更新

在你的php中使用

    $from_user = $_REQUEST['from_user'];
    $to_user = $_REQUEST['to_user'];
    $message_id = $_REQUEST['message_id'];