例のあれ（仮題）

むしろ一昨日参ります。

とっぷ > entry > 今更ながらjQueryでJSONPを使ってみた。

今更ながらjQueryでJSONPを使ってみた。 - 2009/6/12 (金) p.m.10:55 - ▼

　Ajax/jQuery.getJSON - jQuery JavaScript Library
　throw Life - 超シンプルなJSONP入門

　JSONPがなんであるかは上記リンク先のページを見て頂きたいのですけど、JSON形式でデータをやり取りする事によってAjaxでドメインを越えるやり方です。Ajaxというか、XHLHttpRequestを使って通信する場合はその仕様によりドメインを越えて（ざっくり言うと違うところのサーバに）通信する事ができません。別にJSONPなるモノを使わなくても幾つか方法があって、他のサーバとやり取りする部分を同じドメインのサーバ上に作って、そこにアクセスしたりすれば可能です。
　さて、JSONPとかいうモノが具体的にどうやっているのかというと、JSON形式のデータを引数とした関数コールを記述し、scriptタグで外部ファイル読み込みをする事で実行しているらしいです。外部ファイル読み込みはドメインを越えられますから、どこにあっても構わないというわけですね。かしこいなぁ。

　そして、我らがJQueryさんは、そんなJSONPを簡単に使える様な対応をしてくれています。今回超今更ながらそれを使ってみました。

$.getJSON("http://hogefuga.net/api/json.php'&callback=?",
function(json) { ... }
);

　こんな風に書くだけで済みます。scriptタグで読み込んだりする必要がない！

　呼び出しURLの最後にあるcallbackというのが若干キモなのですけど、こうやって記述しておくとjQueryさんはその後に勝手に文字列を追加してくれます。そして、その文字列を関数名としてgetJSON関数内で指定された処理用の（コールバック）関数を定義して準備してくれます。呼び出された側のサーバにはcallbackという名前のQueryStringで受け取り側のコールバック関数名が渡る事になりますから、その文字列を関数名として関数コールな内容で返すと無事にJSONPな処理が完了。します！
　受け取り側のコールバック関数には無名関数を利用する事もできるので、そのまま処理を書くことができます。こうする方がJavascriptっぽいとか勝手に思っているので例ではこちらの方法を用いています。

　ちなみに、呼び出される側の処理ですが、PHP5.2以降であれば、

$array = array('hoge' => 'fuga');
echo $_GET['callback'] . '(' . json_encode($array) .');';

　とか書けてお手軽お手軽。

　よいです、なんか格好いいです、JSONP！
　ただ、基本がscriptタグでの外部ファイル読み込みで関数コールですからエラーが取れません。取れないというより取りようがありません。setTimeout() ででっち上げたりするのが一般的みたいなので、そういうのも書いてみました。次はその辺を気が向いたらー。

たぐ - javascript php