http://www.helloweba.com/view-blog-387.html
前面我有文章介紹了前端路由和Pjax單頁面應用方面的實例應用，今天我來和大家分享一個單頁面應用神器jquery.pjax.js。它是基於jQuery的pjax插件，使用方便，功能完善。我會結合實例給大家講解使用jquery.pjax.js。
在上一期文章中，我們了解了Pjax的實現原理，它就是利用了HTML5的Pushstate+ajax增強了頁面局部刷新功能，它在我們原有的ajax功能上，實現了可以記錄瀏覽歷史，可以使用瀏覽器前進后退功能，瀏覽器的url可以跟隨內容變化，而整個頁面可以只刷新某一部分，也就是局部刷新。
今天我要給大家分享的這個實例是模擬分頁功能，分頁是在web開發中最常見的組件之一。正常情況下，點擊分頁組件中的頁面，頁面會跳轉到對應的頁面，而使用Pjax后，點擊頁碼時，會發送一個ajax請求到后端，響應后更新對應的頁面內容部分，同時地址欄url也對應實際的頁碼url，但整個頁面並沒有跳轉，給我們的感覺是非常流暢，當然，我們也可以在請求頁面異步時增加加載動畫效果。來看具體的使用方法。
HTML
我們准備一個加載div#loading,默認隱藏，ajax請求的時候才顯示。#container是用來加載響應的頁面內容。.pagination是分頁條組件。
<div class="row"> <div id="loading">Loading...</div> <div id="container">jQuery.pjax分頁</div> <nav> <ul class="pagination"> <li><a href="data.php?p=1">1</a></li> <li><a href="data.php?p=2">2</a></li> <li><a href="data.php?p=3">3</a></li> <li><a href="data.php?p=4">4</a></li> <li><a href="data.php?p=5">5</a></li> </ul> </nav> </div>
Javascript
我們使用的pjax組件依賴jQuery庫，所以先將這兩個文件加載。
<script src="jquery-2.0.0.min.js"></script> <script src="jquery.pjax.js"></script>
然后，使用以下代碼調用pjax插件。
$(document).pjax('.pagination a', '#container');
$(document).on('pjax:send', function() {
$('#loading').show();
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
})
上面的代碼中，我們告訴pjax監聽一個標簽和使用 #container 作為目標容器：
$(document).pjax('.pagination a', '#container');
現在在pjax兼容瀏覽器，點擊分頁條上的頁碼，網頁的內容容器 #container 中的內容將被 data.php?p=x 的內容替換。
data.php的內容我們簡單的寫個代碼，實際開發中應該是讀取數據庫中的數據列表。
$p = intval($_GET['p']); if($p==0) $p=1; echo '這是第'.$p.'頁';
選項與事件
pjax的調用方法我們剛才簡單介紹了，它還可以設置一些選項用來定制。格式如下：
$(document).pjax(selector, [container], options)
selector 是一個字符串，比如要點擊的文本 event delegation.
container 是一個字符串，選擇唯一標識pjax容器。
options 下面所描述的一個對象。
| 參數 | 描述 | 默認值 |
| timeout | Ajax超時毫秒之后完全強制刷新 | 650 |
| push | 使用 pushState 在導航中添加瀏覽器歷史記錄 | true |
| replace | 更換網址不添加瀏覽器歷史記錄 | false |
| maxCacheLength | 大緩存大小為以前的容器內容 | 20 |
| version | 一個字符串或函數返回當前pjax版 | |
| scrollTo | 垂直位置以滾動導航。為了避免改變滾動位置，通過設置為 false. | 0 |
| type | 網頁請求的方式 | "GET" |
| dataType | 返回的數據類型 | "html" |
| container | CSS選擇器的元素，其中的內容應及時更換 | |
| url | 字符串或函數返回的URL ajax請求 | link.href |
| target | 最終 relatedTarget 的值，通過 pjax events | link |
| fragment | CSS選擇器的碎片從Ajax響應提取 |
事件方法
| 事件 | 描述 |
| pjax:click | 阻止一個鏈接的默認事件，防止阻止pjax事件 |
| pjax:beforeSend | 參見 XHR headers |
| pjax:start | 請求開始 |
| pjax:send | 發送請求 |
| pjax:clicked | pjax后，已經得到了從點擊一個鏈接開始 |
| pjax:beforeReplace | 在內容被替換前，HTML從服務器加載的內容 |
| pjax:success | 在內容被替換后，HTML 內容從服務器加載 |
| pjax:timeout | 在選項 options.timeout;之后除非取消，否則將很難刷新 |
| pjax:error | 一個ajax錯誤，將執行原始的網頁刷新，直到網頁加載被取消 |
| pjax:complete | 總是在pjax執行完成以后調用，不論運行的結果 |
| pjax:end | 請求結束 |
| pjax:popstate | 瀏覽器前進后退事件 direction 屬性：”back”/”forward” |
$.pjax還能響應點擊事件，以及提交表單和重新加載事件。詳情請參考jquery.pjax項目地址：https://github.com/defunkt/jquery-pjax