背景:一个页面需要输出list中所有数据 (list大小>1000,客户要求不分页),生成的页面时间会很长,浏览器会出现短暂的空白。
700条XX信息数据大小965.9KB,耗时1.66s
1000条XX数据大小1803.6KB,耗时2.68s
100条数据 大小 194.8KB 耗时 140ms
优化思路:将数据分成多块,分多次响应给客户端。 如:优化700条数据,第一次输出100条数据(这样用户就很快看到有页面出来),剩余的600条数据,通过ajax分6次请求,每次也是100条数据,给客户端。(这里相当于:用户的一个请求结果,被切割成7请求来完成)
这里有关键的几个点:
第一: 7次的请求怎么保证他们操作的都说同一个list。(缓存第一次从数据库查出来的list,缓存的key要唯一性,可以采用时间戳来做key)
第二: 判断是否是最后一次请求,是。。就要清空这次的缓存
第三: 后台返回的不是一个list,而是一个已经在jsp中生成好的html,ajax直接把后台生成html,inner进当前页面。
流程:
解释:
1.用户第一次请求
2.方法1>>去数据库取数据,判断返回list的大小。若大于100,取list中的 0-99放到listB中,返回。同时把list缓存起来,以时间戳做key,同时把key也返回。
3,4.去jsp1>> jsp1中有<div id="data"> <table>表头</table> <jsp:include page="jsp2.jsp"></jsp:include> </div> 。
5.jsp1最后还会调用一段js,把list大小和key传进去,
6.js 根据list大小算出还要发送多少个请求
/**
* 分页请求方法
* @param {} count 结果集大小
* @param {} key
*/
page:function(count,key){
var divId="data";
var pageCount = count/fundQuery.limit;//默认100
if(pageCount == 0){//结果小于 每页显示数
return;
}
for(var i=1;i<=pageCount;i++){//循环创建div
var _span = document.createElement("div");
_span.id = divId + i;
var newText = document.createTextNode(" ");
_span.appendChild(newText);
TFL.dom.selector(divId).append(_span);
}
for(var i=1;i<=pageCount;i++){//循环发送请求
var last=false;
if(i==pageCount){
last=true;
}
var pageurl ="funds/fundsquery.jhtm";
var vars ="service=page&start="+i+"&limit="+fundQuery.limit+"&last="+last+"&key="+key;
var requestObject =
{
url: pageurl,
getType: "1",
vars: vars,
method: "post",
callBack: function(html){
var start = parseInt(ajaxGetPage.gup('start',this.vars));//获取 vars 中的参数
TFL.dom.selector("data"+start).html(html); //将后台返回的html inner进指定的div
}
};
var ajax = new TFL.ajax2();
ajax.ajaxRequest(requestObject);//ajax封装
}
}
7.ajax调用controller的方法:
public OutputVO page(FundNavInput in,Boolean last,Long key){
OutputVO out = new OutputVO();
List<FundNavInfoVO> result = (List<FundNavInfoVO>)map.get(key);
List<FundNavInfoVO> res = null;
if(result != null){
int startIndex = in.getStart() * in.getLimit(); //开始的索引 = 页码*大小
int toIndex = startIndex + in.getLimit() >result.size()?result.size():startIndex+in.getLimit();//结束索引=开始索引+每页条数
res = result.subList(startIndex, toIndex);
out.setList(res);
out.setCount(res.size());
if(last){//最后一次 移除这次的结果
map.remove(key);
}
}
ViewUtil.setViewName("jsp2");
return out;
}
8.jsp2中 <table cellpadding="0" cellspacing="0" class="list" style="border-bottom: #d3d2d3 0px solid;">
<c:forEach var="dataRow" items="${outputVO.list}" varStatus="stat"> <tr>.....<tr> </c:forEach>
</table>
9.返回一段已经画好的表格。js ajax回调函数中把这段html inner 进指定的div
总结:
这种解决方案其实相当于 隐式的分页。。。。 个人挺满意这种方案。! 欢迎大伙拍砖!
分享到:
相关推荐
铁阿贾克斯级它能做什么允许您快速创建 WordPress 管理页面,该页面通过 ajax 调用处理大量数据以避免超时。这个怎么运作创建类的实例后,您可以使用 WordPress 钩子和过滤器来修改它以获得所需的行为。 激活插件后...
2. 页面使用了大量的Ajax技术,没有任何的直接提交或回传(Submit Form or postback),分页,查询,对话框,都以Ajax的方式实现。 3. 所有Ajax技术的客户端全部基于JQuery,服务端则使用我的Ajax服务端框架 4. 客户端...
最近在做人事管理系统的一个签到功能,首先是把部门当做参数,把参数用Ajax发送到数据库进行查询,然后以表格形式动态生成员工信息到返回页面的Div里,表格最后的一列是签到按钮,这时我想用JQuery继续获取被点击的...
而且容易与现有的ASP.NET程序相结合,通常实现复杂的功能只需要在页面中拖几个控件,而不必了解深层次的工作原理,除此之外服务器端编程的ASP.NET AJAX Control Toolkit含有大量的独立AJAX控件和对ASP.NET原有服务器...
常常需要长时间按的等待以及整个页面的刷新,即通常所说的”白屏”现象,而且是整个页面的刷新,这就增加了用户等待时间,数据重复传递也浪费了大量的资源和网络带宽,而Ajax采用的是异步处理,可以更新局部的内容.
JSP Ajax实例集,数据库采用MYSQL,实例中大部分... 2.4大量数据动态浏览查询 2.5信息排序 2.6切换标签页 第三章 电子商务应用 3.1注册表单验证 3.2购物车 3.3产品快速检索 3.4系列产品特性速查 ……
2.4大量数据动态浏览查询 2.5信息排序 2.6切换标签页 第三章 电子商务应用 3.1注册表单验证 3.2购物车 3.3产品快速检索 3.4系列产品特性速查 3.5邮件订阅 3.6产品评级 第四章 服务器端计算 4.1简单...
第一次进入aspx页面,就要读取出大量数据。写入页面中。使用都在页面要有添删改的操作,而且只有当点击面的保存按钮才能真正的写入到数据库中。因此我选择了Ajax+JSON的方式来实现这个页面。 代码如下: ”...
将大量的数据分成多页来显示,用户可以通过翻页按纽定位到页面,每次取出定位的页面数据。
获取数据库中大量的信息显示在页面上,必然要使用到分页查询; 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询; 1.先来找一张数据很多的表吧! 一张...
通过大量的实例,本书详述了AJAX的内部机制,并且紧跟时代潮流,重点描述了如何依靠异步通信机制,更快、更好、更有效地实现客户端和服务器端之间的通信。 作者简介 Shahram Khosravi,博士。他是一名资深的软件...
鉴于同学们会留言找我要jquery-ajax实现动态数据填入ul(新闻展示页面)的代码,因此特将代码上传,无需c币。 代码是很久以前的了,CSS样式弄得很简单,只是提供一个思路。具体样式需大家自行编写。
然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可 以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。 JavaScript 代码甚至...
2-4.EXE 大量数据动态浏览查询实例演示 2-5.EXE 信息排序实例演示 2-6.EXE 切换标签页实例演示 3-1.EXE 注册表单验证实例演示 3-2.EXE 购物车实例演示 3-3.EXE 产品快速检索实例演示 3-4.EXE 系列产品特性速查实例...
用户停留在页面上没有办法实现局部更新的功能,只能通过刷新整个页面来获取最新的数据,而由此代码的代价是需要传输大量的数据,而且有可能临时的一些用户信息也会丢失,而ajax的使用实现了局部更新页面内容的作用,...
DIV+CSS布局,交互方式采用当前最流行的AJAX技术,所有操所在一个页面完成,并实现了AJAX的最高应用—— AjaxUpload,所有操作一气呵成,带来前所未有的用户体验。 简洁的主题与皮肤开发技术,更合理的模块化...
5.EXE 条件设置向导实例演示 1-6.EXE 页面关键词提示实例演示 2-1.EXE 无刷新显示回帖实例演示 2-2.EXE 输入内容前提示实例演示 2-3.EXE 带进度的文件上传实例演示 2-4.EXE 大量数据动态浏览查询实例...
<tr><td><a href="2.4/index.jsp">2.4大量数据动态浏览查询</a></td> <tr><td><a href="2.5/index.jsp">2.5信息排序</a></td> <tr><td><a href="2.6/tab_page.html">2.6切换标签页</a></td> <tr><td class="item">第...
是一个典型的Ajax应用,在页面上,您只需要点击“下一页”,数据区将自动加载对应页码的数据,重新刷新数据区。类似的效果在很多网站上应用,尤其在一些需要展示大量图片数据的网页如淘宝商品列表页,Ajax分页效果让...