jQuery逆引きリファレンス
JSON形式のWeb APIにアクセスするには？（$.getJSON）
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
別稿「TIPS：HTTP GET／POSTで非同期通信を実施するには？」でも触れたように、Ajaxでは異なるドメインとは通信できない――いわゆるクロスドメイン制約があります。この制約を回避する代表的な手段として、以前からよく用いられている仕組みがJSONP（JSON with Padding）です。
JSONPとは、名前の通り、JSON（JavaScript Object Notation）形式でデータを交換する仕組みのこと。JSONPでは、本来、Ajax通信を担っているXMLHttpRequestオブジェクトを利用しないため、ドメインをまたいで通信してはいけないという制限からも自由になります。
そしてjQueryでは、$.getJSONメソッドを利用することで、ほとんどそれと意識することなく（＝$.getメソッドと同じように）、JSONPを利用できます。
さっそく、具体的な例も見てみましょう。以下は、郵便番号検索APIを利用して、入力された郵便番号に対応する住所を反映するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<div>
<label for="zip">郵便番号：</label><br />
<input id="zip" type="text" size="10" />
<input id="search" type="button" value="検索" />
</div>
<div>
<label for="address">住所：</label><br />
<input id="address" type="text" size="35" />
</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// ［検索］ボタンクリックで郵便番号検索を実行
$('#search').click(function() {
$.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
{
zipcode: $('#zip').val()
}
)
// 結果を取得したら…
.done(function(data) {
// 中身が空でなければ、その値を［住所］欄に反映
if (data.results) {
var result = data.results[0];
$('#address').val(result.address1 + result.address2 + result.address3);
// 中身が空の場合は、エラーメッセージを反映
} else {
$('#address').val('該当する住所が存在しません。');
}
});
});
});
</script>
</body>
</html>
|
$.getJSONメソッドの構文は、別稿「TIPS：HTTP GET／POSTで非同期通信を実施するには？」で解説した$.get／$.postメソッドと、ほぼ共通しているので、詳しくはそちらを参照してください。ここでは、$.getJSONメソッド固有の部分にフォーカスして解説します。
1リクエストURLには「callback=?」を付与する
JSONPを利用するには、リクエストURL（＝$.getJSONメソッドの第1引数）の末尾にクエリ情報として「callback=?」を付与します。「?」には、jQueryが内部的に利用するコールバック関数の名前が自動的にセットされますので、アプリ開発者は意識する必要はありません。
これだけで、$.getJSONメソッドで別ドメインのサービスにアクセスできるようになります*1。
- *1 その性質上、サービス側でJSONPに対応している必要はあります。
2戻り値はJavaScriptオブジェクト
成功コールバック関数に渡される値（サンプルでは、引数data）は、デコード済みのJavaScriptオブジェクト（配列）です。オブジェクトツリーの構造は、もちろん、アクセスしたサービスによって異なりますが、郵便番号検索APIであれば、以下の通りです（詳しくは本家サイトを参照してください）。
| / | |||
| ├─ | status | 応答ステータス | |
| ├─ | message | エラーメッセージ | |
| └─ | results | 検索結果（配列） | |
| ├─ | zipcode | 郵便番号（ハイフンなし） | |
| ├─ | prefcode | 都道府県コード（JIS X 0401） | |
| ├─ | address1 | 都道府県名 | |
| ├─ | address2 | 市区町村名 | |
| ├─ | address3 | 町域名 | |
| ├─ | kana1 | 都道府県名（カナ） | |
| ├─ | kana2 | 市区町村名（カナ） | |
| └─ | kana3 | 町域名（カナ） |
この例であれば、results配列の最初の要素からaddress1～address3を取り出して、連結したものを［住所］欄に反映させています。本来であれば、複数の住所情報がある場合にはユーザーに適切な方を選択させるべきですが、ここでは簡単化のために、決め打ちで0番目の要素を反映させています。
処理対象：簡略表記メソッド カテゴリ：Ajax
API：.getJSON() カテゴリ：Ajax > Shorthand Methods（簡略表記メソッド）
※以下では、本稿の前後を合わせて5回分（第32回～第36回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
34. 【現在、表示中】≫ JSON形式のWeb APIにアクセスするには？（$.getJSON）
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
35. 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
36. id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
