加载中…
个人资料
奔跑
奔跑
  • 博客等级:
  • 博客积分:0
  • 博客访问:5,607
  • 关注人气:88
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

使用Ajax实现Web页面新消息实时提醒

(2013-06-26 20:04:58)
标签:

ajax

新消息提醒

js调用后台方法

it

分类: 技术

在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说数据库数据有更新或者对某个用户有新的任务下达,这时就要对用户进行及时的处理提醒,那这个功能最简单额实现就是通过页面实时刷新,访问数据库然后告知用户有新的消息,但是这种方式虽然简单,但是缺陷也是显而易见的,就是页面需要不停的刷新服务器,造成服务器负担太重,同时用户体验也不好,今天博主介绍的方式是使用Ajax,就是一步的javascript和xml来请求服务器来达到提示的目的,这里博主的目标是在标题栏显示新的任务的条数,同时闪动标题栏,

1、准备,这里博主使用到一个Ajax控件,AjaxPro,下载,然后在.net项目中,添加引用之(跳过);

下载地址:http://ishare.iask.sina.com.cn/f/37352626.html

2、修改Web.config.添加以下代码(具体添加位置不用说了吧,跳过):

 >add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>

3、在需要使用提醒的页面的后台文件中的page_load方法中,添加以下内容:

AjaxPro.Utility.RegisterTypeForAjax(typeof(_default));红色内容是该方法所在的类的名称;

4、添加前台js要嗲用的后台方法,添加的方法和你写普通的后台方法是一样的,只不过,需要在该方法前面加上 [AjaxPro.AjaxMethod],否则前台js是访问不到你添加的方法的;

5、标题闪烁,标题闪烁的js如下:

<%-- <script type="text/javascript">

        ; (function($) {

            $.extend({

                blinkTitle: {

                    show: function() { //有新消息时在title处闪烁提示

                        var step = 0,

                         _title = document.title;

                        var result = login._default.getMessageCount().value;


                        setInterval(function() {


                            result = login._default.getMessageCount().value;

                        }, 30000);

                        

                        var timer = setInterval(function() {

                            step++;

                            if (step == 3) { step = 1 };

                            if (step == 1) { document.title = _title };

                            if (step == 2) {

                                if (result > 0) {

                                    document.title = '您有【' + result + '】条新任务-' + _title

                                } else {

                                    document.title = _title

                                }



                            };

                        }, 500);

                        return [timer, _title];

                    }

                }

            });

        })(jQuery);

        jQuery(function($) {

            var timerArr = $.blinkTitle.show();

        });

</script>--%>

6、代码解释,这里直接是一句代码就可以了var result = login._default.getMessageCount().value;

getMessageCount()是你调用的后台方法,_default方法所在的类,login是类的命名空间

7、补充说明,标题闪烁的js引用了JQuery,所以需要在页面上引用JQUery,我使用的是JQuery1.7,下载地址

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有