首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

ajax 处置页面大量数据

2012-10-31 
ajax 处理页面大量数据背景:一个页面需要输出list中所有数据 (list大小1000,客户要求不分页),生成的页面

ajax 处理页面大量数据

背景:一个页面需要输出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进当前页面。

???????

? 流程:??ajax 处置页面大量数据

?

??解释:

??????? 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大小算出还要发送多少个请求

???????

?

?

?

?

?

??7.ajax调用controller的方法:

?????

????????????? <c:forEach var="dataRow" items="${outputVO.list}" varStatus="stat">?<tr>.....<tr> </c:forEach>

?

?

??????????? </table>

?9.返回一段已经画好的表格。js ajax回调函数中把这段html inner 进指定的div

?

总结:

???? 这种解决方案其实相当于? 隐式的分页。。。。? 个人挺满意这种方案。! 欢迎大伙拍砖!

?

热点排行