jQuery ajaxにpushStateとpopStateを入れてみる

先日、allabout48G(仮)の新しいバージョンを公開した時に、BlazeChariotにも書いたjQueryの部分です。
簡単に言うと左右に分かれたカラムをリンクのclassで判別してAjaxで遷移させて、更にpushStateで履歴を残す。で、popStateで再度読み込むと言う感じのものです。完全ではないですがひと通り動いているようです。詳細は上の前述のBlazeChariotで。

さて、このスクリプトはうちの環境に合わせてのものなので、一般的にはやや違う感じもするためそれを含めて書いてみようかと思います。

基本的には、pushStateでアドレスは取得できるわけですから、それをどうやって読み込むかと言う話からいくと、まず、

http://www.xxx.com/dir/index.php?parm1=abc#test

と言うアドレスがあったとして、自分がどこまでのアドレスが必要かというのがまず必要です。クエリの部分だけでいいのか、あるいはクエリなどは必要なく例えばindex.phpでもなくindex.htmlなどの通常のHTMLファイル名でいいのか、なんなら全部必要なのか、ハッシュタグだけ欲しいのかそこらをまず考えねばなりません。

取得できるアドレス
location.href http://www.xxx.com/dir/index.php?parm1=abc#test
location.host www.xxx.com
location.pathname /dir/index.php
location.search parm1=abc
location.protocol http:
location.hash ♯test

まずこんな感じでどの部分が必要であるのかをPHP、もしくはサイトの作り方と相談です。単純にhtmlファイルをajaxしたいというだけであるなら、function loadContentsR(url)の部分を好きな名前に変えて、そのhtmlファイルを読み込めばよいだけですから、$.ajax()でなくても$.load()や、$.get()、$.post()でも良いわけです。

例えば$.load()であれば、こんなふうに考えられます。

pushStateでは履歴のアドレスを取得するわけですが、ファイルがxxx.html等であれば、location.pathnameで良いかと思います。

ちなみに動作確認はしてませんが、だいたいこんな感じです。functionの部分はアドレスのクエリの部分であったりを取得させたり、あるいはアドレスそのものやら色んな物に対応できるように別で書いてありますが$.load()の場合は$(window).on(‘popstate’,function)の中でifで分岐してある部分にそれぞれを直接書いてもいいのかも。

元々は16行 で pushState popStateを主に参考にしているので、$.get()やらはこちらも参考していただけると良いかも。