前面文章介紹了前端路由簡單實現和Pjax入門方面的文章，今天來分享一個單頁面應用神器jquery.pjax.js。
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
/********/