欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ajax实现首页界面先加载页面然后再更新上面的超载率相关数据(防止页面加载过慢的有关问题出现)(异步数据更新)

更新时间: 2014-01-05 01:53:35 责任编辑: Author_N1

 

Ajax实现首页界面先加载页面然后再更新上面的超载率相关数据(防止页面加载过慢的问题出现)(异步数据更新)
日常开发中常常会遇到页面加载特别慢的问题,大多数情况都是后台的数据查询或数据处理比较慢导致的,比较常见的解决办法是先将页面加载出来,页面上的数据先设置成默认,页面出来之后采用ajax实现页面的异步数据更新同步,下面是这样的一个使用示例:

main.jsp里面添加的js(ajax)代码:
/*首页加载之后自动更新首页超载率数据*/
 /*第一次读取最新通知(超载率数据)*/
 setTimeout(function() {
             Push();
           },
        100);
 /*3个小时轮询读取函数,3个小时自动更新一次界面数据*/
 setInterval(function() {

            Push();

    },
        1000*60*60*3);
 function Push() {
    $.ajax({
        type: "POST",
        url: "indexRateList.do",
        // 请求参数为空,不需要带参数
        data: {
            
        },
        beforeSend: function() {},
        success: function(data) {
            var obj = eval("("+data+")");
            // data为ajax请求返回结果数据
            // alert(obj.overrate4);
            // alert(obj.sixin);
            /*定位到id为overrate的元素,规定其显示内容为"本周:"+obj.overrate,并调用show()方法将其显示出来*/
            $("#overrate").html("本周:"+obj.overrate).show();
            $("#overrate1").html("本季:"+obj.overrate1).show();
            $("#overrate2").html(obj.overrate2).show();
            $("#overrate3").html("本月:"+obj.overrate3).show();
            $("#overrate4").html(obj.overrate4).show();
            //if (obj.overrate != null && obj.overrate != '') {
                ////定位到overrate标签
                //$("overrate").html(obj.overrate).show();
            //}
            //if (obj.sixin != 0) {
                //$(".tongzhi").html(obj.sixin).show();
            //} else {
                //$(".tongzhi").html(0).hide();

            //}
        }


    });
    }


main.jsp里面使用上述代码的元素代码(rateList是刚加载页面时的默认数据,可以在后台设置成0或是什么的,不需要从库里查询,以减少页面加载时间,这些数据在页面加载之后都会由ajax异步重新更新的):
				<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
						<tr>
								<th height="29" colspan="2" scope="col" class="txtLeft">超载率统计:</th>
								</tr>
						<tr>
								<td width="48%" height="25"><span class="txtLeft" >当天:</span><span class="red" id="overrate2">${rateList[2] }</span><span class="txtLeft"><br />
								</span></td>
								<td width="52%"><span class="txtLeft" id="overrate">本周:${rateList[0] }</span></td>
						</tr>
						<tr>
								<td height="25"><span class="txtLeft" id="overrate3">本月:${rateList[3] }</span></td>
								<td><span class="txtLeft" id="overrate1">本季:${rateList[1] }</span></td>
						</tr>
						<tr>
								<td height="25"><span class="txtLeft">本年:</span><span class="blue" id="overrate4">${rateList[4] }</span></td>
								<td>&nbsp;</td>
						</tr>
				</table>

下面是请求indexRateList.do对应的java代码:
	/**
	 * 根据当前用户所在区域获取各类超载率
	 * 方法: indexRateList <br>
	 * 描述: TODO <br>
	 * 作者: 
	 * 时间: Dec 24, 2013 11:31:34 AM
	 * @return
	 */
	public void indexRateList(){
		StringBuffer json = new StringBuffer("{");
		try {
			UserInfo userInfo = (UserInfo) ServletActionContext.getRequest().getSession().getAttribute("login");
			try {
				String orgCode = userInfo.getOrgcode();
				String overrate = reportManager.queryAllTypeoverRunRate(orgCode, "0") ;
				String overrate1 = reportManager.queryAllTypeoverRunRate(orgCode, "1");
				String overrate2 = reportManager.queryAllTypeoverRunRate(orgCode, "2");
				String overrate3 = reportManager.queryAllTypeoverRunRate(orgCode, "3");
				String overrate4 = reportManager.queryAllTypeoverRunRate(orgCode, "4");
				overrate  = "0".equals(overrate)  || overrate == null ? "0" : overrate  + "%";
				overrate1 = "0".equals(overrate1) || overrate1 == null ? "0" : overrate1 + "%";
				overrate2 = "0".equals(overrate2) || overrate2 == null ? "0" : overrate2 + "%";
				overrate3 = "0".equals(overrate3) || overrate3 == null ? "0" : overrate3 + "%";
				overrate4 = "0".equals(overrate4) || overrate4 == null ? "0" : overrate4 + "%";
				
				json.append("'overrate':'" + overrate.trim() + "',");
				json.append("'overrate1':'" + overrate1.trim() + "',");
				json.append("'overrate2':'" + overrate2.trim() + "',");
				json.append("'overrate3':'" + overrate3.trim() + "',");
				json.append("'overrate4':'" + overrate4.trim() + "'}");
				this.getResponse().getWriter().write(json.toString());
				
			} catch (Exception e) {
				e.printStackTrace();
			}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}



下面是涉及到的一些问题:
1、js里面的eval函数的用法:
http://www.cnblogs.com/agloat/archive/2008/05/09/1190468.html

2、jQuery里面的show()、html()、hide()几个方法的用法:
http://blog.csdn.net/lansky07/article/details/3392404
http://www.w3school.com.cn/jquery/manipulation_html.asp

3、html中对$('#wait_pls').show();的一些解释:
$是jquery封装javascript后的一个对象,相当于js中的window。$()则是一个选择器,里面写不同的表达式,可以获得不同的html元素,获取不到则是undefind,例如$('#wait_pls')就是定位html里面id为wait_pls的元素,获取id为wait_pls的对象;$('wait_pls')就是定位到html里面的wait_pls标签。
show()是jquery中动态中的一个方法,调用这个方法则会使该HTML元素变为显示状态,相当于将其的DISPLAY属性改为block。show()是jquery自带的方法,是将查找出的对象显示出来,如果对象为隐藏的,则将其显示出来;如果该对象为显示对象,则无任何效果。


这里实现的效果和“ajax实现jsp页面无刷新数据更新”功能非常类似,自己可上google查询这个功能的实现。
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:53:35
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2638/
本文WWW.DOC100.NET DOC100.NET版权所有。