首頁  >  文章  >  web前端  >  使用Yii整合的pjax(pushstate+ajax)實現無刷新載入頁面

使用Yii整合的pjax(pushstate+ajax)實現無刷新載入頁面

亚连
亚连原創
2018-05-24 17:29:561900瀏覽

這篇文章跟大家介紹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(&#39;jquery&#39;);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . &#39;/js/jquery-pjax/jquery.pjax.js&#39;);//具体以你存放pjax的实际位置为准
?>
<p id="nav">
  <a href="<?php echo Yii::app()->createUrl(&#39;article/index&#39;);?>">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 = &#39;//layouts/column1&#39;;
  $dataProvider = new CActiveDataProvider(&#39;Article&#39;, array(
    &#39;criteria&#39; => array(&#39;order&#39; => &#39;create_time DESC&#39;)
  ));
  if (array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;]) {
    $this->renderPartial(&#39;index&#39;, array(
       &#39;dataProvider&#39; => $dataProvider,
    ));
  } else {
    $this->render(&#39;index&#39;, array(
      &#39;dataProvider&#39; => $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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn