JSONPのサンプル及び解説です。
SAMPLE
AJAXでは外部サイトへのアクセスはセキュリティ上でできません。
｢JSONで提供されているデータをプロキシアプリケーションなしで使いたい」という希望に対応して
JSONPがあります。
外部サイトのJSならインポートできます。なのでJSとしてJASNデータを渡す仕組みです。
ただし、それだけなら変数に格納するの難しい。
なので。。。。
サービス側から｢メソッド名教えてくれたらJSONデータを引数にCALLしてやるよ」というスタイルです。
以下は、flickrのJSONPをサンプルにしています。
1.通常のJSONデータを取得
以下のURLをクリックすると通常のJSONデータを取得できます。
http://api.flickr.com/services/feeds/photos_public.gne?tags=formula&format=json&nojsoncallback=1
2.JSONPにする。
以下をクリックするとJSONPのjavascriptが取得できます。
http://api.flickr.com/services/feeds/photos_public.gne?tags=formula&format=json&jsoncallback=testProcess
※2の場合、引数で指定した関数をCALLしてますね。。引数にJSONデータを入れてくれています。
●そして実際に使ってみる。
<script language="javascript" type="text/javascript">
onload = function() {
var url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=formula&format=json&jsoncallback=testProcess';
var charset = 'utf-8';
addScript(url,charset);
}
//スクリプトの埋込み
function addScript(url,charset){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.charset = charset;
document.getElementsByTagName('head')[0].appendChild(script);
}
function testProcess(obj){
for(prop in obj.items){
document.getElementById('test1').innerHTML = document.getElementById('test1').innerHTML + '<br/>' +obj.items[prop].description;
}
}
</script>
1.scriptタグを作成しています。
※直接<script>を記入してはいけないのか？
HTML内に直接指定した場合、HTMLが完全に読み込まれていない時にJSONP提供側から関数コールされるとエラーになります。
上記のように作成するか、</body>の直前に埋め込む方法になります。
2.引数で渡されたJSONデータを処理する関数を準備しています。
参考文献：
・
Flickr Services
・
METAREALの記事｢
Flickr の JSON フィードで自作ブログパーツ」
PR
