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

Archives Details

pjax (pushState + Ajax) jquery plugin 使用方法 などなど

JavaScript

2013.02.27

この記事は最終更新日から1年以上が経過しています。

pjaxとは

pjaxpushStateajaxを組み合わせた造語(pushState + ajax = pjax)となります。

 pushStatehtml5に新実装された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で指定可能」

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

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

などが挙げられます。

ダウンロード

GitHubhttps://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>

 

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

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

pjax

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

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

続いてHTMLの準備。

HTML

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

1つめの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>

 

この様に1ページのみメニュー部分のリストを置いて、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。処理後のスクロール範囲を指定できます。

以上になりますー。

Comment

Related Article

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

CATEGORY LIST

LATEST NEWS

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US