javascript：jQuery $.getを使って非同期通信する方法（部分的に取得）

ページ遷移なしにコンテンツを読み込み取得したい時のjavasctipt。

HTML

元になるページ。

<section id="sec" class="section">
  <article>
    <header>
    	<h1>コンテンツ1</h1>
      <p>コンテンツ（英: media content）とは、あるものの「内容」のこと、概念。<br>
本記事では、情報に関して、媒体やシステムなどと区別して、情報そのもののことについて記す。情報内容ともいう。また切り口（観点）により、デジタル-、映像-、商業-、素人-、などと冠することが多い。<br>
<em>by Wikipedia</em></p>
    </header>
  </article>
</section>
<p id="loding"></p>
<p id="btn"><a href="page.html">ボタン</a></p>

HTML（page.html）

取得したいコンテンツページ。動的に生成したページなども。 今回は、classのsectionで囲まれた部分を取得します。

<section id="sec" class="section">
  <article>
    <header>
    	<h1>コンテンツ2</h1>
      <p>特に、メディアなど、伝達するための手段を提供する際に用いられ、娯楽や教養のために、文字や音声、映像などを使用して創作する内容、もしくは創作物や、そのカテゴリーを指す。代表的なものとして、一般的に音楽、映画、アニメ、ビデオゲームなどがある。書籍、ウェブページにおいても同様である。かなり古いが、2008年度までの最新国内業界公表データ等を使用した統計によると、アナログ市場を含む市場規模は13兆0,359億円、日本は世界第2位の規模となっている。第1位はアメリカで、2位（日本）の約4倍である<br>
<em>by Wikipedia</em></p>
    </header>
  </article>
</section>
<p id="btn"><a href="#">ボタン</a></p>

Javascript

$(function () {
	var pageMaxNum = 2,//最大ページ数
	page=1,            //最初のページ
	nexturl;
	
	$('#btn').click(function() {
		$.get($(this).find('a').attr("href"), getData);//aタグのhref属性を取得。第二引数にパラメータを渡すことも可能
		return false;
	});	
	
	function getData(data) {
		nextPage = $('<div/>').append(data.replace(/<script(.|\s)*?\/script>/g, "")),
		nextContent = nextPage.find('.section');//取得したデータの箇所を検索
		page ++;		
		setNextUrl(nextPage);//次のurlを取得する
		if (nextContent.length) {
			nextContent.appendTo($('.section').parent()).hide().fadeIn('fast');
			if( page >= pageMaxNum ){ $('#btn').hide(); }//最後のコンテンツ表示後ボタンを消去
		}		
	}
	
	function setNextUrl(context) {
		currentUrl = nexturl || window.location.href;
		nexturl = $("#btn a", context).attr('href');
	}
	
	//ローディングの表示非表示
	$('#loading')
	.ajaxStart(function() {
		$(this).show();
	})
	.ajaxStop(function() {
		$(this).hide();
	});

});

サンプルをみる

jQuery.autopager

もっと多機能で簡単に設定できるjQueryプラグイン。 スクロールするれば次ページのコンテンツを自動で読み込み、追加することもできます。 jQuery.autopager: Automatic paging plugin for jQuery