javascript - 我怎样才能像 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" 属性的"new"消息，然后使用:

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

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