Pjaxでロード - 工作とかプログラミングとか

最近流行ってるらしいPjax。(pushState + Ajaxの造語らしい)

ちょっと使うことがあったので、調べたこととかをメモっておく。

どういう技術かというと、例えば何かリンクをクリックしたときに、一部分だけ書き換わって、ページ全体が書き換わっているわけではないのに、ブラウザのURLは変わっているということができる技術。
ブラウザのURLが変わっているので「戻る」ことや「進む」こともできる。
そこらへんがAjaxと違うところ。

HTML5で履歴を操作できるpushStateが実装されたので出てきたみたい。

ページの一部だけ書き換えるので、通信量も減るし、レンダリングも速い。

よく使うところだと、ニコニコのマイページのマイリスト切り替え部分がそういうっぽい動きをしている。(とりあえずマイリストのところだけページ全体ロードになってる気もする)

jQuery-pjaxっていうライブラリが提供されているんだけど、どうも以前使ったときはうまく動かなかった。

なので、ここのページを参考にして自分でも実装してみた。

参考にしたページとの処理の違いは、リロード時の動作の違いだと思う。自分が試したときはリロード時に2回ロードが走ってしまうような感じだったので、ちょっと処理を変えた。

以下、サンプルなコード。

サーバーサイド(PHP側)ではPjax通信でアクセスしないときは、ページ全体を返して、Pjax通信の時はコンテンツだけを返すという実装。

CoffeeScript側(JavaScript側)

クライアント側の実装は、通常のAjax通信＋可能であればpushState()を行って感じ。
通常のAjax通信を行なっているので、pushStateに対応していないブラウザでもコンテンツは更新される。

あとは適当なボタンとかリンクのクリックイベントでload(url)が走るようにすれば動くはず・・・