JSP+JQuery Ajax+Servlet 实现轮询方式消息提示功能

Talk is cheap,Show me the codes ! –Linus

准备工作:
jsp文件中,合适的位置添加消息提示:

 <span id="tongzhi" style="display:none"> 您有<a href="#"><strong id="tongzhi-content">0</strong></a>条新消息</span>

第一步:写JS文件,部分元素需要根据jsp的具体标签和css属性

/*
 * the first time to call
 */
setTimeout(function(){
    Push();
//  alert("setTimeout called");
},200);

setInterval(function(){
    Push();
    //alert("setInterval called");
},3000);

function Push(){
    $.ajax({
        type:"POST",
        url:"/LoveBeHomeMis/CheckMessageFromDB?dt=" + new Date().getTime(),//why getTime and wont use
        data:{},
        beforeSend:function(){},
        success: function(data){
            var obj=eval("("+data+")");//eval使用前要先加括号,才能得到完整的json数据
            if(obj.msg!=0){

                $("#tongzhi-content").html(obj.msg);//更新提示内容中的数量部分
                $("#tongzhi").show();//消息提示内容,整个部分都显示出来
            }else{
                $("#tongzhi").hide();//隐藏整个提示消息部分
            }


        }
    });
}

写好polling.js后,在jsp中导入

 <script type="text/javascript" src="../js/polling.js" ></script>

第二步:服务器端servlet实现

CheckMessageFromDB

private void doProcess(HttpServletRequest request,
            HttpServletResponse response) {
        StringBuffer json =new StringBuffer("{");
        int msgNum=DaoFactory.getMessageDao().getMsgNumber();
        json.append("'msg':'"+msgNum+"'");
        json.append("}");// 构造json数据格式

        try {
            PrintWriter out = response.getWriter();
            out.write(json.toString());
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页