用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新

本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能。本人使用的js框架是jQuery。


先说思路,那就是在前端用 js setInterval 函数每隔30秒时间请求一次 通知结果然后返回给 前端 html 标签 实现无刷新 更新通知,我想本网站跟知乎的通知应该都是这个逻辑。下面是代码

 /*第一次读取最新通知*/
  setTimeout(function() {
             Push();
           },
        200);
      /*30轮询读取函数*/
        setInterval(function() {

            Push();

    },
        30000);

/*请求函数的ajax*/

function Push() {


    $.ajax({

        type: "POST",
        url: "/index.php?s=Push&a=index",
        data: {
            t: 3
        },
        beforeSend: function() {},
        success: function(data) {

            var obj = eval("(" + data + ")");
            // alert(obj.sixin);
            if (obj.sixin != 0) {

                $(".tongzhi").html(obj.sixin).show();


            } else {
                $(".tongzhi").html(0).hide();

            }


        }


    });

你可能感兴趣的:(js,Ajax,定时刷新页面)