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