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> </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函数的用法：
[url]http://www.cnblogs.com/agloat/archive/2008/05/09/1190468.html[/url]

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

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查询这个功能的实现。