- 2007-04-18 23:05
- javascript
今更ながらJSONP（JavaScript Object Notation with Padding）を触ってみました。
せっかくなので、超シンプル、かつ実用的な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リーダの様な感じです。
実行結果はこうなります。
今回は同じドメインのJSONPデータを読込んでいますので、JSONPのメリットが殆どありません。しかし、このJSONPデータが外部ドメインでも、問題なくこのプログラムは動きますので、簡単に応用がきくと思います。
JSONPを公開してくれているサービスの一覧をリストしてくれているサイトを載せておきます。
[json]ブラウザからJSONで呼び出せるサービス一覧
沢山あるので、これらを上手に駆使して、自らはデータを保持しないデータサービスを提供してみてはいかがでしょうか？
- Newer: はじめての連携PHP+MySQL入門
- Older: Macのプログラミング用エディタ「ForgEdit」
Comments:0
Trackbacks:0
- 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