Pjaxでロード

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

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

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

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