search

Home  >  Q&A  >  body text

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

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

伊谢尔伦伊谢尔伦2896 days ago1010

reply all(5)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-10 12:43:52

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

    reply
    0
  • 阿神

    阿神2017-04-10 12:43:52

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

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

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

    1.轮询

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

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

    2.流

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


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

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 12:43:52

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

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

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 12:43:52

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

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

    reply
    0
  • 阿神

    阿神2017-04-10 12:43:52

    不错

    reply
    0
  • Cancelreply