2008年9月27日土曜日

jQueryでJSONP

jQuryだとJSONPを行うのに余計なライブラリを読み込んだり、DOM操作でSCRIPTタグをああだこうだする必要ないので簡単。
普通にAJAXの処理を書く延長で対応できます。


jQuery.getJSON( url, [data], [callback] )

一番シンプルな書き方。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

コールバック関数を jsoncallback=? のように書くのがポイント。
こうすると引数の関数がコールバックで呼び出されます。

jQuery.getJSONのドキュメント
http://docs.jquery.com/Ajax/jQuery.getJSON



jQuery.ajax( options )

ちょっと複雑な処理 (例えばJSONPの 開始と終了時(註1) 終了時に何かを行うとか) をしたい時には jQuery.ajax を使うのが無難です。
$.ajax({
url : 'http://api.flickr.com/services/feeds/photos_public.gne',
data : {
tags : 'cat',
tagmode : 'any',
format : 'json'
},
dataType : 'jsonp',
jsonp : 'jsoncallback',
complete : function(){
//通信終了時の処理

},
success : function(data, status){
//通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)

},
beforeSend : function(){
//通信開始時の処理

},

error : function(){
//通信が失敗した場合の処理

}

});

基本的にはAJAXの処理と書き方は同じです。

特徴的なのは dataType に jsonp を指定すること。
これだけでクロスドメインの通信が可能に。

そして、jsonpオプションでコールバック関数のパラメーター名を指定しています
これはどういうことなのかというと、jQueryはデフォルトでコールバック関数名をcallback というパラメーター名で補完します。
http://api.flickr.com…&callback=?

ただ、Flickrがそうであるようにパラメーター名は普通独自の名前を持っています。(Flickrの場合はjsoncallback)
jsonpオプションはこのパラメーター名を指定するためのオプションです。
{jsonp : 'jsoncallback'}
http://api.flickr.com…&jsoncallback=?


jQuery.ajaxのドキュメント
http://docs.jquery.com/Ajax/jQuery.ajax

※ 註1

Note: All remote (not on the same domain) requests should be specified as GET when 'script' or 'jsonp' is the dataType (because it loads script using a DOM script tag). Ajax options that require an XMLHttpRequest object are not available for these requests. The complete and success functions are called on completion, but do not receive an XHR object; the beforeSend and dataFilter functions are not called.

$.ajax では jsonpで beforeSend などコールバック関数もコールされると思っていましたが、勘違いでした。
実際にコールされるのはsuccess complete だけですのでご注意を。


追記:

上記の制限を解決してくれるプラグインがあるようです。

Google Code: jquery-jsonp
http://code.google.com/p/jquery-jsonp/

エラーハンドリング、キャッシング、タイムアウトなど、デフォルトでは対応できない機能が使えるようになるみたいなので、必要な方は使ってみてはどうでしょうか。

0 件のコメント: