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

1545年前 (2020-11-19)javaScript2298

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

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上来说就是客户端一直向服务端发起请求,服务端返回数据,不论返回什么都会再次向服务端发送请求。


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

分享给朋友:

相关文章

MyEclipse 10安装svn

MyEclipse 10安装svn

 方法一:在线安装(推荐)1.打开HELP->MyEclipse ConfigurationCenter。切换到SoftWare标签页。 2.点击Add Site 打开对话框...

是谁动了我的座位

是谁动了我的座位

女孩一上火车,见自己的座位上坐着一男士。她核对自己的票,客气地说:“先生,您坐错位置了吧?” 男士拿出票嚷嚷着:“看清楚点,这是我的座,你瞎了?” 女孩仔细看了他的票,不再做声,默...

Java 实现用户资料完整度的前端显示(或根据填写资料自动评分)

前端使用 Bootstrap 的进度条组件显示百分比,后台读取权重并计算信息完整度,并将计算的结果返回给前端,供页面显示。CSS1<link href="static/sc/...

谈话让别人舒服的程度,决定你成功的高度

谈话让别人舒服的程度,决定你成功的高度

职场上,有这样两种截然相反的人:有人生怕别人舒服,尽量让别人不舒服,而只要自己舒服就行;还有一类人生怕别人不舒服,尽量让别人舒服,哪怕委屈自己。猎头公司猎聘的老总有几十万年薪的,也有几百万的,甚至有过...

MyEclipse 中项目修改SVN的地址

MyEclipse 中项目修改SVN的地址

在工作环境调整时,有的时候SVN服务器的地址需要修改,而正在开发中的项目在Eclipse中有些代码没有提交,此时怎么修改SVN的地址呢?以下有一个简单的办法:一、在MyEclipse中选择Window...

我差不多是个废人了,感觉身体被掏空

林心如跟霍建华都结婚了,滴滴跟优步都在一起了。我们也应该抱住了吧? 终于8月了,超吃点吧,再一咬牙,坚持一下吧,马上秋天到了,就可以又能马上把肥肉藏起来了。 在这里迫不及待教大家一个夏天过后...

发表评论

访客

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