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をコールバック関数でラップしてドメインの異なるサーバからデータを取得する。
つまり、コードに落とすと以下のようになる。
<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>
リクエストとレスポンスについては以下のようになります。
| リクエスト | ||
|---|---|---|
| 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" : "こいわかわ",
}
})