具有动态更新的实时标题 (AJAX+jQuery）

Live title with dynamic update (AJAX+jQuery)

本文关键字：标题 AJAX+jQuery 实时 动态 更新      更新时间：2023-09-26

我有一个网站，用户可以在网站上收到收件箱消息和通知。（就像在Facebook上一样，当你有通知时，你会在磁贴的开头看到（1）

目前我有一个 ajax 请求，它获取标题必须显示的数据。它的工作方式类似于魅力，但问题是此文件每 10 秒调用一次。如果用户有 10 个页面选项卡，则此文件将被调用 10x10=100 次。如果我的网站有数千个用户，您就会了解它将产生多少负载。

我

虽然只在活动选项卡上运行 javascript，但我如何更新我网站所有打开的选项卡的标题？还有其他建议吗？

这是我的代码

var oldtitle=$(document).attr("title");
var checker=function(){
    $.ajax({
        url : 'live_title.php',
        type : 'POST',
        success : function(data) {
            ... code ....
            ... code ....
            ... code ....
            if (sum>0) {
                $(document).attr("title", "("+sum+") "+oldtitle);
            }
        }
});
}
setInterval(checker,20000);
checker();
缓存

机制似乎是正确的方法。

第一个想法：使用 HTTP 缓存

请务必将参数添加为查询字符串，并将当前时间戳舍入到前 10 秒。

确保您的 Web 服务器发送正确的标头，以便 HTTP 缓存正常工作。最好使用 GET 请求。

例：

$.ajax({
    url : 'live_title.php',
    type : 'GET',
    success : function(data) {
        // code
    },
    data: {t: Math.floor((+new Date())/10000)}
}
// we send a request similar to live_title.php?t=142608488

第二个想法：使用 window.localStorage 作为辅助本地缓存。

除了第一个想法之外：

var getCache = function(t) {
     if (window.localStorage) {
         var liveTitle = localStorage.getItem('liveTitle') || {};
         return liveTitle[t] || null;
    }
};
var setCache = function(t, data) {
    if (window.localStorage) {
        window.localStorage.setItem('liveTitle', {t:data});
    }
}
var run = function() {
    var t = Math.floor((+new Date())/10000);
    var cache = getCache(t);
    var success = function(data) {
        /*code*/
    };
    if (cache) {
        success(cache);
    }
    else {
        $.ajax({
            url : 'live_title.php',
            type : 'GET',
            success : function(data) {
                setCache(t, data);
                success(data);
            },
            data: {t: t}
        }
    }
}

我不认为你可以轻易做你想做的事。

此外，为了优化这一点，我建议使用缓存：

  • 有一次，选项卡调用对消息进行计数的方法，执行查询并将结果缓存到简单文件或内存中
  • 在接下来的 5 分钟内，每次 Tab 调用该方法时，都使用缓存，而不查询数据库
  • 当 5 分钟过去后，再次执行查询，缓存它，依此类推。

像这样，在 100 个调用中，您只有 1 个大请求，其他请求就像请求 js 或 img 文件

相关文章：