日期:2014-05-16  浏览次数:20871 次

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 ==