使用Yii整合的pjax（pushstate+ajax）實現無重新整理載入頁面_AJAX相關

Pjax是啥？

Pjax = history.pushState + Ajax   = history.pushState + Async JS + XML(xhr?)

BOM對象history被增強了一波，主要是對曆史棧的操作，以前只有 replace , go 之類的，都會跳轉並重新整理整個頁面，現在有了 pushState , replaceState 等等單純操作曆史棧的方法，只是單純修改曆史棧裡的內容，沒有副作用（頁面不會跳轉重新整理）

PJAX效果

通過url可以跟蹤ajax的動態載入內容。這種技術尤其在two step view布局的視圖中有很大的好處。無重新整理載入頁面，意味著響應速度和使用者體驗得到了極大的提升，在靜態指令碼和通用模組比較多的情況下，最大程度上節省了重用部分的開銷。應用例子可以參考現在的google+、facebook和新版微博，同樣是基於html5的pushState實現。google plus的表現最為明顯，點擊導覽列地址，箭頭隨目標移動，同時載入的頁面淡入，效果很炫。

Dirty url 和 Clean url

在pjax出現之前，要實現頁面的無重新整理載入並通過url可以追蹤，需要瀏覽器支援window.location.hash屬性。通過判斷url#錨後記錄的地址來決定需要載入的內容，具體的構建方法是寫一個hashchange的監視函數，當觸發到hash改變時便判斷載入內容。它的不足在於，對於低版本的瀏覽器例如ie6不支援hash，需要另外構建一個iframe來記錄曆史url實現前進和後退。最大的問題，便是#後產生的內容不會被搜尋引擎索引到，google之前提供瞭解決方案，提倡使用#!把地址引導到一個?escape_fragment=url的請求地址中，我在twitter、facebook、人人、新浪微博和已經關閉了的豆瓣說中都看見曾經或正在使用這種hash bang。通過#！來實現無重新整理載入的url，由於一般的方法不容易被搜尋引擎收錄（例如國內百度），稱其為dirty url，相對而言，pjax能夠使用clean url得到同樣效果，並能很好地相容各種瀏覽器，是現在最為適合的方法

使用PHP+jQuery實現PJAX

不需要從頭編寫基於pushState的javascript外掛程式，因為jQuery已有項目把它開源出來，而且很輕易便能實現。目前我已經在開發中的項目裡引入，而且很好地在原有的基礎上相容，何況新版微博的推廣，我希望讓觀眾看到，我用完之後是這個樣子，你們用完之後也會是這個樣子

開始前的準備：

1. jQuery libray

2. 基於jQ的pjax外掛程式(github上的開源項目)  https://github.com/defunkt/jquery-pjax

3. PHP項目代碼（方便分享，本文使用yii架構示範，實際開發中大同小異）

一.前端實現

使用實在簡單，而且jquery-pjax這個外掛程式封裝得很好，絕對可以按照你的喜好來定製（例如複製g plus的效果），下面是一個整合以上步驟的基本html範例程式碼:

<?phpYii::app()->clientScript->registerCoreScript('jquery');Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/jquery-pjax/jquery.pjax.js');//具體以你存放pjax的實際位置為準?><div id="nav">  <a href="<?php echo Yii::app()->createUrl('article/index');?>">article</a></div><div id="main">替換的內容</div><script type="text/javascript">  $(document).ready(function(){    $("#main").pjax("a");  });</script>

最終的目的，就是點擊a標籤時，通過ajax返回的結果將id為main的div內的文字替換為相應的地址內容，url自動更新，同時頁面不會重新載入。下面開始實現後端要處理的內容

二.PHP端的實現

php端需要處理的任務主要是兩件：1.實現layout視圖布局  2.判斷pjax過來的請求

Yii架構中的實現：

在控制器中對action做如下處理(以Article的index為例)：

public function actionIndex() {  $this->layout = '//layouts/column1';  $dataProvider = new CActiveDataProvider('Article', array(    'criteria' => array('order' => 'create_time DESC')  ));  if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {    $this->renderPartial('index', array(       'dataProvider' => $dataProvider,    ));  } else {    $this->render('index', array(      'dataProvider' => $dataProvider,    ));  }}

效果示範圖：

點擊article連結或者文章連結後都會出現如下效果頁面：

--------------------------------------

jquery-pjax使用中需要注意的事項：

1.返回的模版內容不能為純文字，需要用html標籤包裹

2.外掛程式的使用方法，詳情參考github的項目說明，更新後使用方法或有不同

3.對於不支援pushstate的低版本瀏覽器，pjax外掛程式會自動判斷並使用傳統的頁面載入模式

4.當一個頁面的pjax請求時間超過設定時間時，會使用重新整理來載入，需要調整外掛程式內的相關參數

本文內容就全部敘述完了，希望對大家學習pjax（pushstate+ajax）有所協助。