kanonjiの日記

jQuery.getJSON()で別ドメインのJSONPなデータを読み込む時の注意

javascript, jQuery

jQuery.getJSON(url, data, callback);
$.getJSON(url, data, callback);

jQuery1.2以降で、かつAPI側が対応*1していればですが、jQuery.getJSON() で別ドメインにあるJSONPデータを読み込めます。

JSONPを返すAPIというのは、どこかに仕様があるのか暗黙の習慣なのかは知らないけど、APIのURIに callback=foo*2 といった引数を付ける事になります。

jQuery.getJSON() でもcallback=? をつけると説明する記事がちらほらありますが、ちょっと誤解しやすい気がします。

自分は勘違いしました。

$.getJSON('http://search.twitter.com/search.json?callback=?',
  {
    q: "#jquery"
  },
  function(data, status){
    $.each(data.results, function(i, item){
      console.log(item.text);
    });
  }
);

Twitter Search APIを例にしたコードです。

jQuery.getJSON() で JSONPを読み込むには、URIに callback=? を付けます。

ここで重要なのは ? です。

この ? は、SQLのプレースホルダーみたいなもので、そのまま ? を書かないといけません。

解説記事であまり深く触れてないところが結構あって、最初は自分でコールバック関数名を指定できるのかと思いましたが、それは勘違いでした。

jQuery.getJSON() でJSONPを読み込もうとすると、callback=? は callback=jsonp1272137974675 の様なコールバック関数名に置き換えられます。

そしてjsonp1272137974675() が呼ばれてJSONデータが、jQuery.getJSON()の第3引数であるコールバック関数*3に引数で渡されます。

Same-Originポリシー

同じドメインのデータにしかアクセスできないというポリシー。

これがあるから、JSONはJSONPという形で読み込む必要があります。

Exception: uncaught exception: [Exception... "Access to restricted URI denied"  code: "1012"

Firefoxで別ドメインのJSONを、そのまま読み込もうとすると、この様な例外が発生します。

引数の書き方を変えてみてどうなるか

通る例

$.getJSON('http://search.twitter.com/search.json?callback=?&q=%23jquery',
  function(data, status){
    $.each(data.results, function(i, item){
      console.log(item.text);
    });
  }
);

通らない例

$.getJSON('http://search.twitter.com/search.json',
  {
    callback: "?",
    q: "#jquery"
  },
  function(data, status){
    $.each(data.results, function(i, item){
      console.log(item.text);
    });
  }
);

ツイートする

Permalink | コメント(4) | トラックバック(3) | 21:52