jQueryでJSONP(Twitter)

スズキです。

以前、JSONPが使える"Web API"をまとめましたが、
http://blog.suz-lab.com/2010/01/jsonpweb-api.html
その一つである、TwitterをjQuery(JSONP)で利用する方法です。
http://apiwiki.twitter.com/Twitter-API-Documentation

TwitterでJSONPを利用するには、例えば、以下のようなリクエストをします。
http://search.twitter.com/search.json?callback=foo&q=twitter

ポイントは、callbackパラメータで、指定した名前(foo)に応じて、
下記のようなレスポンスが返るようになっています。
foo(JSONデータ);

ということをふまえて、jQueryを使ったコードを書くと、以下のような感じになります。

--------【JavaScript】--------
<script type="text/javascript"
　　src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
</script>
<script type="text/javascript">
var url = "http://search.twitter.com/search.json?callback=?";
var param = {q: "jquery"};
$.getJSON(url, param, function(json) {
　　for(var i = 0; i < json.results.length; i++) {
　　　　alert(json.results[i].text);
　　}
});
</script>
--------

つまり、"$.getJSON"でJSONPも扱うことができる、ということです。
ポイントは、"callback=?"です。おそらく、「?」があるかないかで、
JSONかJSONPか切り替えてるような気がします。

上記を実行すると、Twitterへのリクエストは、
http://search.twitter.com/search.json?callback=jsonp1267977402483&q=jquery
となり、当然レスポンス次のようになっています。
jsonp1267977402483(JSONデータ);

このことから、実際には"callback=?"の「?」には
jQueryが自動的に作成する関数名(jsonp1267977402483)が差し込まれることがわかります。

あとは、いつもの"$.getJSON"のように、指定した関数内で、
JSONデータ(json)として扱っていくことができます。

"jQuery + JSONP"は手軽すぎるなー。

--------
http://www.suz-lab.com