ajax实现轮询 实现消息条数及时更新

1546年前 (2020-11-19)javaScript3876

以后台系统消息提醒为例,实现效果为实时的提示条数更新显示:

image.png

html及样式:


<a title="消息提醒"  href="#" onclick="getCount()"><i class="fa fa-bell"></i><i id="red">1234</i></a>

#red {
   min-width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background-color: red;
   font-size: 0.12rem;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   font-style: normal;
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
}

页面端 ,使用ajax轮询。

setInterval("getCount()",500);
function getCount(){
   $.ajax({
      type : "POST",
      async:true,
      url : ctx + "business/message/count",
      success : function(data) {
         $('#red').html(data.number);
      },
      error: function(){
         //请求出错处理
         alert("Error!");
      }
   });
}

setInterval是按照固定的时间周期(单位是毫秒)去执行一个函数或者计算表达式。同时在Ajax请求里有一个参数非常重要,async为True时代表了是异步请求,这样不会锁死浏览器,但是如果为False时代表了同步请求就会锁住浏览器。


后台类:

@PostMapping("/count")
@ResponseBody
public Message getCount()
{
    // 取身份信息
    Message message = messageService.selectCount(ShiroUtils.getLoginName());
    return message;
}

轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称“程控输出入”(Programmed I/O)。轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始。

  在WEB上来说就是客户端一直向服务端发起请求,服务端返回数据,不论返回什么都会再次向服务端发送请求。


本文原创,转载必追究版权。

分享给朋友:

相关文章

dwz +jfinal 批量多文件上传 实例

页面部分:<link href="${root}/style/dwz/uploadify/css/uploadify.css" rel="sty...

jquery 获取焦点

当文本框或下拉等必填时,如果没有输入就给予提示并使该文本框获得焦点!如果是js,对象.focus()即可。可是如果是jQuery, 这样$("#aa") 返回的就不是DOM对象而是...

如何查询端口占用情况 并禁止占用

如何查询端口占用情况 并禁止占用

开始---->运行---->cmd,或者是window+R组合键,调出命令窗口输入命令:netstat -ano可看到是:pid为 2160 的程序占用了80端口;启动任务管理器:ctrl...

org.apache.subversion.javahl.ClientException: ¾ܾø·ÃÎʡ£ svn: Can't move 'E:\workspace\TourMarkets\.

org.apache.subversion.javahl.ClientException: ¾ܾø·ÃÎʡ£  svn: Can't move 'E:\workspace\T...

Jfinal +百度WebUploader组件实现多图片上传实例

Jfinal +百度WebUploader组件实现多图片上传实例

百度 Web Uploader文档的getting-started文档说明太简单,没有写全,在这里给大家补全($list会报没有定义,文档中确实没给定义)效果:有用部分外部jar包jfinal-2.0...

美图蔡文胜:出身、学历不重要,我来教你怎么遇贵人

美图蔡文胜:出身、学历不重要,我来教你怎么遇贵人

在这封感谢信中,你看到了他是如何从一个懵懂少年到商业领袖的奋斗励志过程,读后令人心情澎湃。而闭目思索,又让你唏嘘不已。人的一生之中如果你没有遇到贵人,真的什么都不是。  令人羡慕的是,老蔡在自己人生每...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。