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

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

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


$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
}
});

http://api.jquery.com/jQuery.ajax/


function get_data()
{
$.ajax({
url: 'getjson.php',
success: function(data) {
$('.result').html(data);
}
});
}

setInterval("get_data()",3000);//3秒一次执行


虽然这是大半年的问题,我只是偶尔看到了,前面几位的回答水平很一般啊,我说说出自《javascript高级程序设计》中涉及这方面的解决方案。

消息模块,也就是消息的推送,外国人叫他Comet,指一种从服务器向页面推送数据的技术。

有两种实现方式,轮询和流。

1.轮询

轮询分长轮询和短轮询,其他几位回答都是短轮询,比较占游览器和服务器资源。

长轮询是游览器发起一个请求后,服务器一直保持打开,直到有数据发送,游览器接收到数据后,再发起一个请求。怎么实现的呢?jsp我不了解,反正php有sleep神函数。

2.流

流的实现方式大致是服务器接到请求后 先输出一些数据到缓存,然后立刻刷新,等几秒再刷新,游览器只要监听readystatechange事件及检测readState的值是否为3。具体请自行谷歌,毕竟不是一个兼容的解决方案。


另 不考虑兼容的话 还有2个更好的解决方案 SSE 和 web socket.


不错


你好你说的是轮询拉去服务端的信息,先说思路,那就是在前端用 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();

            }


        }


    });
【热门文章】
【热门文章】