編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

ハッシュチェンジ

ハッシュチェンジとは?

  • Ajaxにより画面遷移しないでページ内容を書き換える事が可能だが、
  • その際にURLも一緒に変わらないと、一意なURLが作れない、ブラウザの戻るボタンが期待通りに動作しない、等の問題がある。
  • この問題を解決する為に、ページ内容を書き換えるリンクをフラグメントURLにし、ハッシュチェンジイベント時にページ内容書き換えを行うようにする。

ハッシュチェンジによるページングの例

  • ページャーである「page 1」「page 2」のリンクをクリックすると、画面遷移せずにページ内容が書き換わる。
  • その際、URLは「http://localhost/#page1」「http://localhost/#page2」に変化する。
  • なお、ここではjQueryのハッシュチェンジイベントモジュールを使用している。
<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

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2011-07-31 (日) 06:38:24 (2242d)