最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。

pjaxとは、pushState + ajax を意味する造語だそう。
そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。
これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。
さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。

https://github.com/defunkt/jquery-pjax

対応ブラウザは以下。
caniuse.com/#search=pushstate
pushStateが実装されていない、E9以下では使えません。

まずは静的ページへ実装してみます。

静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。

サンプル

Sample page

jquery と、jquery.pjax.jsを読み込んでいます。
その後、mypjax.jsで実装しています。

最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、
animateのコールバックでpjaxするのが吉。

ブラウザがchromeなら、developer toolをつかってnetworkを見てみると、
サンプルでpjax遷移をすると新たにindex2.html?_pjax~ というページが読み込まれてます。
ただこの状態では、ページ遷移の時にhtmlが全部読み込まれています。折角のajaxなので、必要な部分だけ読み込むようにしてやればパフォーマンスをもっと伸ばせますね。
そこで、request header をみてやると、X-PJAX:trueやX-PJAX-Container:#pjax-containerという情報が見られます。
ということは、サーバーサイドの実装では、phpなどで

や、

のような形でpjaxでの遷移かどうかを判別出来るので、ここで書き出しの判定をしてやれば新しく読み込む場所、読み込まない場所を制限できます。


Leave a Reply

Your email address will not be published. Required fields are marked *