こんにちは、k_hatsushiです。LIGアドベントカレンダーの14日目です！
今回はdefunkt版pjaxプラグインについて書こうと思います。
pjaxとは
pushStateとAjaxの技術を組み合わせたjQeuryのプラグインのこと。
jQueryのanimateや、cssのtransition、animationを組み合わせて、遷移したように見えないのに、URLを変えることができます。
[pushState]
HTML5から導入されたHistoryAPIのメソッド。
ページ遷移せずにブラウザの履歴を追加できます。
[Ajax]
非同期通信でサーバーからデータをやりとりする技術。
jQueryだと
$.ajax({
type: 'GET',
url: '/parts/target.html',
dataType: 'html',
success: function(data) {
...
},
error:function() {
...
}
});
みたいな感じで簡単に書けますね。
[pjax]
上記二つの技術を合わせたもので、非同期通信をしつつURLを変更することができます。
※pushStateについてもっと詳しく知りたいという方は店長の書いた記事をご参照ください。
http://liginc.co.jp/web/js/other-js/162559
pjaxプラグインは同名で2つある
現在pjaxでググるとfalsandtru/jquery-pjaxとdefunkt/jquery-pjaxの2種類がひっかかりますが、それぞれ使い方が違うのでお気をつけください。（以前ハマりました。。）
冒頭にも書きましたが、今回のご紹介はdefunkt版です。
使い方
pjaxで使用するコードをざっと書いてみました。
[index.html]
<div class="btn">
<a class="js-pjax" href="change_contents.html">change!</a>
</div>
<div class="contents">
// ↓ここが塗り変わる↓
<p>変わる前</p>
// ↑ここが塗り変わる↑
</div>
[change_contents.html]
<div class="change-contents">
// ↓これに塗り変える↓
<p>SUCCESS！</p>
// ↑これに塗り変える↑
</div>
[app.js]
$(document).on('click', '.js-pjax', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.pjax({
url: href,
container: '.contents',
fragment: '.change-contents',
scrollTo: false
});
});
$(document).on('pjax:beforeSend', function() {
alert('ajaxリクエストが開始される前に発生');
});
$(document).on('pjax:popstate', function() {
alert('ブラウザの戻る進むなどを行った時に発生');
});
$(document).on('pjax:start', function() {
alert('pjaxが開始されたときに発生');
});
$(document).on('pjax:send', function() {
alert('ajaxリクエストを開始した後に発生');
});
$(document).on('pjax:success', function() {
alert('ajaxリクエストが成功した後に発生');
});
$(document).on('pjax:error', function() {
alert('ajaxリクエストが失敗した後に発生');
});
$(document).on('pjax:timeout', function() {
alert('タイムアウト時に発生');
});
$(document).on('pjax:complete', function() {
alert('ajaxリクエストが終了した後に発生');
});
$(document).on('pjax:end', function() {
alert('pjaxが終了したときに発生');
});
DOMを書き換える際イベントが消えてしまうため、
直接セレクターにではなく、全て$(document)にイベントをバインドさせています。
option
-
url
読み込むファイルのパスを指定します。 -
container
index.htmlのセレクターを記述します。 -
fragment
change_contents.htmlのセレクターを記述します。 -
scrollTo
DOM書き換え後にページのトップにスクロールするか指定できます。
実行順序
ボタンをクリックした時の実行結果の順序
alert('ajaxリクエストが開始される前に発生');
↓
alert('pjaxが開始されたときに発生');
↓
alert('ajaxリクエストを開始した後に発生');
↓
alert('ajaxリクエストが成功した後に発生'); or
alert('ajaxリクエストが失敗した後に発生'); or
alert('タイムアウト時に発生');
↓
alert('ajaxリクエストが終了した後に発生');
↓
alert('pjaxが終了したときに発生');
ブラウザの戻るor進むを押した時の実行結果の順序
alert('ブラウザの戻る進むなどを行った時に発生');
↓
alert('pjaxが開始されたときに発生');
↓
alert('pjaxが終了したときに発生');
作りたい動きはあるが、それぞれのイベントの実行タイミングがわからない！という方の参考になれば幸いです。