pjax是乙個jquery外掛程式,結合ajax和pushstate,能夠快速的實現頁面重新整理和url修改。頁面a鏈結和表單提交都能觸發pjax請求,伺服器返回請求的html片段,區域性替換頁面內容同時把url推送到歷史記錄中,有效降低了負載。
一、實現基礎
1.在html4,histroy物件有下面屬性方法:
2.在html5中,新增兩個方法:
pushstate(data, title [, url]):往歷史堆疊的頂部新增一條記錄。data為乙個物件或null,它會在觸發window的popstate事件(window.onpopstate)時,作為引數的state屬性傳遞過去;title為頁面的標題,但當前所有瀏覽器都忽略這個引數;url為頁面的url,不寫則為當前頁。
replacestate(data, title [, url]):更改當前頁面的歷史記錄。引數同上。這種更改並不會去訪問該url。
二、ajax與pjax區別:
pjax = pushstate+ajax
ajax無法修改url,不利於seo
pjax可以在區域性更新頁面內容的同時也改變瀏覽器url
一般ajax獲取的是資料,由前台解析渲染,pjax獲取的是html片段
三、pjax請求傳送
在request headers中有以下項:
x-pjax:true
x-pjax-container:#list-container //非必須
四、使用方法
<?php
useyii\widgets\pjax;
?>
<?php pjax::begin(); ?>
content that needs to be updated
<?php pjax::end(); ?>
可以配置pjax小部件,指定哪些鏈結使用pjax方式提交以及是否將新的url推送到歷史記錄中去,或者替換當前url等。
尤其適用於多選項卡切換的頁面,也可用於gridview,activeform等控制項上,如下:
<?php pjax::begin(); ?>
<?= gridview::widget([
'dataprovider' => $dataprovider,
'filtermodel' => $searchmodel,
'columns' => [
['class' => 'yii\grid\serialcolumn'],
'id',
'branch:ntext',
...],
]); ?>
<?php pjax::end(); ?>
五、注意
a>
2.如果不改變瀏覽器url,需要如下設定:
<?php pjax::begin(['enablepushstate' => false]); ?>
content that needs to be updated
<?php pjax::end(); ?>
引用資料:
pjax使用小結
雖然傳統的ajax方式可以非同步無重新整理改變頁面內容,但無法改變頁面url,因此有種方案是在內容發生改變後通過改變url的hash的方式獲得更好的可訪問性 如但是hash的方式有時候不能很好的處理瀏覽器的前進 後退,而且常規 要切換到這種方式還要做不少額外的處理。而pjax的出現就是為了解決這些問...
簡述負載均衡 CDN技術
曾經見到知乎上有人問 為什麼像facebook這類的 需要上千個工程師維護?下面的回答多種多樣,但總結起來就是 乙個高效能的web系統需要從無數個角度去考慮他,大到伺服器的布局,小到軟體中某個檔案的實現,甚至於某個迴圈內的運算如果出現不嚴謹都可能導致全盤崩潰。上面提到web效能優化需要多個角度去考慮...
簡述Php指令碼注入技術
php的環境一般是apache php mysql,平常配置伺服器一般是開啟php.ini裡的安全模式,將safe mode設為on,還有就是將display erors設為off,即關閉錯誤顯示。還有乙個非常重要的配置選項 magic quotes gpc,高版本預設為on,以前的版本中預設為of...