這篇文章跟大家介紹Yii整合pjax（pushstate 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範例程式碼:
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/jquery-pjax/jquery.pjax.js');//具体以你存放pjax的实际位置为准
?>
<p id="nav">
<a href="<?php echo Yii::app()->createUrl('article/index');?>">article</a>
</p>
<p id="main">替换的内容</p>
<script type="text/javascript">
$(document).ready(function(){
$("#main").pjax("a");
});
</script>登入後複製
最終的目的，就是點擊a標籤時，透過ajax回傳的結果將id為main的p內的文字替換為對應的位址內容，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請求時間超過設定時間時，會使用刷新來加載，需要調整插件內的相關參數
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
jquery與php結合實作AJAX長輪詢
js ajax載入時的進度條碼
#初步了解JavaScript，Ajax，jQuery，並比較三者關係
#
以上是使用Yii整合的pjax（pushstate+ajax）實現無刷新載入頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
