ひらい ぶらり Hi-Library

ぷろぐらみんぐについて。ときどきどうでもいいことについて。

JSONPのAjax的使い方

以前、Googleデスクトップのガジェットを作るときにgessyさんの作ったLEAFBANK APIを利用させてもらおうとしたら
JSONP作ってないから、JSONP作って使っちゃいなYO」
というようなことを言われて
「なるほどなるほど、JSONP使ったほうがいいですね」
って言いつつ、そのときJSONとかJSONPって名前しか聞いたことなかったので速攻でぐぐりました。

どうやら、JavaScriptAPIなんかを使うときに、XMLをパースする必要が内容、JavaScriptが変数として解釈できるようにデータを返してくれるもののことみたいです。
んで、JSONの場合は取得したデータをevalして何かの変数にぶち込んでやればいいみたいですね。ステキ。
Ajaxでやる場合も同様に、取ってきたresponsTextなりなんなりをevalしてやればおっけー。便利ですねー。

で、もっと便利なのがJSONP。ジェイソンプと読んでいたのはここだけの秘密。
何が便利って、XMLHttpRequestを使わなくていいところです。
以下のように書きます。

var script     = document.createElement( 'script' );
script.type    = 'text/javascript';
script.charset = 'utf-8';
script.src     = http://www.hogehoge.com/hoge/?callback=hundler;
document.getElementsByTagName("head")[0].appendChild(script)

function hundler(data) {
   getElementById("hoge").innerHTML = data['test'];
}

JSONPのURLのパラメタにコールバック関数名を指定してやると、引数にAPIで取得できる変数を渡して指定したコールバック関数を実行するという仕組みです。
直接スクリプトタグ(外部ドメイン)をappendChildしたら怒られたので、この方法を取らないといけないみたいですね。