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

Question

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

Answer 1

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

            }


        }


    });

Answer 2

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

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

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

1.轮询

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

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

2.流

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

---

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

Answer 3

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

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

Answer 4

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

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

Answer 5

不错