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

《AJAX分頁(yè)模板說(shuō)明和實(shí)例》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、AJAX表格分頁(yè)模板：探討基于Prototype框架的javascript面向?qū)ο笤O(shè)計(jì)?2008-04-30作者：笨笨狗出處:javaeye.com?數(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ù)，切換

2、頁(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ù)器端——?

3、??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.????????