Ajax实现首页界面先加载页面然后再更新上面的超载率相关数据(防止页面加载过慢的有关问题出现)(异步数据更新)
Ajax实现首页界面先加载页面然后再更新上面的超载率相关数据(防止页面加载过慢的问题出现)(异步数据更新)
日常开发中常常会遇到页面加载特别慢的问题,大多数情况都是后台的数据查询或数据处理比较慢导致的,比较常见的解决办法是先将页面加载出来,页面上的数据先设置成默认,页面出来之后采用ajax实现页面的异步数据更新同步,下面是这样的一个使用示例:
main.jsp里面添加的js(ajax)代码:
main.jsp里面使用上述代码的元素代码(rateList是刚加载页面时的默认数据,可以在后台设置成0或是什么的,不需要从库里查询,以减少页面加载时间,这些数据在页面加载之后都会由ajax异步重新更新的):
下面是请求indexRateList.do对应的java代码:
下面是涉及到的一些问题:
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查询这个功能的实现。
日常开发中常常会遇到页面加载特别慢的问题,大多数情况都是后台的数据查询或数据处理比较慢导致的,比较常见的解决办法是先将页面加载出来,页面上的数据先设置成默认,页面出来之后采用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函数的用法:
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查询这个功能的实现。