AJAX分頁(yè)模板說(shuō)明和實(shí)例.doc

AJAX表格分頁(yè)模板：探討基于Prototype框架的 javascript面向?qū)ο笤O(shè)計(jì) 2008-04-30 作者：笨笨狗 出處: 數(shù)據(jù)分頁(yè)顯示，是很普遍的需求，傳統(tǒng)的實(shí)現(xiàn)大多是基于服務(wù)器端導(dǎo)航的，這種設(shè)計(jì)采用同步方式進(jìn)行數(shù)據(jù) 傳輸，用戶體驗(yàn)很差。下面是我在學(xué)習(xí)ajax的過(guò)程中，實(shí)現(xiàn)的一個(gè)解決方案，不知道設(shè)計(jì)得怎么樣，所以想發(fā)出來(lái)給大家參考下，懇請(qǐng)給予建議和指導(dǎo)，狗狗感 激不盡！需求概述：需要將二維數(shù)據(jù)通過(guò)表格展現(xiàn)給客戶端，用戶可以事先選擇每頁(yè)顯示的條目數(shù)，以及數(shù)據(jù)獲取方式（靜態(tài)獲取、異步緩存，以及異步非緩存）。三種方式 簡(jiǎn)述如下1、靜態(tài)獲取方式：一次性獲取全部數(shù)據(jù)，切換頁(yè)面顯示時(shí)，不再發(fā)起新的異步查詢，適合少量數(shù)據(jù)的分頁(yè)顯示。2、異步緩存方式：分次異步獲取頁(yè)面內(nèi)容，并緩存訪問(wèn)過(guò)的頁(yè)面內(nèi)容，下一次訪問(wèn)相同頁(yè)面時(shí)，直接顯示緩存內(nèi)容，適合量較大且內(nèi)容更新頻率慢的數(shù)據(jù)顯示。3、異步非緩存方式：與第二種方式類似，只是并不緩存頁(yè)面內(nèi)容，每次切換新頁(yè)面都發(fā)起一次異步請(qǐng)求，適合更新頻率快的數(shù)據(jù)顯示。使用技術(shù)：客戶端1、使用table定義二維數(shù)據(jù)結(jié)構(gòu)，這是table最合理的使用方式；2、使用css控制頁(yè)面展現(xiàn)；3、使用javascript發(fā)起異步查詢，以及操作頁(yè)面dom元素。為加快開(kāi)發(fā)速度，采用成熟的Prototype框架簡(jiǎn)化復(fù)雜度。服務(wù)器端1、因?yàn)橹皇窃驮O(shè)計(jì)，決定采用Groovy腳本生成響應(yīng)數(shù)據(jù)快速展示。只要遵循數(shù)據(jù)傳輸格式，能很快替換為別的實(shí)現(xiàn)。2、采用MySql做數(shù)據(jù)存儲(chǔ)，模仿分頁(yè)數(shù)據(jù)。實(shí)現(xiàn)過(guò)程：首先，設(shè)計(jì)靜態(tài)效果頁(yè)面，注意按照web標(biāo)準(zhǔn)采用合適的xhtml結(jié)構(gòu)，并使用css控制其表現(xiàn)，頁(yè)面代碼如下，為簡(jiǎn)單起見(jiàn)，這里把css代碼直接寫到 head頭中：xml 代碼1. 2. 3. 4. 分頁(yè)模板 5. 6. * 7. margin:0; 8. padding:0; 9. font:12px宋 體; 10. 11. body 12. text-align:center; 13. 14. #option 15. margin:20pxauto; 16. 17. #items 18. width:4em; 19. 20. #TMPwrap 21. text-align:center; 22. margin-top:10px; 23. 24. #pages 25. margin:10pxauto; 26. border-collapse:collapse; 27. border:1px#666solid; 28. 29. #pagescaption 30. width:100%; 31. 32. #pagesth 33. padding:0.5em; 34. border-right:1px#B9B4A1solid; 35. background:#ECE9D8url(images/theadbg.gif)repeat-xbottom; 36. text-align:center; 37. 38. #pagestd 39. border:1px#B9B4A1solid; 40. border-top:none; 41. padding:0.5em; 42. 43. #navigation 44. margin:10px; 45. text-align:center; 46. 47. #navigationa 48. margin-right:8px; 49. color:black; 50. 51. #navigationa.active 52. text-decoration:none; 53. color:red; 54. cursor:default; 55. 56. .hidden 57. display:none; 58. 59. 60. 61. 62. 63. 每頁(yè)顯示條 數(shù)： 64. 65. 獲取方式： 66. 67. 靜態(tài) 68. 異 步緩存 69. 異步非緩存 70. 71. 72. 73. 74. 75. 靜態(tài)分頁(yè)模板 76. 77. 78. 標(biāo) 題一 79. 標(biāo) 題二 80. 標(biāo) 題三 81. 標(biāo) 題四 82. 標(biāo) 題五 83. 標(biāo) 題六 84. 85. 86. 87. 88. 1 89. 1 90. 1 91. 1 92. 1 93. 1 94. 95. 96. 2 97. 2 98. 2 99. 2 100. 2 101. 2 102. 103. 104. 3 105. 3 106. 3 107. 3 108. 3 109. 3 110. 111. 112. 4 113. 4 114. 4 115. 4 116. 4 117. 4 118. 119. 120. 121. 122. 1 123. 2 124. 3 125. 126. 127. 128. 這樣我們就制作了一個(gè)包含四行數(shù)據(jù)的表格。注意這里html標(biāo)簽的運(yùn)用，使用thead、tbody將表格內(nèi)容分成邏輯 塊，在后面的設(shè)計(jì)中，我們會(huì)把每一頁(yè)的內(nèi)容生成一個(gè)tbody。為保證兼容性，對(duì)表格的修飾，比如邊框、背景、底色這些，最好在單元格（td或者th）中 設(shè)定，以確保在不同的瀏覽器中具有相似的顯示效果。以上內(nèi)容中，我們用靜態(tài)頁(yè)面的方式，設(shè)計(jì)出了分頁(yè)模板的表現(xiàn)形式，接下來(lái)讓我們利用javascript這個(gè)強(qiáng)大的操盤手 來(lái)粘合其余的部分吧。第一步，我們需要設(shè)計(jì)一個(gè)抽象的基類，來(lái)實(shí)現(xiàn)代碼復(fù)用（js的OO，不就是為了這個(gè)么，還有就是方便管理代碼而已）。 首先，我們搞個(gè)命名空間來(lái)管理基類及其子類： js 代碼1. varTbi=newObject();/全局命名空間 為啥叫“Tbi”？就不要問(wèn)了，項(xiàng)目組的名稱而已，呵呵：）接下來(lái)考慮我們的模板基類，他有什么特征 呢？1、需要持有一個(gè)到頁(yè)面容器的引用，以便將自身加入頁(yè)面流；2、需要保存用戶設(shè)定的每頁(yè)顯示條目數(shù)；3、需要保存獲取分頁(yè)數(shù)據(jù)的服務(wù)器端地址（URL）；這些成員可以通過(guò)構(gòu)造器來(lái)初始化，除此之外，為了避免數(shù)據(jù)更新發(fā)生混亂（這個(gè)在異步非緩存的時(shí)候需要注意），還要有一個(gè)全局異步對(duì)象來(lái)獲取數(shù)據(jù)，但不需要 通過(guò)參數(shù)提供。定義了成員變量，模板對(duì)象還需要有可操作的方法：1、構(gòu)造函數(shù)：initialize，這個(gè)方法在構(gòu)建Prototype風(fēng)格構(gòu)建類，實(shí)例化對(duì)象的時(shí)候會(huì)自動(dòng)調(diào)用。另外有一些技巧下面會(huì)提到；2、在數(shù)據(jù)獲取過(guò)程中，顯示等待信息的方法：_showMessage，這里只是簡(jiǎn)單顯示一句話，可以按需替換成顯示圖片等；3、顯示模板初始頁(yè)面的show方法（其中有兩個(gè)故意設(shè)計(jì)的事件入口，供今后擴(kuò)展使用）：A、調(diào)用beforeShow，默認(rèn)為空方法，什么也不做，可按需設(shè)定；B、調(diào)用_display方法，顯示模板初始頁(yè)面：a、調(diào)用2中的方法顯示等待信息；b、調(diào)用_catchContent方法異步獲取服務(wù)器數(shù)據(jù)。此方法可由所有模板共享，因此放到基類中達(dá)到代碼重用?？梢钥吹剑?我們?yōu)榱思?xì)粒度的控制Prototype的ajax封裝，使用了transport屬性。c、在成功返回服務(wù)器數(shù)據(jù)之后，addContent方法將把分頁(yè)內(nèi)容添加到容器中，分兩步來(lái)做：(1) addPage方法作為回調(diào)函數(shù)添加模板主體抽象方法，由子類實(shí)現(xiàn)。(2) addNavigation方法根據(jù)實(shí)際情況生成并添加分頁(yè)導(dǎo)航抽象方法，我將它在一個(gè)子類中實(shí)現(xiàn)然后演示混入（mixin），其實(shí)完全可以在基類中 提供達(dá)到同樣的代碼復(fù)用效果。js 代碼1. /* 2. *模板基類 3. */ 4. Tbi.Template=Class.create(); 5. Tbi.Ttotype= 6. initialize:function() 7. this._init.apply(this,arguments); 8. , 9. 10. _init:function(wrap,items,catchUrl) 11. this.wrap=$(wrap); 12. this.items=items; 13. this.catchUrl=catchUrl; 14. this.ajax=null;/全局異步對(duì)象 15. , 16. 17. /顯 示等待信息 18. _showMessage:function(text) 19. this.wrap.innerHTML=text; 20. , 21. 22. /顯示模板 默認(rèn)頁(yè)面 23. show:function() 24. this.beforeShow();/顯示前事件處理入口 25. this._display(); 26. this.afterShow();/顯示后時(shí)間處理入口 27. , 28. 29. /顯 示前事件處理入口 30. beforeShow:function(), 31. 32. _display:function() 33. this._showMessage(正在獲取數(shù)據(jù)，請(qǐng)稍等); 34. this._catchContent(); 35. , 36. 37. /取得 默認(rèn)頁(yè)面內(nèi)容，由兩個(gè)模板公用 38. _catchContent:function() 39. if(this.ajax) 40. this.ajax.transport.abort(); 41. 42. this.ajax=newAjax.Request( 43. this.catchUrl, 44. 45. method:get, 46. parameters:mode:this.mode,items:this.items, 47. onComplete:this.addContent.bind(this) 48. 49. ); 50. , 51. 52. /添加頁(yè)面 內(nèi)容 53. addContent:function(xmlhttp) 54. this.addPage(xmlhttp);/抽象方法，添加頁(yè)面內(nèi)容 55. this.addNavigation();/抽象方法，添加分頁(yè)導(dǎo)航 56. , 57. 58. /顯示后事 件處理入口 59. afterShow:function() 60. 一些技巧：為了實(shí)現(xiàn)在子類中覆蓋initialize構(gòu)造函數(shù)，我們只需要將基類的成員初始化工作委托給_init方法即可，下面會(huì)看到他的作用。模仿事件處理機(jī)制，我們留下了兩個(gè)事件入口beforeShow和afterShow，分別可以設(shè)置顯示前事前和顯示后事件。Prototype為Function對(duì)象擴(kuò)展了一個(gè)bind方法和bindAsEventListener方法，可以很方便的將函數(shù)上下文（this） 切換為別的對(duì)象，這里，我們切換為模板對(duì)象。bind和bindAsEventListener的功用相似，但是有一點(diǎn)區(qū)別，用bind切換的方法，如果 有自動(dòng)傳入的參數(shù)，比如事件對(duì)象event，那么這個(gè)參數(shù)將被自動(dòng)傳入函數(shù)參數(shù)列表的最后，而后者則是自動(dòng)傳入函數(shù)參數(shù)列表的最前面，這個(gè)技巧很常用。比 如改寫一下上面的代碼，我給onComplete事件傳入一個(gè)自定義參數(shù)tmyArg，使用兩種不同的綁定 方法（xmlhttp是Prototype自動(dòng)傳入回調(diào)函數(shù)的參數(shù)）：js 代碼1. /用bind方 法 2. this.addContent.bind(this，myArg) 3. /調(diào)用方式 4. this.addContent(myArg,xmlhttp) 5. 6. 7. /用bindAsEventListener方法 8. this.addContent.bindAsEventListener(this，myArg) 9. /調(diào)用方式 10. this.addContent(xmlhttp,myArg) 第二步，實(shí)現(xiàn)靜態(tài)模板類StaticTemplate。對(duì)于靜態(tài)模板，其顯示過(guò)程是這樣的：向服務(wù)器發(fā)起一次異步請(qǐng)求，返回所有分頁(yè)數(shù)據(jù)，服務(wù)器按照客戶 設(shè)定的每頁(yè)顯示數(shù)量來(lái)生成所有頁(yè)，一次新傳回客戶端。每一頁(yè)由一對(duì)tbody元素定義，然后通過(guò)css類名來(lái)講所有的頁(yè)面隱藏，最后由客戶端js來(lái)控制顯 示頁(yè)面，初始顯示第一頁(yè)。服務(wù)器返回的數(shù)據(jù)格式如下（只要結(jié)構(gòu)一樣就可以了，沒(méi)有行、列數(shù)目的限制，這可以參看前一篇文章中的css設(shè)定了解，是可以隨表 格大小伸縮的），總條目數(shù)為6，分了兩頁(yè)：xml 代碼1. 2. 靜態(tài)分頁(yè)模板 3. 4. 5. 標(biāo)題一 6. 標(biāo)題二 7. 標(biāo)題三 8. 標(biāo)題四 9. 標(biāo)題五 10. 標(biāo)題六 11. 12. 13. 14. 15. 1 16. 1 17. 1 18. 1 19. 1 20. 1 21. 22. 23. 2 24. 2 25. 2 26. 2 27. 2 28. 2 29. 30. 31. 3 32. 3 33. 3 34. 3 35. 3 36. 3 37. 38. 39. 4 40. 4 41. 4 42. 4 43. 4 44. 4 45. 46. 47. 48. 49. 50. 5 51. 5 52. 5 53. 5 54. 5 55. 5 56. 57. 58. 6 59. 6 60. 6 61. 6 62. 6 63. 6 64. 65. 66. StaticTemplate類中，addPage方法統(tǒng)計(jì)table中tbody元素的個(gè)數(shù)來(lái)確定總頁(yè)數(shù)，并附加到對(duì)象上。以供 addNavigation方法成分頁(yè)導(dǎo)航信息： js 代碼1. this.pageTotal=this.wrap.getElementsByTagName(tbody).length; 在addNavigation方法中，又一次用到了前面提過(guò)的bindAsEventListener技巧，并通過(guò)切換css類名來(lái)達(dá)到突出顯示當(dāng)前頁(yè)碼 以及顯示頁(yè)面。具體的StaticTemplate代碼實(shí)現(xiàn)如下：js 代碼1. /* 2. *靜態(tài)模板，一次請(qǐng) 求全部數(shù)據(jù) 3. */ 4. Tbi.StaticTemplate=Class.create(); 5. Tbi.StaticTtotype=Object.extend(newTbi.Template(), 6. 7. /* 8. *構(gòu)造函數(shù)，實(shí)例化靜態(tài)模板 9. *參數(shù)：父容器，每頁(yè)顯示條目數(shù)，數(shù)據(jù)獲取地址 10. */ 11. initialize:function(wrap,items,catchUrl) 12. this._init(wrap,items,catchUrl); 13. this.mode=static; 14. , 15. 16. /實(shí) 現(xiàn)父類抽象方法，向頁(yè)面添加默認(rèn)分頁(yè) 17. addPage:function(xmlhttp) 18. this.wrap.innerHTML=xmlhttp.responseText; 19. this.pageTotal=this.wrap.getElementsByTagName(tbody).length; 20. vartable=$(pages); 21. varpages=$A(table.getElementsByTagName(tbody); 22. displayPage=pages0; 23. displayPage.className=; 24. , 25. 26. /實(shí) 現(xiàn)父類抽象方法，向頁(yè)面添加分頁(yè)導(dǎo)航 27. addNavigation:function() 28. if(this.pageTotal1) 29. varnavigation=document.createElement(div); 30. navigation.id=navigation; 31. varcontext=this; 32. $R(1,this.pageTotal,false).each( 33. function(item) 34. varlink=document.createElement(a); 35. link.href=#; 36. link.onclick=context._changePage.bindAsEventListener(context,link); 37. link.appendChild(document.createTextNode(item); 38. if(item=1) 39. link.className=active; 40. 41. navigation.appendChild(link); 42. 43. ); 44. this.wrap.appendChild(navigation); 45. 46. , 47. 48. /導(dǎo) 航鏈接點(diǎn)擊事件處理函數(shù)，切換頁(yè)面內(nèi)容,同時(shí)改變導(dǎo)航鏈接樣式（突出顯示當(dāng)前頁(yè)） 49. _changePage:function(event,link) 50. varactiveLink=$(#TMPwrapdivaclass=active)0; 51. if(activeLink!=link) 52. varpages=$(#TMPwraptbody); 53. varoldPage=pages.find( 54. function(item) 55. returnitem.className=; 56. 57. ); 58. varnewPage=pageslink.firstChild.nodeValue-1; /inner系列屬性不兼容ff 59. oldPage.className=hidden; 60. newPage.className=; 61. activeLink.className=; 62. link.className=active; 63. 64. Event.stop(event); 65. 66. 67. ); 這樣，我們就完成了靜態(tài)分頁(yè)模板的設(shè)計(jì)和實(shí)現(xiàn)，下一步是實(shí)現(xiàn)動(dòng)態(tài)異步的兩種獲取方式模板。在前面兩篇文章中，我們實(shí)現(xiàn)了靜態(tài)表格分頁(yè)模板，下面讓我們繼續(xù)討論，如何實(shí)現(xiàn)另外兩種數(shù)據(jù)獲取方式的模板。要緩解服務(wù)器的壓力，我們可以這樣做：1、顯示初始頁(yè)面也就是第一頁(yè)的時(shí)候，我們構(gòu)造好表頭、標(biāo)題和第一頁(yè)的數(shù)據(jù)，并按照服務(wù)器返回的總頁(yè)數(shù)生成導(dǎo)航鏈接，之后將不再更新這部分重復(fù)的內(nèi)容；2、對(duì)于每一頁(yè)新內(nèi)容，我們?cè)邳c(diǎn)擊頁(yè)碼鏈接的時(shí)候再動(dòng)態(tài)向服務(wù)器獲取數(shù)據(jù)，服務(wù)器根據(jù)所請(qǐng)求的頁(yè)碼返回特定頁(yè)的內(nèi)容，替換掉當(dāng)前顯示的頁(yè)面數(shù)據(jù)，這樣可以 減少網(wǎng)絡(luò)帶寬的使用，畢竟每次只返回一頁(yè)的內(nèi)容；3、對(duì)于數(shù)據(jù)更新頻繁的分頁(yè)系統(tǒng)，就按照上面的辦法每次獲取新數(shù)據(jù)；而對(duì)于不是很頻繁的數(shù)據(jù)，我們提供一種客戶端緩存機(jī)制來(lái)加快響應(yīng)速度和減輕服務(wù)器壓 力：通過(guò)一個(gè)全局的cache數(shù)組來(lái)存放服務(wù)器端之前返回的數(shù)據(jù)，在切換頁(yè)面的時(shí)候，先查詢緩存，如果沒(méi)有命中，再向服務(wù)器發(fā)起異步請(qǐng)求，當(dāng)響應(yīng)到達(dá)的時(shí) 候，也會(huì)將此次數(shù)據(jù)存入緩存以供使用。按照上面的分析，可以發(fā)現(xiàn)這兩種數(shù)據(jù)獲取方式的模板有很多相似的地方，不同的只是緩存與否，我們可以將他們抽象成同一個(gè)類來(lái)實(shí)現(xiàn)，下面是 javascript代碼，我將在后面就一些需要注意的地方做詳細(xì)講解： js 代碼1. /* 2. *異步模板，每次請(qǐng)求一個(gè)頁(yè)面，并緩存瀏覽過(guò)的頁(yè)面(可選) 3. */ 4. varmixin=newTbi.StaticTemplate();/用于mixin（混入）對(duì)象方法addNavigation 5. Tbi.AsyncTemplate=Class.create(); 6. Tbi.AsyncTtotype=Object.extend(newTbi.Template(), 7. 8. initialize:function(wrap,items,catchUrl,option) 9. this._init(wrap,items,catchUrl); 10. this.mode=async; 11. /option為可選參數(shù)，設(shè)置初始顯示頁(yè)面以及是否緩存頁(yè)面 12. this.option=Object.extend(isCache:true,option); 13. if(this.option.isCache) 14. this.cache=newArray();/緩存數(shù)組; 15. 16. , 17. 18. /實(shí) 現(xiàn)父類抽象方法，向頁(yè)面添加默認(rèn)分頁(yè) 19. addPage:function(xmlhttp) 20. varoriginal=xmlhttp.responseText; 21. varhtml=original.stripScripts(); 22. this.wrap.innerHTML=html; 23. original.evalScripts(); 24. , 25. 26. /mixin(混 入)StaticTemplate類的同名方法，向頁(yè)面添加分頁(yè)導(dǎo)航 27. addNavigation:mixin.addNavigation,/方法劫 持，重用addNavigation添加分頁(yè)導(dǎo)航 28. 29. /導(dǎo) 航鏈接點(diǎn)擊事件處理函數(shù)，切換頁(yè)面內(nèi)容，同時(shí)改變導(dǎo)航鏈接樣式（突出顯示當(dāng)前頁(yè)） 30. _changePage:function(event,link) 31. varactiveLink=$(#TMPwrapdivaclass=active)0; 32. if(activeLink!=link) 33. link.className=active; 34. activeLink.className=; 35. this._displayPage(link); 36. 37. Event.stop(event); 38. , 39. 40. /根 據(jù)緩存標(biāo)志切換頁(yè)面內(nèi)容 41. _displayPage:function(link) 42. varpage=link.firstChild.nodeValue; 43. /如果是第一頁(yè)，且進(jìn)行緩存的話，直接切換頁(yè)面元素的可見(jiàn)性 44. if(page=1&this.cache) 45. $(default).className=; 46. $(swap).className=hidden; 47. 48. /否 則，根據(jù)緩存標(biāo)志，切換顯示其它頁(yè)（包括非緩存的默認(rèn)頁(yè)） 49. else 50. $(default).className=hidden; 51. varoldPage=$(swap); 52. swapPage=this._prompt(正在獲取數(shù)據(jù)); 53. $(pages).replaceChild(swapPage,oldPage); 54. this._showPage(page); 55. 56. , 57. 58. /顯 示提示信息 59. _prom