PJAX技術

pjaxはajax+pushStateのパッケージで、pushStateテクノロジーを簡単に使用できます.
表現
chromeやfirefoxなどのブラウザを使ってgithubにアクセスするとcomサイトでは、ほとんどの構造が同じページ間のクリックがajaxによって非同期で要求されていることがわかります.同時に、ページのURLが変更されました(例えば、個人情報ページ、プロジェクト管理ページ、コードブラウズなど).しかし、ブラウザの前進と後退をサポートすることができます.HTML 5には新しいAPIが引用されています.どうやって?replaceState
HTML 4では、Histroyオブジェクトには次のプロパティメソッドがあります.
length:履歴スタックのレコード数.back():前のページに戻ります.forward():次のページに進みます.go([delta]):deltaは数字で、書かないか0であれば、このページをリフレッシュします.正数であれば、対応する数のページに進みます.負数の場合は、該当する数のページに戻ります.HTML 5には、次の2つの方法が追加されています.
pushState(data,title[,url]):履歴スタックの上部にレコードを追加します.Dataはオブジェクトまたはnullであり、windowのpopstateイベント(window.onpopstate)がトリガーされたときにパラメータのstate属性として渡されます.titleはページのタイトルですが、現在のすべてのブラウザではこのパラメータは無視されています.urlはページのURLで、書かないと現在のページです.replaceState(data,title[,url]):現在のページの履歴を変更します.パラメータは同じです.この変更はこのURLにアクセスしません.以上の2つのインタフェースでページURLを更新せずに変更することで,ajax,すなわち現在のpjax技術の生成に協力する.まず、ajaxが上記の効果を達成するために(ページURLを変更し、前進後退をサポートする)いくつかの問題について説明します.
ページの内容を更新することなく変更することは可能であるが、ページURLを変更することはできないよりアクセス性を高めるため、内容が変更された後、通常URLを変更するhash hashの方式はブラウザの前進、後退などの問題をうまく処理できず、さらにブラウザはonhashchangeのインタフェースを導入し、サポートされていないブラウザはhashが変更されたかどうかをタイミングで判断するしかなく、この方式は検索エンジンに対してとても友好的ではありませんPjaxの操作の流れ
ajaxで新しいコンテンツをロードします.これを使ってPushStateは、元のページを履歴に追加します.ロードが完了したらhistoryを使用します.replaceStateメソッドは、現在のurlを変更します.documentを使用します.title現在のページのタイトルを変更します.参加履歴:
1 var state = { 2

title: title,

3

url: options.url,

4

otherkey: othervalue

5 }; 6 window.history.pushState(state, document.title, url); stateオブジェクトはtitleとurlのほかに、他のデータを追加することもできます.replaceStateとpushStateはほぼ同じです.
プロセスの外で、前進後退操作の体験が一致することを保証するために:
応答ページのonpopstateイベント:
1 window.addEventListener('popstate', function(e){ 2 if (history.state){ 3

var state = e.state;

4

//do something(state.url, state.title);

5 } 6 }, false); Windowsオブジェクトにonpopstateイベントが提供され、historyが渡すstateオブジェクトがeventのサブオブジェクトとなり、格納されたtitleやURL(または他の当時格納されていたデータ)が入手できます.
バックエンドに対応するいくつかの処理:
このモードでは、現在ajaxを使用してリフレッシュブラウズを行わないほか、変更を直接要求したURLを正常にブラウズできることを保証するため、pushStateを使用したajaxに対してsetRequestHeader(‘PJAX’,‘true’)などの特殊なヘッダを送信する.バックエンドプログラムは、要求ヘッダが現在の要求がpjax要求であるか否かを判断することによって、応答の内容を変更する
以上の3ステップの補完によりpjax全体のプロセスが完了する
制限
転送されるURLは同じドメインの下にある必要があります.ドメイン間stateオブジェクトには多くのカスタム属性を格納できませんが、シーケンス化できないオブジェクトには、DOMオブジェクトなどの格納できません.最も重要なのはHTML 5だけがこの操作を実現できることです