使用jquery.pjax實現SPA單頁面應用

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