[覚書] Webサイトから外部WebAPIへアクセスする方法(jQuery getJSON)

この記事は、学習した内容を残しておく為の個人的なメモですが、誤りを発見された場合はコメントしていただけると助かります。

この記事に書かれているコードを実際に動かしたわけではないので、もしかすると誤りが含まれているかもしれませんのでご注意下さい。

構成

FacebookやTwitterなどのJSONPに対応したWebAPIから情報を取得して、Webサイトに表示する。
アクセス方法は、JavaScript(今回はjQueryのgetJSONメソッド)。

ブラウザ -> Webサイト -> WebAPI

アクセス方法

例

$.getJSON("http://hogehoge/api/?callback=?", data, function(data, textStatus, jqXHR){
  // 通信成功時に、ここが実行される。
});

注意すべき点は、callback=?を記述すること。
(jQueryが、コールバック関数の文字列に置き換えてくれる)

もし、WebAPI側の仕様でcallback以外のパラメータ名で実行しなければならない時は、callbackの箇所を書き換えるだけで良い(はず)。
(callback=? -> jsonpCallback=?)

getJSONから返されるjqXHRオブジェクトを使って、通信が、成功/失敗/完了した時の処理を実行することができる。

var jqxhr = $.getJSON("example.json", function() {
    console.log("success");
}).done(function() {
    console.log("second success");
}).fail(function() {
    console.log("error");
}).always(function() {
    console.log("complete");
});

getJSONメソッドについて

GETによるリクエストで、JSON形式にエンコードされたデータをサーバから受け取る。

返り値

jqXHR：XMLHTTPRequestオブジェクトの上位集合

パラメータ

• 第一引数(String url)：リクエスト先のURL。
  • URLのパラメータには、”callback=?”を記述する必要がある。
  • jQueryが、“?”に”jsonp” + 現在時刻文字列の文字列に置き換えてクエリを送信し、内部でコールバック関数を実行してくれる(はず)。
• 第二引数(PlainObject data)オプション：サーバに送信するデータ(Plane ObjectまたはString)
  • Plane Object：new Object()、または「{ … }」の形式で生成されたオブジェクト
• 第三引数(Function success)オプション：通信が成功した場合に実行されるコールバック関数
  • 第一引数(PlainObject data)：JSONオブジェクト
  • 第二引数(String textStatus)：リクエスト結果を表す文字列
  • 第三引数(jqXHR jqXHR)：XMLHTTPRequestオブジェクトの上位集合

キーワード

• Same-Origin Policy(同一生成元ポリシー、同一オリジンポリシー)
• クロスオリジン
• JSONP
• jQuery
• XMLHttpRequest
• getJSON
• Ajax

所感

もともと知っていた情報を整理・覚書する為にこの記事を書いたのだが、実際に整理してみると意外と理解していない事が多かった。

以下は、今後の課題。

FacebookやTwitterなどのサービスと連携したWebサイトを作る場合、今回の方法でその問題を回避することが出来ることが出来るが、Same-Origin Policyに反しているのではないか、と思っている。
(jQueryのAPIドキュメントにはSame-Origin Policyに従っている、と書かれている様なので単なる理解不足なのかもしれない。。。)
セキュリティ的な問題がないかどうか、またその対策方法について調査したい。

また、今後はサーバ側についても調査していきたい。

参照

jQuery.getJSON()で別ドメインのJSONPなデータを読み込む時の注意 - kanonjiの日記:
[http://d.hatena.ne.jp/kanonji/20100427/1272372721]

jQuery.getJSON() | jQuery API Documentation:
[http://api.jquery.com/jquery.getjson/]

Ajax通信 - hifive:
[http://www.htmlhifive.com/conts/web/view/study-room/ajax]

連載：jQuery逆引きリファレンス：第10回 jQuery 1.4編 (4/17) - ＠IT:
[http://www.atmarkit.co.jp/ait/articles/1008/27/news118_4.html]

以上