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

Question

我正在建立一个消息系统,我正在使用jQuery重新加载每隔10秒保存消息的div的内容.load(),但是我有一个问题:当试图创建一个"全选"按钮,"删除选中"按钮等当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");
  }
});

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