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

JavaScriptで、DOMを放り投げる処理

2024.07.27

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

2022.12.24

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

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

2019.07.28

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

2019.07.07

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

2019.06.22

CATEGORY LIST

LATEST NEWS

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US