33
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

defunkt/jquery-pjaxの使い方

Last updated at Posted at 2015-12-13

こんにちは、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-pjaxdefunkt/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]

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が終了したときに発生');

作りたい動きはあるが、それぞれのイベントの実行タイミングがわからない!という方の参考になれば幸いです。

33
36
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?