jQuery JSONP plugin

最近遅ればせながらjQueryを使い始めてみているのですが、jQueryは標準ではクロスドメインのJSONPリクエストに対応していないようでした。AJAX系APIの中には $.getScript() のようにレスポンスをjavascriptソースとして実行するものもありますが、あくまで同一ドメイン内通信に限定されているので、「JSONP対応のWebサービスからデータを直接取得」のような用途には使えません。

じゃあ、ということで随分前 (2006-01-25) にMichael Geary氏がJSONP用のjQueryプラグインをさくっと作って公開してくれています:

JSON for jQuery - mt.to

これでとりあえずは事足りるのですが、幾つか気になった部分に改修を入れたupgradeバージョンを作成したので共有してみます。使い方も変わっているので、本家とは別の名称で。しかも本家のネームスペースは jquery.json.js だったので、図々しくもこちらは jquery.jsonp.js にしてみました （ドキドキ

jQuery JSONP plugin

目次:

• 使い方
• 使い方サンプル
• 特徴
• オリジナル版との違い
• ダウンロード
• バージョン履歴
• ライセンス
• 古いMac Safariで動かなくてお困りの方へ
• 関連情報

使い方

jQuery本体と、このページからダウンロードできる jquery.jsonp.js 両方をインクルードした上で、

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jsonp.js"></script>

リクエスト対象のWebサービス APIに渡すGETパラメータのうち、「コールバック関数名」を指定する項目に文字列 "{callback}" を指定:

var url = "http://example.com/api/?key=my_api_key&q=hoge"
    + "&callback={callback}";

あとは任意のタイミングで $.getJSONP( url, コールバック関数 ) を実行するだけ:

$.getJSONP( url, function(json) {
    // リクエスト成功時に実行したい処理をここに定義。
    // 変数 json = サーバが返したレスポンスオブジェクト。
    alert( json.result.total_count + '件ヒットしました' );
});

▲RETURN TO TOP

使い方サンプル

リクルート Webサービスのひとつ「AB-ROAD ツアー検索API」に対してキーワード検索をかけて、JSONPでレスポンスを受け取りそのまま画面に表示... といった簡単なサンプルを用意しました。これらのソース一式は下記配布アーカイブの中に含まれています。

使い方サンプル - AB-ROAD ツアー検索デモ

▲RETURN TO TOP

特徴

1. クロスドメイン利用OK。JSONPに対応している任意のWebサービスを、javascriptから直接利用可能。
2. コールバック関数を別途定義せずとも、引数に無名関数を渡すだけで手軽に利用可能。
3. 複数リクエストの並列実施にも対応。
   
4. IEのスクリプトURLを基にしたレスポンスキャッシングを回避。
   

▲RETURN TO TOP

オリジナル版との違い

Michael Gary氏のオリジナルpluginに対して、以下の改変を施しています:

1. $.getJSONP() メソッドを新設
   オリジナル版は $( "div" ).json() のように、何かしらのエレメント(context)を必要とするメソッドだったのに対して、他の $.getScript() や $.getJSON() メソッドと足並みそろえるべく普遍的なクラスメソッドとして実装。
2. jQuery.noConflict() 対応
   →jQuery本体やその他公式のプラグインと同じく、prototype.js等と併用利用しても大丈夫なコードに改変。
3. ブラウザに優しい、エコな設計
   →実行する度に追加されていく script エレメントをそのままメモリに放置しておかずに、毎回使い終わったらエレメントを破棄するように修正。
4. 複数リクエストの並列実施対応を強化
   →オリジナルは各リクエストの一意識別を「実行時の時分秒」ベースで行っていたのに加えて、「実行回数カウンター値」を付与。同じ時分秒での並列実施に対応。

▲RETURN TO TOP

ダウンロード

jQuery JSONP plugin 最新版(v1.1)をダウンロード

アーカイブの中身は以下のようになっています:

jquery_jsonp_plugin_v1.x/
    jquery.jsonp.js  # 本体jsファイル
    sample/          # サンプルソース一式

あるいはjsファイルだけ欲しいかたはこちらからどうぞ。

▲RETURN TO TOP

バージョン履歴

• 2007-08-31 v1.1 - コメントに // を入れ忘れてエラーが起きていました... すんません (T T)
• 2007-08-26 v1.1 - 全体を $.extend() で囲む書き方に修正
• 2007-08-13 v1.0 - 初公開

▲RETURN TO TOP

ライセンス

GNU Lesser General Public License (LGPL)
※LGPL - Wikipedia

▲RETURN TO TOP

古いMac Safariで動かなくてお困りの方へ

(2007-08-26追記) jQueryの公式ドキュメント - Ajaxの章 - にも記述がありますが、jQuery本体の $.getScript() やこのプラグインの $.getJSONP() は共に Mac Safari の古いバージョン (2.0.x 以前のもの) では正しく動作しないようです。どうしてもこれら環境でも動作させたい場合は、Ralf S. Engelschall 氏が公開してくれているプラグイン - xsAJAX - を試してみてください。こちらは同氏が古いSafariでも動くように対策を施してくれているようです(僕は動作未確認)。

▲RETURN TO TOP

関連情報

• JSONP - hail2u.net
  →そもそもJSONPって何？についての解説
• リクルート Webサービス
  →先日追加された「エイビーロード」「進学ネット」「ホットペッパーBeauty」「赤すぐ」APIはすべてJSONPに対応しています。
• JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript - O'Reilly XML.com
  →jQueryを使わないでJSONPを利用するならこの記事で紹介されているライブラリを使うべし。
• ブラウザからJSONで呼び出せるサービス一覧 - snippets from shinichitomita’s journal

▲RETURN TO TOP