この記事は賞味期限切れです。（更新から1年が経過しています）

コンパクトで汎用的な「JSON」は、今やWebサービスの連携になくてはならない存在ですね。
各種APIもXML以上にJSON対応が必要とされていると思います。
今日はそんなJSON/JSONPと、jQueryが便利すぎて逆に困ってしまう！というお話。

JSON

JSONとは「JavaScript Object Node」の略で、
その名の通りJavaScriptのオブジェクトを表した物。
中身は勿論JavaScriptのオブジェクトリテラルです。

{
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
}

昨今はXMLにかわって情報をやり取りする際のフォーマットとして
頻繁に使われるようになりました。

ただ、外部サービスと通信する際に、
AjaxでJSONをやり取りするには「クロスドメイン」という壁があります。
つまり、他ドメインに属するファイルはAjaxでは基本的に取得出来ないのです。

そこでJSONPの出番です。

JSONP

JSONP(JSON with Padding）というのは、
コールバック関数を介してJSONのデータを受け取る手法です。

myfunc({
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
});

JSONを出力する側では、こんな感じに関数の引数に渡してやります。

上では関数名が「myfunc」になっていますが、
APIを公開している多くのサービスは、
大抵この関数名をパラメータで指定出来るようになっています。

<script type="text/javascript">
function myfunc(data){
    console.log( data );
}
</script>
<script type="text/javascript" src="http://example.com/hoge.json?callback=myfunc"></script>

コールバック関数を宣言したら、あとはscript要素でAPIにアクセスする。
「myfunc」内でJSONのデータを受け取り、煮たり焼いたりしましょう。
思いのほかシンプル。

そんなJSONPですが、
jQueryを通すとJSONPの仕組みが隠蔽されたような形になります。

jQueryでJSONPを使うと…

jQuery.ajax

$.ajax({
    url:"http://example.com/hoge.json",
    dataType:"jsonp",
    jsonp:"callback",
    success:function(data){
        console.log( data );
    }
});

上の例と同じ処理をしているわけですが、
普通のAjaxとほぼ同じ書式で出来てしまいますね。
違うのは、dataTypeパラメータとjsonpパラメータぐらい。

script要素の追加、コールバック関数の指定等は、
jQueryが勝手に代理で行ってくれます。

<script type="text/javascript" src="http://example.com/hoge.json?calback=jsonp1287411860619"></script>

DOMを見ていると、こんな感じのscript要素が生成されています。
コールバック関数名も動的に生成し、その中身をsuccessで設定した関数にしているわけですね。

まずは生JSで書いてみた方が良いと思う

前半で紹介したとおり、JSONPは全くもってシンプルな手法なのですが、
このようにjQueryを用いることで得体の知れない物になってしまっていませんか？
面倒な処理を代理で行ってくれるのがフレームワークなのですが、
その親切が学習する上での妨げになってしまう事があります。
（JSONPの例に限った話ではなく）

まずは、フレームワークに頼らない生のスクリプトで実験してみる。

そうする事が、その技術に対する理解を深められるだけでなく、
フレームワークをより上手く活用出来るようになる為の近道になるのではないかと
自戒の意も含めてここに記しておきます。