【jQuery】Ajaxを使ったコンテンツの表示方法

Tweet

Category JavaScript / Tagged jQuery 2012/01/23

内部リンクを全てAjaxによるロードに変える方法です。

利点は

• ページの書き換えが一部になるため、新規のページを開いた際の(html/javascript等の)初期化処理が発生しない。
• javascriptが動かない環境では普通のリンクとして機能する。
• エフェクトが入れられる。

欠点は

• URLが変わらない。(hash fragment #とか#!を使って対応は可能。検索エンジン対策するなら必要)
• 取得先がない(404)だった場合のエラー処理を書く必要がある。
• 外部URLはクロスドメイン制限で直接の取得は無理。

といったところでしょうか。

jQueryMobileで使われているように、モバイル系のブラウザでは使える仕組みのようです。
(jQueryMobileではさらに踏み込んで読み込んだコンテンツのキャッシュ等をしているようです)

基本の書き方はとても簡単です。ここでは#contents内の要素を対象にしています。

$(document).on('click', 'a', function(){
    $('#contents').load($(this).attr("href") +' #contents');
    return false;
});

Aタグのクリックイベントを取得して、通常の遷移を止めて.load()で取得しに行きます。load()はURL＋セレクタでの取得が可能です。

このままだと外部URLでもAjaxで取りに行ってエラーになってしまうのでいろいろ条件をつけて対応は必要。
属性になにか追加して区別したり、hrefがhttp～でフルに書いてあるものは通常処理をする、等が考えられます。

DEMO

Ajaxを使ったコンテンツの表示方法 – デモ