pjax初心者

pjaxをちょっと触ったのでまとめて見ました

フロントやってた人に聞いた話じゃアメリカではajaxよりpjaxらしい

Pjax = pushState + Ajax 　のjQeuryのプラグインのこと

pushStateとはHTML5から追加されたHistory APIのメソッドで、ざっくり言うと「履歴の変更」ができる。ブラウザの履歴情報をページ遷移せずに変更するメソッドのこと

history.pushState(state,title,url);　のように使い

第１引数stateで履歴に関するオブジェクト

第２引数titleで履歴のタイトルを指定

第３引数urlで履歴のurlを指定、絶対パス相対パスどちらでもOK

AjaxとはAsynchronous JavaScript + XMLのこと

ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる、他の処理と同時並行で、サーバとやりとりができる、サクサク動くページの動きを再現できる

以上のことよりpjaxとは「非同期ページ遷移」の「履歴あり」のこと

<a class="pjaxLink" href="ルーティング">　←遷移させるボタンとか

ここからhead要素に書く
<script src="/static/javascript/main.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
<script src="pjax.min.js"></script>
<script src="/static/javascript/base.js"></script>

遷移元<section id="pjaxContent" class="pjax-test">に書くid class

(これだと変化させたい部分をsectionで挟む)

jsファイルで指定したid classを変化させる
url: 遷移先パス,
container : 遷移部分,
fragment : 遷移部分,
timeout : 時間
をjsに書く

<おまけ>ラクスルの価格表ページがpjaxらしい