pjax.md

pjaxのメモ

window.history

• go()
• back()
• forward()
• pushState()
• replaceState()
• state

pjaxって

APIを使ってブラウザの履歴を操作することができる pushstate, popstate HTML5では、window.historyにいくつか拡張が ajaxの際に履歴をブラウザに差し込み、現在のurlまで遷移させることが可能

history.pushState history.replaceState popstateイベント

ハッシュフラグメント

hashchangeイベント

これまでのajaxの問題

urlが書きかわらん ブラウザの戻るやリロードをすると残念なことになる

ライブラリ

defunkt/jquery-pjax

• ハイレベル
• ajax + history
• AjaxとHTML5 History APIを使ってAjaxでページを更新するためのインターフェースを 提供するためにHistory APIを利用している

browserstate/history.js

• ローレベル
• クロスブラウザ対応のHTML5 History APIインターフェース

まとまっていないメモ

JavaScriptに非対応であったり無効にしているブラウザに対しては、通常のページ遷移が発生する方法でページを更新する。 そうでなく、pushState対応である場合には、ページ遷移を発生することなくページの一部だけを取得し動的にページを更新する。 ajaxにurl書きかえ機能がついて、ハッシュフラグメントを用いてやっていたようなことができる

HTML5 History API

ページのリロードはせず、URLを書きかえて履歴に残す

history.pushState()

履歴エントリの追加

history.replaceState()

履歴エントリの修正

popstateの発火タイミング

ページがリロードしない履歴遷移(戻る/進む)で発生 ハッシュチェンジでも発生 アクティブな履歴エントリが変更される度にウィンドウへpopstateイベントが発行される

history.js

イベント

• window.onstatechange

• ページの状態が変化したときに発火する
• hash changes を含まない
• onpopstateと同じ。伝統的なアンカーに対して発火しない点以外は。
• hisotry.jsでは、popstateの代わりにstatechange使用する

• window.onanchorchange

• ページのアンカーが変化したときに発火する
• state hashes を含まない
• onhashchangeと同じ。statesに対して発火しない点以外は。