3. javascript：pjaxを使って非同期通信する方法

javascript：pjaxを使って非同期通信する方法

javascript：pjaxを使って非同期通信する方法

pjaxというのはもう一年以上前から氾濫してたみたいなんですが、なんか今盛り上がってるらしいので、pjaxを使ったサンプルを作ってみました。

pjaxに関しては、
pjaxが便利過ぎて鼻血出そうになった（railsのサンプル付き） – SELECT * FROM life; とか
PHPでpjaxる – 私の昆布 とかの先駆者たちの説明をご覧ください。

今回やろうとしてることは、以前記事にした『javascript：jQuery $.getを使って～』の強化版みたいなことです。
pjaxを使って非同期的にコンテンツを取得するというもの。
getのときはhtml全体を取得してから不要な部分は捨てる っていう転送量が多くて少し残念なものだったんですが、
今回は向こう側で取得する部分を選んでくれて渡してくれる感じです。きっと。
それプラス、pushStateを使ってURLは変更します、な感じです。
で、ようは『私の昆布』のgocardさんがやってることをやろうとしてるだけです。

転送量も軽く済むし、html5でも大丈夫ならpjaxいいですよね。

HTML

元になるページ。

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

取得したいページ（php）

取得したいコンテンツページ。動的に生成したページなども。 今回は、idのmainで囲まれた部分を取得します。 通常はheadとかの中も同じに。

<?php
//$rheader = getallheaders();
//$pjax = (!empty($rheader['X-PJAX']) && ($rheader['X-PJAX'] == "true")) ? true : false;
$pjax = $_GET['_pjax'];//getallheadersが利かなかったのでこちらで
 if (!$pjax) { ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery pjaxを使って非同期通信する方法</title>
</head>
<body>
<div id="main">
<?php } ?> 
    <header>
    	<h1>コンテンツ2</h1>
      <p>※リロードするとコンテンツ部分のみになります。</p>
      <p>特に、メディアなど、伝達するための手段を提供する際に用いられ、娯楽や教養のために、文字や音声、映像などを使用して創作する内容、もしくは創作物や、そのカテゴリーを指す。代表的なものとして、一般的に音楽、映画、アニメ、ビデオゲームなどがある。書籍、ウェブページにおいても同様である。かなり古いが、2008年度までの最新国内業界公表データ等を使用した統計によると、アナログ市場を含む市場規模は13兆0,359億円、日本は世界第2位の規模となっている。第1位はアメリカで、2位（日本）の約4倍である<br>
<em>by Wikipedia</em></p>
 
    </header>
<?php if (!$pjax) { ?>
</div>
</body>
</html>
<?php } ?>

Javascript

$(function () {
	$('#btn').click(function() {
		var geturl = $(this).attr("href");
		$.pjax({
				"url": geturl,
				"container": "#main",
				timeout: 3000
		});
		
		return false;
	});	
		
	$("#btn").pjax("#sec #main");
});

サンプルをみる

参考サイト

Related Posts