PJAXはAjaxとpushStateを組み合わせて非同期通信でページの切り替えを行うjQueryプラグインです。
指定したエリアのみ通信が発生するので、スムーズなページ遷移が可能です。
対応ブラウザはIE10+、その他モダンブラウザです。
特徴と機能は公式サイトによると以下の通りです。
特徴
- プリロードによる高速化
- データバインディングによるサーバー負荷軽減
- クライアントサイドロードバランサによるネットワーク負荷分散
- CSS・SCRIPT・RSSなどHEAD要素の同期
- URL・TITLEなど項目別の更新無効化
- pjaxの一般的諸問題の解決
機能
- Ajax処理の継承
- RSS・viewport等の同期
- CSSの同期
- JavaScriptの読み込み
- 複数範囲の更新
- 更新範囲の候補設定
- pjaxを使用するURL範囲の設定
引用元:http://falsandtru.github.io/jquery-pjax/introduction/
必要なファイルを読み込む
PJAXの配布元サイトからプラグインをダウンロードして、jQueryと一緒に読み込みます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.pjax.min.js"></script>
html、CSSを記述する
今回は表示を切り替えたいエリアを#mainで囲っています。
1ページ目のhtml
<article> <header> <h1>jQuery-非同期通信でページを切り替えるPJAXの使い方</h1> </header> <div id="main"> <section> <h2>Page1</h2> <p class="button"><a href="pjax2.html">Next</a></p> </section> </div> <footer><p class="back"><a href="/">« back to top</a></p></footer> </article>
2ページ目のhtml
#mainエリアに表示させたい内容を記述します。
1ページ目でNextボタンを押下した後に読み込まれるのは#mainで囲った部分のみなので、その部分のhtmlのみでもOKなのですが、2ページ目をブックマークなどから直接表示した場合、#main以外の部分が表示されなくなってしまうので、今回は差分以外も記述しています。
<article> <header> <h1>jQuery-非同期通信でページを切り替えるPJAXの使い方</h1> </header> <div id="main"> <section> <h2>Page2</h2> <p class="button"><a href="pjax.html">Back</a></p> </section> </div> <footer><p class="back"><a href="/">« back to top</a></p></footer> </article>
表示する時のCSSアニメーション
#mainが表示された時にフェードインするアニメーションをCSSで指定しています。
#main { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
PJAX用の設定をする
4行目で切り替えエリアとして#mainを指定しています。
次に、更新範囲の描画後にアニメーション用のclassを追加するように指定しています。
$(function() { $.pjax({ area: '#main' }); //表示アニメーションのクラスを追加 $(document).bind('pjax:render', function() { $('#main').attr({ 'class': 'fadeInUp' }); }); });
特定のリンク先のみPJAXを使いたい場合
以下のように指定すると、aタグにpjaxというクラス名がついていた場合のみ、リンク先にPJAXを使用して切り替わります。
$.pjax({ link: 'a.pjax' });