ajax分页模板示例

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（下） 关键字: 表格分页 Prototype javascript面向对象 groovy AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上） AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中） 在前面两篇文章中，我们实现了静态表格分页模板，下面让我们继续讨论，如何实现另外两种数据获取方式的模板。要缓解服务器的压力，我们可以这样做： 1、显示初始页面也就是第一页的时候，我们构造好表头、标题和第一页的数据，并按照服务器返回的总页数生成导航链接，之后将不再更新这部分重复的内容； 2、对于每一页新内容，我们在点击页码链接的时候再动态向服务器获取数据，服务器根据所请求的页码返回特定页的内容，替换掉当前显示的页面数据，这样可以减少网络带宽的使用，毕竟每次只返回一页的内容； 3、对于数据更新频繁的分页系统，就按照上面的办法每次获取新数据；而对于不是很频繁的数据，我们提供一种客户端缓存机制来加快响应速度和减轻服务器压 力：通过一个全局的cache数组来存放服务器端之前返回的数据，在切换页面的时候，先查询缓存，如果没有命中，再向服务器发起异步请求，当响应到达的时 候，也会将此次数据存入缓存以供使用。 按照上面的分析，可以发现这两种数据获取方式的模板有很多相似的地方，不同的只是缓存与否，我们可以将他们抽象成同一个类来实现，下面是javascript代码，我将在后面就一些需要注意的地方做详细讲解： js 代码 /* * 异步模板，每次请求一个页面，并缓存浏览过的页面(可选) */ var mixin = new Tbi.StaticTemplate(); //用于mixin（混入）对象方法addNavigation Tbi.AsyncTemplate = Class.create(); Tbi.AsyncTemplate.prototype = Object.extend(new Tbi.Template(), { initialize: function(wrap,items,catchUrl,option){ this._init(wrap,items,catchUrl); this.mode = "async"; //option为可选参数，设置初始显示页面以及是否缓存页面 this.option = Object.extend({isCache:true},option); if(this.option.isCache){ this.cache = new Array(); //缓存数组; } }, // 实现父类抽象方法，向页面添加默认分页 addPage: function(xmlhttp){ var original = xmlhttp.responseText; var html = original.stripScripts(); this.wrap.innerHTML = html; original.evalScripts(); }, // mixin(混入)StaticTemplate类的同名方法，向页面添加分页导航 addNavigation: mixin.addNavigation, // 方法劫持，重用addNavigation添加分页导航 // 导航链接点击事件处理函数，切换页面内容，同时改变导航链接样式（突出显示当前页） _changePage: function(event,link){ var activeLink = $$('#TMPwrap div a[class="active"]')[0]; if(activeLink != link){ link.className = "active"; activeLink.className = ""; this._displayPage(link); } Event.stop(event); }, // 根据缓存标志切换页面内容 _displayPage: function(link){ var page = link.firstChild.nodeValue; // 如果是第一页，且进行缓存的话，直接切换页面元素的可见性 if(page==1 && this.cache){ $("default").className = ""; $("swap").className = "hidden"; } // 否则，根据缓存标志，切换显示其他页（包括非缓存的默认页） else{ $("default").className = "hidden"; var oldPage = $("swap"); swapPage = this._prompt("正在获取数据……"); $("pages").replaceChild(swapPage,oldPage); this._showPage(page); } }, // 显示提示信息 _prompt: function(text){ var swapPage = document.createElement("tbody"); swapPage.id = "swap"; var messageTr = document.createElement("tr"); var messageTd = document.createElement("td"); messageTd.colSpan = 100; messageTd.appendChild(document.createTextNode(text)); messageTr.appendChild(messageTd); swapPage.appendChild(messageTr); return swapPage; }, // 根据缓存标志显示页面 _showPage: function(page){ if(this.cache&&this.cache["page"+page]){ this._addPageContent(page); //巧妙重用此方法达到添加页面的效果 } else{ this._catchPage(page); } }, // 异步获取页面内容 _catchPage: function(page){ if(this.ajax){ this.ajax.transport.abort(); } this.ajax = new Ajax.Request( this.catchUrl, { method: "get", parameters: {"mode":"page","items":this.items,"page":page}, onComplete: this._addPageContent.bind(this,page) } ); }, // 添加各分页，并根据缓存标志进行页面缓存 _addPageContent: function(page,xmlhttp){ var xml = xmlhttp?xmlhttp.responseXML:this.cache["page"+page]; if(this.cache&&!this.cache["page"+page]){ this.cache["page"+page] = xml; } var oldPage = $("swap"); var newPage = this._createPage(xml); $("pages").replaceChild(newPage,oldPage); }, // 由异步返回的xml，或者缓存数组中的xml信息生成页面内容 _createPage: function(xml){ var newPage = document.createElement("tbody"); newPage.id = "swap"; var trs = $A(xml.getElementsByTagName("tr")); var context = this; trs.each( function(item,index){ var tr = document.createElement("tr"); var tds = $A(item.getElementsByTagName("td")); tds.each( function(item){ var value = item.firstChild?item.firstChild.nodeValue:""; var td = document.createElement("td"); td.appendChild(document.createTextNode(value)); tr.appendChild(td); } ); newPage.appendChild(tr); } ); return newPage; } } ); 一些技巧和说明： 1、AsyncTemplate由前面文章中的Template抽象父类派生而来，因此具有了父类的能力（与静态模板类StaticTemplate共用 _catchContent方法获取初始数据；具有可扩展的显示前、显示后事件入口），达到了代码复用的效果； 2、initialize构造函数中，参数和父类是一样的，只是多了一个可选参数option，用于设置缓存标志（默认为true，即开启缓存），如果开启缓存，则初始化一个缓存数组cache 。这里注意一下默认参数的设置方式，这在Prototype风格的代码中很常见： js 代码 this.option = Object.extend({isCache:true},option); 3、接下来addPage实现父类的抽象方法，作为继承而来的_catchContent方法的回调函数，将处理服务器端返回的数据并显示模板初始页面， 也就是第一页。这里服务器端返回的数据格式如下，注意我们利用了Prototype的扩展evalScripts和stripScripts方法抽取执行 以及删除javascript脚本片段，以达到向客户端返回总页数的效果（后面将利用addNavigation方法和这个总数构建分页导航）： xml 代码 <table id='pages'> <caption>动态分页模板</caption> <thead> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> <th>标题四</th>