pjaxを使用して更新なし変更ページurlを実現

ajaxはブラウザに非同期ロード能力をもたらし、データ検証、ローカルリフレッシュなどの面でユーザー体験を向上させたことはよく知られていますが、同時に以下の問題があります.
1.ページ内容を更新変更することはできないが、ページURLを変更することはできない.hashの方式はブラウザの前進、後退などの問題をうまく処理できない.
従来のajaxがもたらす問題を解決するために、HTML 5にはhistory APIが強化され、pushState、replaceStateインタフェース、popstateイベントが加わった.ここでは詳しく紹介しませんが、この方面の知識がない学生はまず関連資料を見ることをお勧めします.
pjaxプラグインはpushStateとajax操作をカプセル化し、このようなwebアプリケーションを開発する簡単な方法を提供しています.具体的な手順は以下の通りです.
ローカル更新が必要なコンテナの定義
pjaxの初期化、URLの傍受

 
  
 $(function(){ 
  
 // pjax 
  
 $(document).pjax('a', '#container'); 
  
 $.pjax.reload('#container'); 
  
 }) 
  
 
 

バックエンド処理pjaxリクエスト
バックエンドの処理ロジックは、まずpjaxリクエストであるか否かを判断し、もしそうであれば、リクエストパラメータに基づいてローカルコンテンツを返す、そうでなければlayoutレイアウトを返し、`$から.pjax.reload('#container');`pjaxリクエストを開始します.上記の論理に基づいて、次のコードを書くことができます.

 
  
 var pjaxFilter = function(req, res, next) { 
  
 if (req.get('X-PJAX')) { 
  
 next(); 
  
 return; 
  
 } 
  
 //    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にアクセスしてください.