pjax技術簡述

2021-07-23 19:46:22 字數 1701 閱讀 6878

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...