jQueryでJSONPを扱う

jQueryでJSONPを扱うのに、ちょっとはまったのでメモ。

jQueryでJSONP形式のWeb APIを利用する場合は、$.ajaxか $.getJSONメソッドで処理を行う。URLパラメータに渡すcallback=? という記述がミソで、このときWeb API側がどのようなコールバックの名前を設定しようとも 自動的に function(data){ のところに返ってくる。

[sourcecode language=’php’]
$.getJSON( “http://example.com/service/?callback=?”,
null,
function(data){
// 処理
});
[/sourcecode]

さて、はまったのはWeb上に用意されているJSONP形式のファイルを扱う場合だ。データの更新頻度が少ない場合は、たまに更新される静的なJSONPファイルを扱うほうがだんぜん早い。
…ということでやってみると、ファイルの中にあらかじめコールバック(“mycallback”とする)の名前が埋め込まれているためか、上記のスクリプトではレスポンスがない。正しくは 「ない」のではなくて 別関数として function mycallback() を用意しておけば、そこに返ってくる。function(data){ へは返ってこない。当然といえば当然なのか。しかし、せっかくjQueryなんだからあくまでもスマートに記述したいのだ。いろいろやってみて以下のようなスクリプトに到達した。

[sourcecode language=’php’]
$.getJSON( “http://example.com/service/example.json?callback=?”,
null,
mycallback = function(data){
// 処理
});
[/sourcecode]

Webや書籍でこのような例が見つからない。あまりやらない方法なのかな?

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください