javascript - 用Ajax+js+jQuery实现无闪烁定时刷新页面
伊谢尔伦
伊谢尔伦 2017-04-10 12:41:52
[JavaScript讨论组]

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(5)
伊谢尔伦

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

            }


        }


    });
阿神

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

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

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

1.轮询

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

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

2.流

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


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

ringa_lee

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

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

PHP中文网

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

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

阿神

不错

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号