14.1JSONとは何か

JSONは、「JavaScript Object Notation」の略で、RFC4627が規定するデータ記述言語です。その名の通り、JavaScriptの記法でで０田を記述できる点が最大の利点である。シンプルさが故に、プログラミング言語間でデータを受け渡せれる。

WebサービスではJavaScriptが相性良いことと、XMLと比べデータの冗長性
が低いことなどの利点からAjax通信におけるデータフォーマットとして活用できる。

14.2 メディアタイプ

JSONのメディアタイプは「application/json」です。JSONは仕様上 UTF-8、UTF-16などにエンコードできるようになっているため、最初の文字を確認すれば、エンコーディングを特定できるが、メディアタイプにも設定できる。

Content-Type : application/json; charset=utf-8

14.3 データ型

JSONにはデータ型があります。基本的なことであるため、抜粋します。

オブジェクト
オブジェクトは、名前と値の集合体である。オブジェクトの名前は文字列である。値は、ブーリアン型や数値、文字列、オブジェクト、配列の値が取れる。

{
"name" : "Name",
"number" : 5,
"hobby": ["book", "movie", "eat food" ],

}

配列
文字列
数値
ブーリアン
null

※配列と、文字列、ブーリアン型などは割愛する。理由は基本的な用語であるから。

リンク
ハイパーメディアフォーマットには欠かせない。JSONでリンクを表現するには、
単純にリンクを文字列で持つことは簡単です。

{
"link" : "http:://www.exaple.jp",
}

URIを相対パスにすることは可能ですが、絶対パスの方がベストです。
理由：相対パスだと、相対パスURIをはっきりする必要があるからです。

JSONPによるクロスドメイン通信

JSONでリソース表現を提供する副次的効果として「JSONP」が利用できる。

JSONPを説明する前に、「Ajaxで用いるXMLAPIは、セキュリティ上の制限から、
JAvaScriptファイルを取得した同じサーバとしか通信できません」。

JavaScriptと異なる別サーバと通信できてしまうと、ブラウザで入力した情報をユーザが知らぬ間に不正なサーバと通信できてしまうからである。

このように、不特定多数のドメインに属するサーバに通信できるような仕組みをクロスドメイン通信と呼ぶ。
しかし、不特定多数のサーバと通信できず、単一なドメインとしか通信できないのは不便である。
例えば、地図データと郵便番号データを保持せずに、APIを使用し、そこから便宜データを取得するのは、できないからである。

しかし、XMLHTTPRequestでも、複数のドメインサーバと通信できる方法はあります。

HTMLに複数のscriptタグを用いて、複数のドメインから取得する方法である。
script要素は、歴史的に複数のドメイン要素を取得できるからである。

14.5コールバック関数を取得するJSONP

JSONPはブラウザの特性を利用して、JSONPではクライアントがオリジナルのJSONをコールバック関数でラップしてドメインの異なるサーバからデータを取得する。

つまり、コードに落とすと以下のようになる。

test.html

<html>
  <head>
    <title>クロスドメイン通信</title>
  </head>
  <body>
    <script type="text/javascript">
      function foo(zip) {
        alert(zip['zipcode']);
      }
    </script>
    <script src="http://www.zip.ricollab.jp/1120002.json?callback=foo">

    </script>
  </body>
</html>

[イメージ図]
(https://www.figma.com/file/Ms3Ul4BPUrW9gcCRADK61O/JSONP%E3%81%AB%E3%82%88%E3%82%8B%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%80%9A%E4%BF%A1?type=design&node-id=0%3A1&mode=design&t=IwwHMMViPjhjVXG0-1)

リクエストとレスポンスについては以下のようになります。

リクエスト
GET	1120002.json?callback=foo HTTP1.1
Host	zip.recollab.jp

レスポンス
HTTP1.1	200 OK
Content-Type	application/javascript

foo({
    "zipcode" : "1120002",
    "address" : {
      "prefecture": "東京都",
      "city" : "文京区",
      "town": "小岩川",
    },
    "yomi": {
      "prefecture" : "とうきょうと",
      "city": "ぶんきょうく",
      "town" : "こいわかわ",
    }

  })