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にアクセスしてください