このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

pjaxとは

pjaxはpushStateとajaxを組み合わせた造語（pushState + ajax = pjax）となります。

 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。

詳しい詳細はこちらの記事を参考によろしくお願い致します。

HTML5 History APIについて

再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。

　ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!（hashbang）を用いた場合のURLと表示内容の不一致の改善を行うことが出来たりします。

対応ブラウザはHTML5 pushStateが対応しているブラウザとなるため、IEなどでは使用できないとなります。

そんな技術を手軽で、非対応ブラウザに関しては別の処理を行う、容易に導入可能なjqueryのプラグインとして用意されているものがあります。

jquery-pjax

その名もjquery-pjax。となります。githubの方が開発したプラグインであり、githubでもこの技術はつかわれております。

jqueryのプラグインなのでjqueryは必須となってきます。

特徴

特徴としてあげられるのが、

「サーバー側の設定やコードのインストール等の作業が不要」

「ページ単位にpjaxによる移動の可否をHTMLで指定可能」

「同時に複数の領域を更新」

「更新までの待ち時間を設定可能。」

などが挙げられます。

ダウンロード

GitHub：https://github.com/falsandtru/jquery.pjax.js

ファイル：https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js

jquery-pjaxの動作なのですが、まず、現在のブラウザがpjaxを使用できるかを確認し、ajax時の通信の際「X-PJAX」というリクエストヘッダーを付加します。pjaxが使えない場合は通常のリクエストを送信する動作となっております。

「X-PJAX」という特別なリクエストヘッダーを付加するので、サーバー側でも対応が可能となっております。

「X-PJAX」というリクエストヘッダーが存在する場合はpjaxの処理を、存在しないのであれば通常の処理を。等使い分けることが可能となっております。

使い方

それでは使って行きましょう。

まず、jQueryが必要ですので、jQueryの読みこみを行います。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

そしてダウンロードしたjquery.pjax.jsのファイルを読み込みます。

<script type="text/javascript" src="jquery.pjax.js"></script>

 

読み込むファイルはこの２つのファイルとなります。

では実際に検証してみましょう。まずは同ファイル内ページでのコンテンツの入れ替えのTestを。

pjax

$.pjax({
  container : '#changeContent',
  fragment : '#pjaxContent',
  timeout : 1000
});

pjaxの設定は上記の様な感じで設定していきます。（詳細は後ほど）

続いてHTMLの準備。

HTML

<a class="pjax" href="#">入れ替え</a>
<div id="changeContent">
  <p>１つめのdiv#contentになります。（入れ替わる）</p>
</div>
<p>===============================</p>
<div>
  <p>２つめのdivになります。</p>
</div>
<p>===============================</p>
<div id="pjaxContent">
  <p>3つめのdivになります。</p>
</div>

１つめのdiv#contentに3つめのdiv#pjaxContentに差し替えます。 a class=”pjax”をトリガーにするscriptを記述。

$(document).on('click', 'a.pjax', function(e) {
  e.preventDefault();
  $.pjax({
    container : '#changeContent',
    fragment : '#pjaxContent',
    timeout : 1000
  });
});

デモページ

http://webcyou.com/demo/js/pjax/index001.html

とりあえずこれでdiv#changeContent内のコンテンツがdiv#pjaxContent内のコンテンツに差し替わります。簡単ですね。で、何がpjaxかと言われますと、「入れ替え」のリンクをクリックする度に履歴が増えているかと思います。 これがHTML5 pushStateの機能となり、ブラウザの戻るでクリックをする前に戻る事が可能となってきます。 この他にも、もちろん別ファイル内のコンテンツを取得し、入れ替えを行うことも出来ます。 それではそちらのテストを行います。 HTML 1ページ目 index-b001.html

<h1>pjax test</h1>
<ul class="links">
	<li><a class="pjax" href="index-b001.html">page1 link</a></li>
	<li><a class="pjax" href="index-b002.html">page2 link</a></li>
	<li><a class="pjax" href="index-b003.html">page3 link</a></li>
</ul>
<p>これより以下のコンテンツの入れ替えを行います。</p>
<div id="pjaxContent">
<h2>ここは 1ページのコンテンツです。</h2>
  <h2>ここは 1ページのコンテンツです。</h2>
  <p>ここは 1ページのコンテンツの中身ここは 1ページのコンテンツの中身</p>
  <p>ここは 1ページのコンテンツの中身ここは 1ページのコンテンツの中身</p>
</div>

 

HTML 2ページ目 index-b002.html

<h1>pjax test page2</h1>
<div id="pjaxContent">
  <h2>ここは 2ページのコンテンツです。</h2>
  <p>ここは 2ページのコンテンツの中身ここは 2ページのコンテンツの中身</p>
  <p>ここは 2ページのコンテンツの中身ここは 2ページのコンテンツの中身</p>
</div>

 

HTML 3ページ目 index-b003.html

<h1>pjax test page3</h1>
<div id="pjaxContent">
  <h2>ここは 3ページのコンテンツです。</h2>
  <p>ここは 3ページのコンテンツの中身ここは 3ページのコンテンツの中身</p>
  <p>ここは 3ページのコンテンツの中身ここは 3ページのコンテンツの中身</p>
</div>

 

この様に１ページのみメニュー部分のリストを置いて、2,3ページには入れ替える対象のコンテンツを配置しました。

動作としては、リンクのメニューをクリックした際、1ページ目のpjaxContent内に2,3ページ目のpjaxContentを入れ替える。

と言った感じになります。

scriptに関しては先ほどのscriptに以下のアニメーションの関数を加え、コールバックによる呼び出しを行います。

$('#pjaxContent').animate({ });

$(document).on('click', 'a.pjax', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  $('#pjaxContent').animate({
    opacity : 0
  }, 'slow', function() {
    $.pjax({
      url: href,
      container : '#pjaxContent',
      fragment : '#pjaxContent',
      timeout : 2000
    });
  });
});

このような感じになります。

更に、pjaxが完了したら呼び出されるイベント

pjax:end

を用いて、完了したら読み込んでいるコンテンツのopcityを1にするエフェクトが付与されるように関数の記述を行います。

$(document).on('pjax:end', function() {
  $('#pjaxContent').animate({
    opacity : 1
  }, 'slow');
});

これらを含めた全体のscriptとなります。

$(document).on('click', 'a.pjax', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  $('#pjaxContent').animate({
    opacity : 0
  }, 'slow', function() {
    $.pjax({
      url: href,
      container : '#pjaxContent',
      fragment : '#pjaxContent',
      timeout : 2000
    });
  });
});

$(document).on('pjax:end', function() {
  $('#pjaxContent').animate({
    opacity : 1
  }, 'slow');
});

それでは、リンクをクリック致しましょう。指定したコンテンツ領域に2ページ目と3ページ目のコンテンツを読み込んでいるのが確認出来ます。

その証拠に、履歴が追加されて、戻れたり進めたり可能でありますが、実際の2ページ目、3ページ目のURLを叩くとメニュー部分が表示されず、見出しも「ここは 2ページのコンテンツです。」等に変わるのが確認出来るかと思います。

デモページは以下のリンクからとなります。

デモページ

http://webcyou.com/demo/js/pjax/index-b001.html

pjaxのイベント

pjaxの用意されているイベントは以下のとおりとなります。

pjax:start

pjaxが開始されたときに発生。

pjax:end

pjaxが終了したときに発生。

pjax:beforeSend

ajaxリクエストが開始される前に発生。

pjax:send

ajaxリクエストを開始した後に発生。

pjax:complete

ajaxリクエストが終了した後に発生。

pjax:success

ajaxリクエストが成功した後に発生。

pjax:error

ajaxリクエストが失敗した後に発生。

pjax:timeout

ajaxリクエストがタイムアウト時に発生。

pjax:popstate

ブラウザの戻る進むなどを行った時に発生。

pjaxのプロパティ

id : stateの名前指定

url : 対象のurl

container : 置き換えるコンテンツ

push : デフォルトではfalse。

fragment : 置き換えられるコンテンツ

timeout : timeoutする時間（timeout時間を超えると location.href による遷移を行う）

scrollTo :  デフォルトではfalse。処理後のスクロール範囲を指定できます。