一番簡単なJSONP+jQuery超入門 - らくらくダウンロードスタッフブログ

AJAXとか、JSONPとか、jQueryと呼ばれる一連のテクニックがあります。
何をやっているかというと、要は
　「JavaScriptを使って、ページを動的に書き換える」
テクニックです。
いまさらですが、まとまって基礎を解説しているページが見あたらなかったので、以下にまとめてみました。
※ サンプル・ソースはまとめてこちらに置いてあります >> http://book.motion.ne.jp/etc/JsonSample.zip
※ このページに表示してあるサンプルは、適宜省略してあるので、
※ 最初にサンプル・ソースをダウンロードしてから読み始めるのがよろしいかと。

- - - - -

* Sample1 -- 外部JavaScriptを呼んでみる.
こんな感じのHTMLファイルと、外部ファイルを用意します。
・sample1.html



<html>

<head>

<script type="text/javascript">

function showName( data ){	// <- これのことを「コールバック関数」といいます。

	alert( data["name"] );

}

</script>

</head>

<body>

	<!-- ここで外部にあるスクリプトを読み込む -->

	<script type="text/javascript" src="./sample1.dat"></script>

</body>

</html>

・sample1.dat



showName( { "name" : "Ponyo!" } );

sample1.html の中に、showName という JavaScript の関数があります。
そして、sample1.dat の中に、この showName を実行する関数呼び出しが書いてあります。
この sample1.html をブラウザで表示すると、
-> 外部にある sample1.dat が読み込まれる
-> ページ内部に書かれている showName関数が実行される
といった動きをします。
で、それのどこがすごいの？
どこかの頭の良い人が、この仕組みを上手く利用して、
　データをJavaScriptの形にして、HTMLページの外部に置いておこう！
ということを考えたんですね〜。
そうすれば、HTMLページを表示した後から外部データをいじって、
HTMLページを操作することができるではありませんか。
よく思い付いたというべきか、きっとJavaScriptを作った人は、
まさかこんな使われ方をするとは考えていなかったと思うよ、うん。

- - - - -

* Sample2 -- 複数データを呼んでみる.
次に、データの数を増やしてみましょう。
・sample2.html



<html>

<head>

<script type="text/javascript">

function showData( data ){

	alert( "名前は"   + data.name );

	alert( "何の子？" + data.who );

	alert( "好き？"   + data.like );

}

function loadJsonp(){

	var objScript = document.createElement("script");

	

	objScript.src = "./sample2.dat";	// 外部データを読み込む

	

	document.getElementsByTagName("head")[0].appendChild(objScript);

		// こうするとスクリプトが現行ドキュメントの

		// "head"の下にぶら下がって、動き出すのだ。

}

</script>

</head>

<body>

	<input type="button" value="ポチッとな" onclick="loadJsonp();"/ >

</body>

</html>

・sample2.dat



showData({

	"name":"Ponyo!",

	"who":"Fish",

	"like":"So-suke"

});

sample2.datの中身は、一見するとデータが３行書いてあるみたいですが、
これ、正体はJavaScriptの引数なのです。
JavaScriptの引数に、{ } でくくって３つのデータが入っている、そういうものです。
このデータ(実はJavaScript)を、sample2.html で読み込むと、引数の内容を順番に表示するようになっています。

- - - - -

* Sample3 -- jQueryを使ってみる.
jQueryとは、動的なページを作るのに便利な JavaScriptのライブラリです >> http://jquery.com/
論より実践、使ってみましょう。
jQueryをダウンロード入手して、ページヘッダの中に

　

といった感じに１行追加します。これでjQueryが使えるようになります。

・sample3.html



<html lang="ja">

<head>

	<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">

<!--

function showData( data ){

	

	$("#mycart").empty();	// 表示領域を空にする

	

	$.each(data, function(i,item){	// データの内容を個々に処理する

		$("")		// a要素を生成

		.attr("href", "http://www.easypay.jp/")	// a要素のhref属性を設定

		.append("<img src='icon.png'/>")	// a要素の子要素にimg要素を追加

		.append( item )		// a要素の子要素にデータの内容を追加

		.append("<br/>")

		.appendTo("#mycart");	// a要素を表示領域の子要素に追加

	});

}
// 動的にJavaScriptを生成、実行する

function loadJsonp(){

	var objScript = document.createElement("script");

	objScript.src = "./sample3.dat";	// 外部データを読み込む

	document.getElementsByTagName("head")[0].appendChild(objScript)

}

// -->

</script>

</head>

<body>

	<input type="button" value="ぽちっとな" onclick="loadJsonp();"/ >
	<div id="mycart">

		<!-- ここにカートの中身が入ることになる -->

	</div>
</body>

</html>

・sample3.dat



showData({

	"item1":"Egg",

	"item2":"Fish",

	"item3":"Chicken"

});

sample3.html には、＜div id="mycart"＞という中身が空っぽなタグがあります。
showDataを実行すると、この空っぽのタグに中身が入ってきます。
どうやって中身が入るのか。
その秘密は jQuery にあります。
jQuery では、ページ要素を $ で始まる記号で書きます。
このサンプルでは $("<a/>") と書いてあるところで、リンクタグ <a/> が生成されています。
生成したリンクタグに .append すると、いろんな要素を付加することができます。
最後に .appendTo("#mycart") とすると、id="mycart" のところに、
生成したリンクタグ <a/> がくっつく、という仕組みになっています。
$.each(data, function(i,item){ というところは、
「data の中身に対して、１個ずつ function を適用する」という意味です。
データが３個あったら、３回 function の内容が実行されます。

- - - - -

* Sample4 -- 複雑なデータを送ってみる.
もう少し複雑な構造のデータを送ってみましょう。

・sample4.html



<html lang="ja">

<head>

	<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">

<!--

function showData( data ){

	

	$("#mycart").empty();	// 表示領域を空にする

	

	$.each(data.items, function(i,item){	// データの内容を個々に処理する

		$("<a/>")		// a要素を生成

		.attr( "href", item.link )	// a要素のhref属性を設定

		.append("<img src='icon.png'/>")	// a要素の子要素にimg要素を追加

		.append("<font color='"+ item.color +"'>" + item.name + "</font>")	// 名前に色をつける

		.append("<br/>")

		.appendTo("#mycart");	// a要素を表示領域の子要素に追加

	});

}
// 動的にJavaScriptを生成、実行する

function loadJsonp(){

	var objScript = document.createElement("script");

	objScript.src = "./sample4.dat";	// 外部データを読み込む

	document.getElementsByTagName("head")[0].appendChild(objScript)

}

// -->

</script>

</head>

<body>

	<input type="button" value="ぽちっとな" onclick="loadJsonp();"/>
	<div id="mycart">

		<!-- ここにカートの中身が入ることになる -->

	</div>
</body>

</html>

・sample4.dat



showData({

	"items": [

		{

			"name": "Egg",

			"color": "yellow",

			"link": "http://www.easypay.jp/"

		},

		{

			"name": "Fish",

			"color": "blue",

			"link": "http://book.motion.ne.jp/"

		},

		{

			"name": "Chicken",

			"color": "brown",

			"link": "http://www.google.co.jp/"

		}

	]

});

sample4.dat の内容を見てください。
ここには３個のアイテムが記述されています。
各アイテムそれぞれに、name:名前, color:色, link:リンクが指定されています。
JSONPのデータ書式は、つまりこんな感じなのです。

"タグ":"名前" の組み合わせが基本
{ "タグ1":"名前1", "タグ2":"名前2", "タグ3":"名前3" } で、複数のタグをまとめることができる
[ ] は配列、繰り返しデータを記述する

このデータを読み込む sample4.html では、data.items の内容を１個ずつ処理しています。
$.each(data.items, function(i,item){
items と item が違うのだ、ということに注意。
items はアイテムをまとめたもの全体のこと、
item は、items から取り出した、個々のアイテムのことです。

- - - - -

* Sample5 -- jQueryの ajax関数を使ってみる.
jQueryには、上の sample4 までに説明した仕組みをコンパクトにまとめた、ajax関数が用意されています。
これを使って sample4 を書き換えてみましょう。
また、いままでのサンプルでは固定の *.datファイルを置いていましたが、
この *.datファイルの代わりに、PHPのスクリプトを使ってみましょう。
PHPにするのは、データの内容をプログラムで自由に書き換えるための布石です。

・sample5.html



<html lang="ja">

<head>

	<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">

<!--

function doJsonp(){
	$.ajax({

		dataType: "jsonp",

		

		url: "http://localhost/JsonSample/sample5.php",

			// データを送ってくるPHPスクリプトを指定する。

			// callback関数は、jQueryが自動的に生成してくれます。

		

		success: function (data) {

			$("#mycart").empty();	// 表示領域を空にする

			$.each(data.items, function(i,item){

				$("<a/>")		// a要素を生成

				.attr("href", item.link)	// a要素のhref属性を設定

				.append("<img src='icon.png'/>")	// a要素の子要素にimg要素を追加

				.append("<font color='"+ item.color +"'>" + item.name + "</font>")

				.appendTo("#mycart");

			});

		}

	});

}

// -->

</script>

</head>

<body>

	<input type="button" value="ぽちっとな" onclick="doJsonp();"/ >
	<div id="mycart">

		<!-- ここにカートの中身が入ることになる -->

	</div>
</body>

</html>

・sample5.php



<?php

echo $_GET['callback'];	// コールバック関数名

echo '

({

	"items": [

		{

			"name": "Egg",

			"color": "yellow",

			"link": "http://www.easypay.jp/"

		},

		{

			"name": "Fish",

			"color": "blue",

			"link": "http://book.motion.ne.jp/"

		},

		{

			"name": "Chicken",

			"color": "brown",

			"link": "http://www.google.co.jp/"

		}

	]

});

';

?>

sample5.php の内容は、ほとんど固定のテキストと変わりません。
唯一違っている点は、
　　echo $_GET['callback']; // コールバック関数名
というところで、コールバック関数名をそのまま返しているところです。
（sample4で"showData"と書いてあったところです）
このコールバック関数名は、jQueryの ajax関数と関係しています。
jQueryの ajax関数では、コールバック関数名をライブラリが勝手に自動生成してくれます。
なのでPHP側では、自動生成されたコールバック関数名をそのまま返す、という処理を入れておくのです。
$.ajax 関数は一見複雑な構造をしていますが、とりあえず、
　　dataType: "jsonp", // JSONPを使っている場合のおまじない。
　　url: "http://localhost/JsonSample/sample5.php",
　　　　// データを送ってくるPHPスクリプトを指定する。
　　success: function (data) {
　　　　// ここにデータを受け取った後の処理を記述する。
という形式で書くのだ、と覚えましょう。

- - - - -

* Sample6 -- サーバーにCGIパラメータを引き渡す.
以上でとりあえずデータを外部サーバーから持ってくることはできたので、
あと残るは、「外部サーバーに、こちらからデータを渡す」ことでしょう。

・sample6.html



<html lang="ja">

<head>

	<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">

<!--

function doJsonp( mode, item_no ){
	$.ajax({

		dataType: "jsonp",

		

		// サーバー側に引き渡すパラメータは、ここに記述する

		data: {

			"mode": mode,

			"item_no": item_no,

		},

		

		url: "http://localhost/JsonSample/sample6.php",

		

		success: function (data) {

			$("#mycart").empty();	// 表示領域を空にする

			$.each(data.items, function(i,item){

				$("<a/>")		// a要素を生成

				.attr("href", item.link)	// a要素のhref属性を設定

				.append("<img src='icon.png'/>")	// a要素の子要素にimg要素を追加

				.append("<font color='"+ item.color +"'>" + item.name + "</font>")

				.append("<br/>")

				.appendTo("#mycart");

			});

		}

	});

}

// -->

</script>

</head>

<body>

	<form id="myform" action="">

		<!-- 加える -->

		<input type="button" id="addBtn0" name="addBtn0" value="卵・入れる"

			onclick="doJsonp('add', 0); return false;" />

		<input type="button" id="addBtn1" name="addBtn1" value="魚・入れる"

			onclick="doJsonp('add', 1); return false;" />

		<input type="button" id="addBtn2" name="addBtn2" value="鶏・入れる"

			onclick="doJsonp('add', 2); return false;" />

		<br/>

		

		<!-- 減らす -->

		<input type="button" id="delBtn0" name="delBtn0" value="卵・消す"

			onclick="doJsonp('del', 0); return false;" />

		<input type="button" id="delBtn1" name="delBtn1" value="魚・消す"

			onclick="doJsonp('del', 1); return false;" />

		<input type="button" id="delBtn2" name="delBtn2" value="鶏・消す"

			onclick="doJsonp('del', 2); return false;" />

		<br/>

		

		<!-- 全消去 -->

		<input type="button" id="clearBtn" name="clearBtn" value="空にする"

			onclick="doJsonp('clear', 0); return false;" />

		<br/>

	

	</form>

	

	<div id="mycart">

		<!-- ここにカートの中身が入ることになる -->

	</div>
</body>

</html>

・sample6.php
（省略：サンプル・ソースをダウンロードしてください >> http://book.motion.ne.jp/etc/JsonSample.zip）

HTMLページ内部からサーバー側に引き渡すパラメータは、
$ajax関数内部の data: というセクションに記述します。
実際には、この data: に記述されたパラメータは、CGIパラメータとなって
サーバー側（PHPスクリプトなど）に引き渡されます。
たったこれだけで、HTMLページとサーバーとの間でデータの受け渡しができてしまう。
あとは、JavaScript とサーバー側のデータを駆使して、いくらでも複雑な仕組みが作れるというわけ。
以上！