このサイトは、只今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

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

2018.09.26

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

2017.10.09

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

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

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

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US