ハッシュチェンジ
ハッシュチェンジとは？
- Ajaxにより画面遷移しないでページ内容を書き換える事が可能だが、
- その際にURLも一緒に変わらないと一意なURLが作れない、ブラウザの戻るボタンが期待通りに動作しない、等の問題がある。
- この問題を解決する為に、ページ内容を書き換えるリンクをフラグメントURLにし、ハッシュチェンジイベント時にページ内容書き換えを行うようにする。
ハッシュチェンジによるページングの例
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.min.js" type="text/javascript">
</script>
<script src="http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js"
type="text/javascript"></script>
</head>
<body>
<dl id="list"></dl>
<hr />
<div id="pager">
<a href="http://localhost/1">page 1</a> <a href="http://localhost/2">page 2</a>
</div>
<script type="text/javascript">
$(function () {
// Ajaxによるページ内容書き換え -------------------------------------------- (1)
function goPage(num) {
console.log('called goPage(): ' + num);
$.ajax({
type : 'GET',
url : './' + num + '.json',
datatype : 'json',
success : function (data) {
var dl = $('#list');
dl.children().remove();
for ( k in data ) {
var dt = $('<dt></dt>'), dd = $('<dd></dd>');
dt.append(k); dd.append(data[k]);
dl.append(dt); dl.append(dd);
}
},
error : function (xhr, message) { console.log('ERROR: ' + message); }
});
}
// ハッシュチェンジ時のイベントハンドラーを登録 ---------------------------- (2)
$(window).hashchange(function (){
var hash = decodeURIComponent(location.hash);
var num = hash.replace('#page', '') || 1;
if (isNaN(num)) num = 1;
goPage(num);
});
// ページロード時の初期化 -------------------------------------------------- (3)
$(window).hashchange();
// SEO対策のURLをハッシュに変更 -------------------------------------------- (4)
$('#pager').find('a').each(function(){
var hash = $(this).attr('href').replace('http://localhost/', '#page');
$(this).attr({ href : hash });
});
});
</script>
</body>
</html>
説明
- (2)でハッシュイベント時のイベントハンドラーとして、(1)のAjaxによるページ内容書き換え処理を登録する。
- (3)でページロード時の初期化を行い、最初にこのページを開いた時にページ1を読み込むようにする。
- (4)は（JavaScriptを認識しないクローラーがリンクを辿れるように）SEO対策のフルパスURLをフラグメントURLに置換している。
参考
- AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法
- http://ascii.jp/elem/000/000/504/504495/
- JQUERY HASHCHANGE EVENT
- http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery-ba-hashchange-js.html
