構成

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]

以上

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

構成

アクセス方法

例

getJSONメソッドについて

キーワード

所感

参照