Ajaxがブラウザに非同期にロードする機能をもたらし、データ検証、ローカルリフレッシュなどのユーザーエクスペリエンスを改善する能力があることを知っていますが、同時に次の問題があります。
1.更新せずにページコンテンツを変更することはできますが、ページURLを変更することはできません
2。ハッシュメソッドは、ブラウザの前方、後方、その他の問題を処理できません
従来のAJAXによって引き起こされる問題を解決するために、HTML5は履歴APIを強化し、プッシュステートを追加し、インターフェイスを置き換え、ポップスティートイベントを追加します。ここで詳しくは紹介しません。この知識を持っていない学生は、最初に関連情報を見ることをお勧めします。
PJAXプラグインは、PushStateとAjaxの操作をカプセル化し、そのようなWebアプリケーションを開発する簡単な方法を提供します。特定の手順は次のとおりです。
ローカルアップデートが必要なコンテナを定義します
<div id = "container"> </div>
pjaxを初期化し、URLを聞きます
コードコピーは次のとおりです。
$(function(){
// pjax
$(document).pjax( 'a'、 '#container');
$ .pjax.reload( '#container');
})
バックエンドはpjaxリクエストを処理します
バックエンドの処理ロジックは、最初にPJAXリクエストであるかどうかを判断することです。その場合は、要求パラメーターに従ってローカルコンテンツを返し、レイアウトを返してから、 `$ .pjax.reload( '#container');`でpjax要求を開始します。上記のロジックによると、次のコードを書くことができます。
コードコピーは次のとおりです。
var pjaxfilter = function(req、res、next){
if(req.get( 'x-pjax')){
次();
戻る;
}
// PJAXリクエストでない場合は、レイアウトテンプレートに直接返送してください
Res.Render( 'Layout'、{title: 'pjax simple demo'});
};
router.get( '/'、pjaxfilter、function(req、res){
res.Render( 'index');
});
router.get( '/poem/:id'、pjaxfilter、function(req、res){
var poemid = req.params.id;
Res.Render( 'Poem/' + Poemid);
})
フルコード:pjax-demo
これは、PJAXの最も基本的な機能です。 PJAXは豊富なAPIを提供します。jquery-pjaxにアクセスしてください