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

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

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