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的實際位置為准 ?> <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)有所幫助。