Home > javascript > 超シンプルなJSONP入門

超シンプルなJSONP入門

今更ながらJSONP(JavaScript Object Notation with Padding)を触ってみました。
せっかくなので、超シンプル、かつ実用的なJSONPをご紹介します。

まずJSONPとは何か?

JavaScriptの外部ファイル読込みを利用しクロスドメインプログラミングを可能にする技術です。

<scpript type="text/javascript" src="HERE!" />

つまり、srcに外部ドメインのファイルを指定する事でクロスドメインが実現できるという仕組みです。

では、まずsrcで読込む外部ファイル(jsonp.js)の例を示します。

jsonFeed({
		"title": "throw Life by adamrocker",
		"link": "http://www.flickr.com/photos/",
		"description": "Try life, sometimes throw Life.",
		"modified": "2007-04-18T22:22:22Z",
		"generator": "http://www.adamrocker.com/blog",
		"items": [
	   {
			"title": "throw Life by adamrocker",
			"link": "http://www.adamrocker.com/blog",
			"description": "JSONP the simplest sample.",
	   },
		{
			"title": "adamrocker",
			"link": "http://d.hatena.ne.jp/adamrocker/",
			"description" : "hatena branch office.",
	   }
	]
})

RSS FeedがJSONPになるとこんな感じになります。
(分かりやすくするため、少し簡略化していますが)

少し分かりにくいですが、これは関数コールです。
よーーく見ると、
JSON形式のデータオブジェクトを引数にしたjsonFeed関数コールに見えませんか?

もっと簡単にすると、

{ "title" : "throw Life by adamrocker" }

というJSONデータを引数にした、

jsonFeed({"title":"throw Life by adamrocker"})

という、関数コールです。

あとは、あらかじめjsonFeedという関数の実体を用意しておけば、外部ファイルがscriptのsrcにより読込まれた時にjsonFeed関数が実行されるという流れです。

では、そのクライアント側の実装をご紹介しましょう。

より実用性を向上させるためHTML付きでご紹介します。

<html>
<head>
<title>JSONP sample</title>
 
<script language="JavaScript">
<!--
function jsonFeed(json) {
	var items = json["items"];
 
	var html = "";
	for(var i = 0; i < items.length; i++) {
		var elem = items[i];
		var text = '<dt><a href="' + elem["link"] + '">' + elem["title"] + '</a></dt><dd>' + elem["description"] + '</dd>';
 
 		html += text;
	}
 
	document.getElementById("list").innerHTML = html;
}
//-->
</script>
</head>
<body>
<h1>JSONP入門<h1>
<h2>- JSONPを利用してfeedを取得する実用的で簡単なサンプル -</h2>
<dl id="list" />
 
<script type="text/javascript" src="jsonp.js" />
</body>
</html>

JavaScriptの部分の関数名の「jsonFeed」がJSONPデータの文字列に一致している事がお分かりでしょうか。
つまり、

<script type="text/javascript" src="jsonp.js" />

これでjsonp.jsを読込見終わると、自動的にjsonFeed関数が実行されるのです。

読込んだデータは連想配列になっていますので、それぞれ取り出してHTMLを組んでいます。最後に、idがlistの要素のそのHTMLを流し込み、表示させています。一種のRSSリーダの様な感じです。

実行結果はこうなります。
yoyyaya-1.png

今回は同じドメインのJSONPデータを読込んでいますので、JSONPのメリットが殆どありません。しかし、このJSONPデータが外部ドメインでも、問題なくこのプログラムは動きますので、簡単に応用がきくと思います。

最後に

JSONPを公開してくれているサービスの一覧をリストしてくれているサイトを載せておきます。
[json]ブラウザからJSONで呼び出せるサービス一覧

沢山あるので、これらを上手に駆使して、自らはデータを保持しないデータサービスを提供してみてはいかがでしょうか?

このエントリをはてなブックマークに登録 Deliciousにブックマーク
関連のありそうなエントリ

Comments:2

通りスガシカオ 09-11-16 (月) 14:27

にしといたほうがいいです。
はまりました。

通りスガシカオ 09-11-16 (月) 14:30

ミス。
scriptタグの終了タグをつけといたほうがいいです。

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:4

Trackback URL for this entry
http://www.adamrocker.com/blog/102/javascript_simplest_jsonp.html/trackback/
Listed below are links to weblogs that reference
超シンプルなJSONP入門 from throw Life
pingback from JSONPによるクロスドメイン通信の実装ログ - HIBIASHI 09-05-28 (木) 21:21

[…] その他参考にしたサイトは以下。 JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記 はじめてのJSONPプログラミング - [Z]ZAPAブロ〜グ2.0 [鏡] 入門 JSON 3 — JSONP とコールバック関数 — 戯れ言++ throw Life - 超シンプルなJSONP入門 ここが危ない!Web2.0のセキュリティ:第3回 JSONPでのクロスドメインアクセス|gihyo.jp … 技術評論社 知らないことがあってもへっちゃらさ: JSONP でも非同期に通信したい TAKESAKO @ Yet another Cybozu Labs: Operaでも非同期リクエストが並列処理できる img-JSONP JSONP が Opera だと非同期処理できない - 川o・-・)<2nd life […]

pingback from JSONP with jQuery – Richard Choi 11-01-11 (火) 13:18

[…] http://www.adamrocker.com/blog/102/javascript_simplest_jsonp.html […]

pingback from JSONPについて説明してみる « 日本の天ぷら情報 12-06-16 (土) 3:53

[…] throw Life — 超シンプルなJSONP入門 http://www.adamrocker.com/blog/102/javascript_simplest_jsonp.html […]

trackback from garcinia Cambogia extract 13-10-30 (水) 8:49

garcinia Cambogia extract…

throw Life - _蘋_
JSONP  (more…)

Home > javascript > 超シンプルなJSONP入門

Author
Search
Feeds
Meta

Return to page top