JSONとJSONP

現在のWebでは異なるクロスドメインのサーバからデータを取得する機能を実装することがごく普通に行われていますね。

例えば、
http://examle.com
にホストされたサイトからtwitterのタイムラインを取得したり、Facebookのいいねボタンを押したりするとか。そんなときに役に立っているのがJSONPという仕組みなんです。

まず、JSONPが必要となった経緯とは…
SOP(Same Origin Policy)[同一生成元ポリシー]によって、最初にページを取得したホスト以外のホストに対してリクエストを送ることができないんです。
つまり、
http://example.com
にホストされたWebページから
http://example.org/xxxxx
にリクエストを送信してデータを取得することは原則的にできません。

じゃあ、どうするか。ここで登場するのがJSONPです。
SOPの制限によりリクエストを飛ばすことはできないけど、リソースをインクルードすることはできるんです。
どういうことかというと

sample.html

<script src="http://exampleA.com"/>
<script src="http://exampleB.com"/>

と言う形でリソースを取得してくることは可能。
ならば、取り込んだソースを実行すればいいじゃんというのがJSONP

つまりこんなイメージ
以下のソースの①が読まれると、宣言してあるcallbacksampleが呼ばれるという仕組みですね。

sample.html

<script>
	function callbacksample(json){
		//use jsonコード	
	}
</script>
<script src="http://example.com"/>　…①
// ①では以下のソースを取得する。
// callbacksample({id:"id1",name:"name"});

で実際どう使うのかというのはまたいつか書きます。
※jQueryなどのライブラリを使った方が楽なので推奨です。