第六章 AJAX分页模板说明实例.doc

AJAX表格分页模板：探讨基于Prototype框架的 javascript面向对象设计 ? 2008-04-30 作者：笨笨狗 出处: ? 数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据 传输，用户体验很差。下面是我在学习ajax的过程中，实现的一个解决方案，不知道设计得怎么样，所以想发出来给大家参考下，恳请给予建议和指导，狗狗感 激不尽！ 需求概述：需要将二维数据通过表格展现给客户端，用户可以事先选择每页显示的条目数，以及数据获取方式（静态获取、异步缓存，以及异步非缓存）。三种方式 简述如下—— 1、静态获取方式： 一次性获取全部数据，切换页面显示时，不再发起新的异步查询，适合少量数据的分页显示。 2、异步缓存方式： 分次异步获取页面内容，并缓存访问过的页面内容，下一次访问相同页面时，直接显示缓存内容，适合量较大且内容更新频率慢的数据显示。 3、异步非缓存方式： 与第二种方式类似，只是并不缓存页面内容，每次切换新页面都发起一次异步请求，适合更新频率快的数据显示。 使用技术： 客户端——???1、使用table定义二维数据结构，这是table最合理的使用方式；???2、使用css控制页面展现；???3、使用javascript发起异步查询，以及操作页面dom元素。为加快开发速度，采用成熟的Prototype框架简化复杂度。 服务器端——???1、因为只是原型设计，决定采用Groovy脚本生成响应数据快速展示。只要遵循数据传输格式，能很快替换为别的实现。???2、采用MySql做数据存储，模仿分页数据。 实现过程： 首先，设计静态效果页面，注意按照web标准采用合适的xhtml结构，并使用css控制其表现，页面代码如下，为简单起见，这里把css代码直接写到 head头中： xml 代码 html?? ????head?? ????????meta?content=text/html;?charset=utf-8?http-equiv=Content-Type/?? ????????title分页模板/title?? ????????style?type=text/css?? ????????????*?{?? ????????????????margin:?0;?? ????????????????padding:?0;?? ????????????????font:?12px?宋 体;?? ????????????}?? ????????????body?{?? ????????????????text-align:?center;?? ????????????}?? ????????????#option?{?? ????????????????margin:?20px?auto;?? ????????????}?? ????????????#items{?? ????????????????width:?4em;?? ????????????}?? ????????????#TMPwrap?{?? ????????????????text-align:?center;?? ????????????????margin-top:?10px;?? ????????????}?? ????????????#pages?{?? ????????????????margin:?10px?auto;?? ????????????????border-collapse:?collapse;?? ????????????????border:?1px?#666?solid;?? ????????????}?? ????????????#pages?caption?{?? ????????????????width:?100%;?? ????????????}?? ????????????#pages?th?{?? ????????????????padding:?0.5em;?? ????????????????border-right:?1px?#B9B4A1?solid;?? ????????????????background:?#ECE9D8?url(images/theadbg.gif)?repeat-x?bottom;?? ????????????????text-align:?center;??????????????? ????????????}?? ????????????#pages?td?{?? ????????????????border:?1px?#B9B4A1?solid