- 浏览: 314598 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (254)
- java (178)
- tomcat (6)
- 邮件 (1)
- smtp (1)
- Linux (2)
- 编码 (2)
- 导入工程 (1)
- Specification Level (1)
- hibernate (10)
- 字段类型 (1)
- 字段类型匹配 (1)
- 数据库 (3)
- sql (9)
- struts2 (8)
- 类型转换 (2)
- java,MyEclipse,SVN (1)
- Myecplise (4)
- 输入校验 (1)
- JFrame (2)
- Oracle (8)
- google (1)
- Swing (3)
- Fusioncharts (1)
- 找工作 (0)
- js (4)
- jsp (11)
- displaytag (1)
- spring (8)
- 工作 (1)
- String (1)
- 算法 (2)
- IO (1)
- xml (3)
- 设计模式 (1)
- UML (1)
- 文档 (1)
- ajax (1)
- 日常 (7)
- sql server (1)
- mysql (3)
- git (1)
- Maven (1)
- mongodb (1)
- postman (1)
最新评论
日常开发中常常会遇到页面加载特别慢的问题,大多数情况都是后台的数据查询或数据处理比较慢导致的,比较常见的解决办法是先将页面加载出来,页面上的数据先设置成默认,页面出来之后采用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查询这个功能的实现。
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查询这个功能的实现。
发表评论
-
二级联动菜单实现(比如选择地区之后后面的城市下拉框出现相对应的城市)
2014-06-27 11:43 1141<%@ page language="java ... -
checkbox多选框级联勾选(父类被都选之后相应的子类也被勾选)
2014-06-27 11:36 1367<%@ page language="java ... -
a标签调用js方法提交表单
2014-03-07 15:59 824<a href="javascript:doc ... -
My97DatePicker js日期时间控件一些简单用法
2014-03-03 19:42 2589申明:这篇文章是从别人的QQ空间日志里面转载来的,内容在QQ空 ... -
Ajax实现jsp里面某个输入框内容修改之后后台数据库自动更新
2013-12-24 10:19 5989对应在数据库中表格 rocars表的msg_id,ccrn两个 ... -
自定义(客户化)标签库详解
2013-09-25 14:19 953标签库的作用和EL表达式的作用差不多,尽量减少jsp页面上的j ... -
jsp页面上一些js校验的方法
2013-09-24 14:09 2098客户端校验! //一些js校验的方法。 //函数返回tr ... -
jsp页面上的时间字段格式转换
2013-09-22 13:54 773<td><fmt:formatDate va ... -
jsp页面自动刷新方式
2013-09-03 16:39 460在head部分结尾</head>之前加上: < ... -
jsp页面时间字段格式化
2013-09-02 15:44 896<%@ taglib prefix='fmt' uri= ... -
Struts2中使用displaytag标签总结
2013-07-17 18:28 2481Display Tag Lib是一个标签 ... -
jsp页面中引入java,及消除缓存
2013-07-17 14:38 796<%@ page language="java ... -
jsp自动刷新页面
2013-07-17 10:42 1224自动刷新页面的方法: 1. <%response.se ...
相关推荐
Echarts通过Ajax实现动态数据加载,Echarts通过Ajax实现动态数据加载。
AJAX实现页面表格的添删改查操作,异步刷新,有温馨手册,直接部署到项目即可使用,数据库已备,非常方便的代码。
本资源包括了ajax+asp实现页面更新的全套教程和代码
基于ajax实现异步提交,页面为两个下拉选,左侧一个显示省份,选择不同的省份,右侧的下拉选显示对应的城市
使用Ajax提交数据更新服务器内容 异步获取天气预报数据的实例 使用Ajax读取XML类型数据 使用Ajax返回字符串数据
该组件主要用于,采用AJAX异步加载数据时,锁定用户操作界面。
dtree+ajax异步加载树,请按照自己的需求修改
ajax实现异步刷新,代码全,简单易懂,看了就会,非常实用
创建XMLHttpRequest对象var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts;", false); xmlhttp.onreadystatechange = function () { ...
上滑加载,ajax请求后台,获取数据,然后加载到页面,完完整整,拿来即用
vs2013 利用Ajax+Jquery实现异步进度条效果
使用Jquery和Ajax技术,根据HTML页面输入的内容自动将相关信息显示出来
以AJAX方式加载图片=异步加载图片,先显示个图片的占位图片 此技术常见于漫画网站.zip
jquery实现图片延迟加载和ajax方式加载页面.rar
jQuery+ajax实现一款简单实用的异步加载分页代码,支持自定义设置分页列表数量。
异步获取数据到页面,显示数据,感觉挺实用的,通过jqery的ajax获取,很方便!
ajax 异步传参数 获取json 循环拼接表头和数据展示
基于ASP.NET+XML +JSON实现的Ajax 异步数据操作程序源码例子。
WEB开发中经常会用到AJAX来进行异步操作 通常在网络状况差的情况下 可能你的一个操作会有延迟 而客户端如果没有接受到提示可能会导致多次发送 如果你使用了jQuery,那么你可以使用这里提供的loading.js 只要引入到...
用ajax写的实现客户端和服务器之间的异步通信,很小的demo ,适合初学者使用。