PHP/Javascript/JQuery/CSSの勉強

Javascript修行中。基礎固め中...

JSONPとは

JSONPとは?

scriptタグを利用したクロスドメインでの
データ交換方式

違うサーバのデータをjavascriptで取ってきたい場合に
同一生成元ポリシーで取れないところを、scriptタグとパラメータに
コールバック関数を設定することで解決します。

使い方

scriptタグ+コールバック関数

静的な実装例
<script type="text/javascript" src="http://example.com/service?callback=myCallbackFunc"></script>
<script>
	function myCallbackFunc(data){
		//引数dataにjsonデータが引き渡される
	}
</script>
動的な実装例
                                • -
var JSONP = {
	index:0,
	callbacks:{},
	request:function(url, callback){
		var ind = '_' + JSONP.index++;
		
		//scriptタグ生成
		var s = document.createElement('script');
		s.type = "text/javascript";
		s.charset = "utf-8";
		//生成URL例) http://www.example.com?xx=1&callback=JSONP.callbacks._1
		s.src = url + (url.indexOf('?')>0 ? "&" : "?") + "callback=JSONP.callbacks." + ind;
		
		
		JSONP.callbacks[ind] = function(res){
			//resでJSONデータ取得
			
			//scriptタグ削除
			s.parentNode.remove(s);
			delete JSONP.callbacks[ind];
			
			//コールバック変数にJSONデータ引渡し
			callback(res);
		}
		
		//scriptタグをheadタグ内に配置
		document.getElementByTagName('head')[0].appendChild(s);
	}
}

//JSONサービス呼び出し
JSONP.request('http://example.com/service', function(data){	
	//callback関数
})


■コールバック関数の命名は、特に理由がない限りは
 多数の先例に倣い、「callback」という名前にした方が分かりやすい
 
■ライブラリを利用するのが楽
 jQueryやdojoなど。
 
JSONPで提供されているサービス
・Delicious
Google
Flickr
・はてな
・楽天(楽天webサービス) http://webservice.rakuten.co.jp