Ajax無刷新分頁，已經是一個大家比較熟悉的事物了，大概就是web前端頁面上有一個js的方法，通過Ajax去請求服務器端的分頁數據接口，拿到數據后再在頁面上創建html結構，展現給用戶，類似于下面這樣：

<script type=”text/javascript”>function getPage(pageIndex){ajax({url:” RemoteInterface.cgi”,method:”get”,data:{pageIndex:pageIndex},callback:callback});}function callback(datalist){//todo:根據返回的datalist數據創建html結構展現給用戶。}</script>

其中，RemoteInterface.cgi是一個服務器端的接口。我們這里限于篇幅，涉及的實例代碼可能都不是完整的，只為了把意思表達明白。

UI上，可能會有各種款式的分頁控件，大家也都比較熟悉，比如：

但無非都是用戶點擊控件觸發這里的getPage(pageIndex)方法，這個getPage方法可能不是那么簡單。

如果按照代碼片段1的寫法，我們可以想象，用戶每次點擊翻頁的時候，都會請求一次RemoteInterface.cgi，在忽略數據可能有更新的情況下，除了第一次，后面每次getPage(1) 、getPage(2)、getPage(3)等等所觸發的遠程接口請求以及在網絡上往返的數據流量，其實都是重復的、不必要的。每頁第一次請求的時候都可以把這些數據以某種形式緩存在頁面上，用戶如果有興趣回頭來看之前翻過的頁，getPage方法應該先檢查本地緩存當中是否包含該頁數據，如果有，則直接重新展現給用戶，而不是去調用遠程接口。按照這個想法，我們可以把代碼片段1修改一下，如下：

<script type=”text/javascript”>var pageDatalist={};function getPage(pageIndex){if(pageDatalist[pageIndex]){ //如果本地的數據列表中包含當前請求頁碼的數據showPage(pageDatalist[pageIndex])//直接展現當前數據}else{ajax({url:” RemoteInterface.cgi”,method:”get”,data:{pageIndex:pageIndex},callback:callback});}}function callback(pageIndex,datalist){pageDatalist[pageIndex]= datalist; //緩存數據showPage(datalist);//展現數據}function showPage(datalist){//todo:根據返回的datalist數據創建html結構展現給用戶。}</script>

這樣做一來節約網絡請求往返的時間，更重要的是節約寶貴的網絡流量和減輕接口服務器的負擔。在低網速環境下或者接口服務器運行壓力已經比較大的情況下，這種必要的改進更能顯現明顯的優化效果。大名鼎鼎的yahoo 34條，第一條就是盡量減少HTTP請求次數。Ajax的異步請求，毫無疑問也是在http請求的范疇內。訪問量小的web應用或許感覺沒有必要，但是想象一下，如果有一個這樣的頁面：每天訪問量1000萬次，用戶平均翻5頁，其中有一頁為重復查看。那么這樣一個頁面，按照代碼片段1的寫法，平均每天將觸發5000萬次的數據請求，而按照代碼片段2的寫法，則平均每天至少可減少1000萬次請求。如果每次請求的數據量是20kb，則可以節約1000萬*20kb=200,000,000kb 約合190G的網絡流量。這樣看節約的資源是相當可觀的。