今さらだけど、「JSONPってなんだ？」って思ったのでまとめてみる。

まず、JSONとAjaxについて整理。

JSON(JavaScript Object Notation)

• オブジェクトまたは配列として実現されるデータ記述言語。フォーマット。
• MIMEタイプは”application/json” 拡張子は”.json”
• （殆ど）そのままJavaScriptの配列/オブジェクトとして扱えるので便利
• 単純で軽量。パースのコストもXMLなどに比べて安い。
• Ajaxの普及と共に注目を浴びた。

（AjaxのxはXMLだけど、）今ではJSONを使っている非同期アプリケーションのが多いよね。

Ajax(Asynchronous JavaScript + XML)

• JavaScriptのXMLHttpRequestとXML（今はJSONが多い）を使った非同期通信
• セキュリティーの都合のため、XMLHttpRequestはクロスドメイン間の通信は出来ない。

ここで、他のサイトのAPIをAjaxで触りたいとかとなってくると問題になる。
解決策としては、

1. JSONPを使う。
2. XMLHttpRequest以外で通信する

があるけれど、とりあえずここではJSONPについて。

JSONP(JSON with padding)

• HTMLタグのscript#srcにはクロスドメイン制限がないので、それを利用してクロスドメイン間の通信を実現する手法
• 予めコールバック関数を定義しておき、パラメーターにコールバックを指定し呼び出してもらう。

具体的に書いてみると、

<script type="text/javascript src="http://crossdomain/json?callback=hoge"></script>
<script type="text/javascript">
function hoge(json){
alert(json.data)
}
</script>

みたいにすること。

jQueryを用いたJSONPの実装

でも、結局はjQueryを使うと簡単に出来ちゃうよ、ってお話です。

// $.getJSONでも出来るみたいだけど。
    $.ajax({
        url: "http://crossdomain/json",
        data: {
            hoge: "hogu"
        },
        dataType: 'jsonp', // これは固定
        callback: 'callbackname', // コールバック関数を指定するためのパラメーター名
        success: function(data, status){
            // 何かをする
        }
    });

jQuery使えば、JSONPのことを知らなくてもクロスドメイン間の通信も実装できちゃいそうだね。