jquery AJAX“缓存”参数是否响应我的需求


Does jquery AJAX "cache" parameter respond to my needs?

目前我正在使用这个函数,但它只能刷新整个 #commentsdiv。

$.ajax({
   url: 'WebForm1.aspx',
   success: function (data) {
   $("WebForm1.aspx #comments").html(data);
   }
});

我试图弄清楚jQuery AJAX是否可以检测到用户正在积极查看网页的内容与来自数据库的内容之间的任何差异,因此每当有人添加评论时,访问者都会看到传入的评论淡入,而不是整个 #commentsdiv定期刷新。

以下是我希望的工作流程:

AJAX 请求 1 -> jquery 获取数据 A、数据 B、数据 C 并将它们显示在浏览器的 #comments 中,并将其保存在缓存中。

(数据 D 稍后添加到数据库中)

AJAX 请求 2 -> jquery 获取数据 A、数据 B、数据 C 和数据 D,与浏览器上的缓存进行比较,并检测到数据 D 在以前的 #comments 版本中不存在,并且仅在新的数据 D 中淡入。

我该怎么做?请帮忙。谢谢。

jQuery和jQuery.ajax都不能(或意味着)做你所问的。比较逻辑必须由您自己完成。

我有几个建议:

  1. 对数据的服务器的调用应接受时间戳参数。如果未设置参数,则返回整组注释,包括当前时间的时间戳。如果设置了时间戳参数,请找到此后发布的评论,仅发送那些评论,再次使用当前时间的时间戳。来自服务器的时间戳保存在客户端上,并与每个后续请求一起发送。这样,您始终只会收到新评论。将这些新注释附加到屏幕上的所需位置和所需的动画。
  2. 以上需要相当多的更改。如果无法执行此操作,请使用当前代码。每当加载注释时,在 dom 中搜索具有 data-comment_id 属性的第一个元素。此属性的值是最高的注释 ID(假设您无法对注释重新排序,否则您的检查需要更加可靠)。在成功回调中,在 data 参数(html)中搜索具有 data-comment_id 属性的元素,并丢弃数据comment_id值比您目前拥有的最高注释 id 高 1 的元素之后的所有内容。将您留下的 html 附加到带有所需动画的 dom

希望这能帮助你走上正轨。

您将需要某种 setInterval 来持续找出最新评论是什么,并在最新评论的 ID 之后获取新数据

.JS

// check every ten seconds
setInterval(function() {
    // figure out most recent comment and pass it to the URL so your query can search for anything greater than newest_comment
    $.ajax({
        url: 'WebForm1.aspx',
        type: 'GET',
        data: {'newest_comment':$('#comments').find('span.comment:eq(0)').data('comment_id')}, // newest_comment would be 5
        dataType: 'HTML',
        success: function (data) {
            $("#comments").prepend(data);
        }
    });
}, 10000);

可能的网页

<div id="comments">
    <span class="comment" data-comment_id="5"></span>
    <span class="comment" data-comment_id="4"></span>
    <span class="comment" data-comment_id="3"></span>
    <span class="comment" data-comment_id="2"></span>
    <span class="comment" data-comment_id="1"></span>
</div>