如何像 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

回应cmets：

我认为这里没有必要提供教程。更改您的服务器代码以返回带有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'];