Help us understand the problem. What is going on with this article?

defunkt/jquery-pjaxの使い方

More than 3 years have passed since last update.

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

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

liginc
上野でウェブ制作を行うクリエイティブ集団です。HP制作、プロモーション、システム開発等を行っています。
https://liginc.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした