使用Yii整合的pjax（pushstate+ajax）實現(xiàn)無刷新加載頁面

更新時間：2015年09月24日 10:01:13 投稿：mrr

本篇文章給大家介紹Yii整合pjax（pushstate+ajax）實現(xiàn)無刷新加載頁面，小伙伴跟著小編一起學習吧

Pjax是啥？

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

BOM對象history被增強了一波，主要是對歷史棧的操作，以前只有 replace , go 之類的，都會跳轉(zhuǎn)并刷新整個頁面，現(xiàn)在有了 pushState , replaceState 等等單純操作歷史棧的方法，只是單純修改歷史棧里的內(nèi)容，沒有副作用（頁面不會跳轉(zhuǎn)刷新）

PJAX效果

通過url可以跟蹤ajax的動態(tài)加載內(nèi)容。這種技術(shù)尤其在two step view布局的視圖中有很大的好處。無刷新加載頁面，意味著響應速度和用戶體驗得到了極大的提升，在靜態(tài)腳本和通用模塊比較多的情況下，最大程度上節(jié)省了重用部分的開銷。應用例子可以參考現(xiàn)在的google+、facebook和新版微博，同樣是基于html5的pushState實現(xiàn)。google plus的表現(xiàn)最為明顯，點擊導航欄地址，箭頭隨目標移動，同時加載的頁面淡入，效果很炫。

Dirty url 和 Clean url

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

使用PHP+jQuery實現(xiàn)PJAX

不需要從頭編寫基于pushState的javascript插件，因為jQuery已有項目把它開源出來，而且很輕易便能實現(xiàn)。目前我已經(jīng)在開發(fā)中的項目里引入，而且很好地在原有的基礎上兼容，何況新版微博的推廣，我希望讓觀眾看到，我用完之后是這個樣子，你們用完之后也會是這個樣子

開始前的準備：

1. jQuery libray

2. 基于jQ的pjax插件(github上的開源項目) https://github.com/defunkt/jquery-pjax

3. PHP項目代碼（方便分享，本文使用yii框架演示，實際開發(fā)中大同小異）

一.前端實現(xiàn)

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

<?php
Yii::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">替換的內(nèi)容</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("#main").pjax("a");
  });
</script>

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

二.PHP端的實現(xiàn)

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

Yii框架中的實現(xiàn)：

在控制器中對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,
    ));
  }
}

效果演示圖：