JSONP について削ぎ落とすだけ削ぎ落としてまとめる

注意

  • 正確でない点、誤っている点が含まれている可能性が高いです

JSONP とは

JSONP で JSON を取得する流れ

  1. 「呼び出し側」から「サービス提供側」に対してデータを取得する旨を伝える
  2. 「サービス提供側」は「呼び出し側」に対して「関数を実行する JavaScirpt のコード*1」を戻す
  3. 「呼び出し側」は「2.」の「関数」を予め作っておく
  4. 「呼び出し側」は「3.」の「関数」を実行することで JSON が取得できる

具体例

1. 「呼び出し側」から「サービス提供側」に対してデータを取得する旨を伝える

  • 以下のようにして HTML の中でデータを取得する旨を伝える*2
<script src="http://zip.ricollab.jp/jsonp_test.php"></script>
  • 補足
    • <script> タグを用いる

2. 「サービス提供側」は「呼び出し側」に対して「関数を実行する JavaScirpt のコード」を戻す

  • 「1.」の戻り値である「関数を実行する JavaScirpt のコード」は以下のとおり*3
this_is_callback({
  "zipcode": "1120002",
  "address": {
    "prefecture": "東京都",
    "city": "文京区",
    "town": "小石川"
  },
  "yomi": {
    "prefecture": "トウキョウト",
    "city": "ブンキョウク",
    "town": "コイシカワ"
  }
});
  • 補足
    • 「関数」の名前は「サービス提供側」が定義した名前である(今回は this_is_callback である)*4
    • 「関数」の引数に、取得したい JSON が入っている
      • 引数が長いために戸惑うかもしれない

3. 「呼び出し側」は「2.」の「関数」を予め作っておく

  • 予め「関数」を作っておかないと何も起こらない*5
  • 「関数」の名前は「サービス提供側」が定義した名前(今回は this_is_callback)にしなければならない
  • 予め作る「関数」は以下のとおり
<script>
  function this_is_callback(return_json_data) {
    console.log(return_json_data); // return_json_data は JSON である
  }
</script>

4. 「呼び出し側」は「3.」の「関数」を実行することで JSON が取得できる

  • 「3.」の記述を HTML に書いておけば、Webブラウザ で HTML が読み込まれた際に「関数」が自動で実行される
  • 「3.」までの手続きが正しければ JSON が取得できている

「呼び出し側」が用意するものと「サービス提供側」が用意するものの区別

「呼び出し側」が用意するもの

  • 「サービス提供側」にどういう方法で「データを取得したい」旨を伝えればよいのかを仕様書などで確認する*6
  • 「サービス提供側」からの戻り値である「関数を実行する JavaScirpt のコード」が実行できる仕組み(すなわち関数)を作る

「サービス提供側」が用意するもの

  • 「呼び出し側」からどういう方法で「データを取得したい」旨を受け取ればよいのかを決める
  • 「呼び出し側」に対して、値(「関数を実行する JavaScirpt のコード」)を戻す仕組みを作る
  • 上記の仕様を「呼び出し側」に公開する

参考(一番わかりやすかった)

  • 「第4部 第14章 第5節」

補足

「Webを支える技術」のサンプルに使われている「ricollab 郵便番号検索」は 2018年2月28日でサービスが終了 とのことです。

*1:ややこしいので具体例を見た方が早いと思う

*2:架空の URI です

*3:Webブラウザでダイレクトにリクエストすると分かりやすい

*4: 「呼び出し側」が自由に命名できる仕組みを「サービス提供側」が用意してくれることがある

*5:this_is_callback is not defined になるだけ

*6:今回は http://zip.ricollab.jp/jsonp_test.php という URI にアクセスするという方法になっている

Powered by はてなブログ