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(); //} } }); }<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><th height="29" colspan="2" scope="col" height="25"><span >当天：</span><span id="overrate2">${rateList[2] }</span><span id="overrate">本周：${rateList[0] }</span></td></tr><tr><td height="25"><span id="overrate3">本月：${rateList[3] }</span></td><td><span id="overrate1">本季：${rateList[1] }</span></td></tr><tr><td height="25"><span id="overrate4">${rateList[4] }</span></td><td> </td></tr></table>/** * 根据当前用户所在区域获取各类超载率 * 方法: 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 blocke.printStackTrace();}}