主頁 > 知識(shí)庫 > 使用Yii整合的pjax(pushstate+ajax)實(shí)現(xiàn)無刷新加載頁面

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

熱門標(biāo)簽:上海浦東百度地圖標(biāo)注中心注冊 百靈鳥 外呼系統(tǒng)獲取客戶手機(jī)號(hào) 青海醫(yī)療智能外呼系統(tǒng)怎么樣 襄陽外呼系統(tǒng)接口 徐州電銷卡外呼系統(tǒng)供應(yīng)商 科智聯(lián)智能電銷機(jī)器人 老虎郵局地圖標(biāo)注點(diǎn) 目標(biāo)三維地圖標(biāo)注

Pjax是啥?

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

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

PJAX效果

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

Dirty url 和 Clean url

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

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

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

開始前的準(zhǔn)備:

1. jQuery libray

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

3. PHP項(xiàng)目代碼(方便分享,本文使用yii框架演示,實(shí)際開發(fā)中大同小異)

一.前端實(shí)現(xiàn)

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

?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/jquery-pjax/jquery.pjax.js');//具體以你存放pjax的實(shí)際位置為準(zhǔn)
?>
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>

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

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

php端需要處理的任務(wù)主要是兩件:1.實(shí)現(xiàn)layout視圖布局  2.判斷pjax過來的請(qǐng)求

Yii框架中的實(shí)現(xiàn):

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

效果演示圖:

點(diǎn)擊article鏈接或者文章鏈接后都會(huì)出現(xiàn)如下效果頁面:

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

jquery-pjax使用中需要注意的事項(xiàng):

1.返回的模版內(nèi)容不能為純文本,需要用html標(biāo)簽包裹

2.插件的使用方法,詳情參考github的項(xiàng)目說明,更新后使用方法或有不同

3.對(duì)于不支持pushstate的低版本瀏覽器,pjax插件會(huì)自動(dòng)判斷并使用傳統(tǒng)的頁面加載模式

4.當(dāng)一個(gè)頁面的pjax請(qǐng)求時(shí)間超過設(shè)定時(shí)間時(shí),會(huì)使用刷新來加載,需要調(diào)整插件內(nèi)的相關(guān)參數(shù)

本文內(nèi)容就全部敘述完了,希望對(duì)大家學(xué)習(xí)pjax(pushstate+ajax)有所幫助。

您可能感興趣的文章:
  • PHP的Yii框架中創(chuàng)建視圖和渲染視圖的方法詳解
  • Yii框架調(diào)試心得--在頁面輸出執(zhí)行sql語句
  • yii2 頁面底部加載css和js的技巧
  • 在Yii2特定頁面如何禁用調(diào)試工具欄Debug Toolbar詳解
  • Yii框架在頁面輸出執(zhí)行sql語句以方便調(diào)試的實(shí)現(xiàn)方法
  • Yii 2.0如何使用頁面緩存方法示例
  • YII框架頁面緩存操作示例
  • 深入淺析yii2-gii自定義模板的方法
  • yii,CI,yaf框架+smarty模板使用方法
  • 從零開始學(xué)YII2框架(六)高級(jí)應(yīng)用程序模板
  • PHP 基于Yii框架中使用smarty模板的方法詳解
  • Yii框架頁面渲染操作實(shí)例詳解

標(biāo)簽:辛集 揭陽 商洛 股票 佛山 咸寧 紅河 荊州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用Yii整合的pjax(pushstate+ajax)實(shí)現(xiàn)無刷新加載頁面》,本文關(guān)鍵詞  使用,Yii,整合,的,pjax,pushstate+ajax,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用Yii整合的pjax(pushstate+ajax)實(shí)現(xiàn)無刷新加載頁面》相關(guān)的同類信息!
  • 本頁收集關(guān)于使用Yii整合的pjax(pushstate+ajax)實(shí)現(xiàn)無刷新加載頁面的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章