Pjaxでロード
最近流行ってるらしいPjax。(pushState + Ajaxの造語らしい)
ちょっと使うことがあったので、調べたこととかをメモっておく。
どういう技術かというと、例えば何かリンクをクリックしたときに、一部分だけ書き換わって、ページ全体が書き換わっているわけではないのに、ブラウザのURLは変わっているということができる技術。
ブラウザのURLが変わっているので「戻る」ことや「進む」こともできる。
そこらへんがAjaxと違うところ。
HTML5で履歴を操作できるpushStateが実装されたので出てきたみたい。
ページの一部だけ書き換えるので、通信量も減るし、レンダリングも速い。
よく使うところだと、ニコニコのマイページのマイリスト切り替え部分がそういうっぽい動きをしている。(とりあえずマイリストのところだけページ全体ロードになってる気もする)
jQuery-pjaxっていうライブラリが提供されているんだけど、どうも以前使ったときはうまく動かなかった。
なので、ここのページを参考にして自分でも実装してみた。
参考にしたページとの処理の違いは、リロード時の動作の違いだと思う。自分が試したときはリロード時に2回ロードが走ってしまうような感じだったので、ちょっと処理を変えた。
以下、サンプルなコード。
PHP側
サーバーサイド(PHP側)ではPjax通信でアクセスしないときは、ページ全体を返して、Pjax通信の時はコンテンツだけを返すという実装。
CoffeeScript側(JavaScript側)
クライアント側の実装は、通常のAjax通信+可能であればpushState()を行って感じ。
通常のAjax通信を行なっているので、pushStateに対応していないブラウザでもコンテンツは更新される。
通常のAjax通信を行なっているので、pushStateに対応していないブラウザでもコンテンツは更新される。
あとは適当なボタンとかリンクのクリックイベントでload(url)が走るようにすれば動くはず・・・