Pjaxの使用方法

Ajaxを使用して、メニューに応じてコンテンツのみを入れ替えるページを作成してみた。
全ページに共通した部分とコンテンツ部分に分離できるので、共通部のメニュー等に変更が
発生した場合にも、1ページの変更で済むので、メンテナンス性が飛躍的に向上する。

また、コード量が縮小できるので、ロード時間の短縮やディスク・スペースの節減等々文句
のつけようの無い方式のようにも思えるのだが、何点か問題が指摘されているようだ。

中でも困るのは、表示履歴が更新されないので「戻る」ボタンが使えないことだ。

この問題は、別段新しい話題ではなく、随分前から語り尽くされた感のある話題のようである。
検索で得られた沢山の情報の中で、とりわけPjaxというjQueryプラグインが目を引いた。

Pjax に関しては、事例を基に解説してくる親切なサイトが多いのだが、私の目指す方向に合う
説明が見つからず、方向性が正しいのかどうかで、昨日一日スッタモンダの大苦闘。

これ以上、他サイトの情報は期待できないので、Pjaxのソースを見て方向性を判断することに
したのだが、簡単に言えば、pjax は引数に指定した url(HTMLソース)を container の位置に
挿入し、表示履歴を push してくれるものらしい。

これは、使い方の観点からは $.ajax または load()メソッドに同じである。
とすれば、昨日混乱した原因の一つのサーバサイド・スクリプトもいらない・・・
(コンテンツ部分だけを返すような場合は、サーバ側での対応は不要のようだ。)

以上から、ajaxで load() を使用していた部分を、pjax()に変更し、括弧内のパラメータを設定
すれば、私の目的は達成でるとの結論に至る。
長々と書いたが、結論は全くあっけないもの。
でも、問題が解決できて嬉しい!

最後に、ajaxとpjaxの比較に今回作成したものを掲載したので、同じ悩みをお持ちの方の参考になれば幸いです。