JSONとJSONP

ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・

JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。

JSONの場合

JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。

var jsonData ={"users": [
	{
		name: "hamu",
		age : 24,
		language:["XHTML" , "CSS"]
	},
	{
		name: "h2",
		age:25,
		language:["PHP" , "Java"]
	},
	{
		name: "hoge",
		age:26,
		language:["JS" , "jQuery"]
	}
]}

とJSONを定義しておけば、

for(var index in jsonData.users){
	document.write("名前は"+jsonData.users[index].name+"です。");
	document.write("歳は"+jsonData.users[index].age+"です。");
	document.write("言語は"+jsonData.users[index].language+"です。");
	document.write("<hr />");
}

と言った具合に簡単(?)にデータが取り出せます。

サンプル

JSONの便利なところは外部ファイルとしても扱えること。

jsonData.jsonなどのファイルを用意しておけば、そのJSONデータをAjaxで取得し利用することが可能です。
（先ほどのJSONのサンプルから『var jsonData =』を省いたものです）

var jsonText = $.ajax({url: "jsonData.json",async: false});
eval("var jsonData="+jsonText.responseText)

Ajax部分は手続きがめんどくさいのでjQueryを利用します。今回のサンプルでは同期通信で取得しています。

取得したjsonData.jsonのデータ（この時点ではテキストデータ）を一度evalでjavascriptの式として再評価します。

サンプル2

これで外部ファイルの情報を簡単に扱えるようになります。

jQueryを利用している場合はgetJsonというメソッドを利用すれば簡単に扱えます。

$(function(){
	$.getJSON("jsonData.json", function(jsonData){
		$(jsonData.users).each(function(){
			$("body").append("名前は"+this.name+"です。");
			$("body").append("歳は"+this.age+"です。");
			$("body").append("言語は"+this.language+"です。");
			$("body").append("<hr />");
		})
	})
})

サンプル3

外部ファイルのjsonデータに『var jsonData =』さえ追加しておけば、script要素で読み込んだ際に、すでにjsonDataというオブジェクトが存在しjavacript内で利用することが可能です。

<script type="text/javascript" src="http://javascript.webcreativepark.net/sample/jsonData.json"></script>
<script type="text/javascript">
for(var index in jsonData.users){
	document.write("名前は"+jsonData.users[index].name+"です。");
	document.write("歳は"+jsonData.users[index].age+"です。");
	document.write("言語は"+jsonData.users[index].language+"です。");
	document.write("<hr />");
}
</script>

サンプル

複雑な手続きが不必要なので非常に簡単。それにクロスドメインで利用することも可能。

JSONP

JSONPは少し書式が変わり、

jsonColback({"users": [
	{
		name: "hamu",
		age : 24,
		language:["XHTML" , "CSS"]
	},
	{
		name: "h2",
		age:25,
		language:["PHP" , "Java"]
	},
	{
		name: "hoge",
		age:26,
		language:["JS" , "jQuery"]
	}
]})

のようになります。

サンプル

jsonColbackがコールバック関数になります。

<script type="text/javascript">
var jsonColback = function(jsonData){
	for(var index in jsonData.users){
		document.write("名前は"+jsonData.users[index].name+"です。");
		document.write("歳は"+jsonData.users[index].age+"です。");
		document.write("言語は"+jsonData.users[index].language+"です。");
		document.write("<hr />");
	}
}
</script>
<script type="text/javascript" src="jsonData.jsonp"></script>

最初にコールバック関数を設定しておき、JSONPファイルを読み込むことによりコールバック関数を実行して外部データの情報を操作します。

こちらもクロスドメインで動作します。

jQueryを利用すればスクリプト内でJSONPを取得することも可能です。

$.getJSONでurlを指定する際に末尾に?callback=?を追加します。

$(function(){
	$.getJSON("http://javascript.webcreativepark.net/sample/jsonData.jsonp?callback=?")
})
var jsonColback = function(jsonData){
	$(jsonData.users).each(function(){
		$("body").append("名前は"+this.name+"です。");
		$("body").append("歳は"+this.age+"です。");
		$("body").append("言語は"+this.language+"です。");
		$("body").append("<hr />");
	})
}

サンプル

スポンサードリンク

2008年7月17日 21:29
カテゴリー JavaScript

«Googleキーワードツールが月間検索数を表示 | メイン | [Re:Creator's Party Kansai]第5回 toggleクリックの制御 - jQueryによるJavaScript入門»