Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

JSON形式のWeb APIにアクセスするには?($.getJSON)

2015年12月10日

クロスドメイン制約を回避するための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を利用して、入力された郵便番号に対応する住所を反映するサンプルです。

HTML
<!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>
JSONP+郵便番号検索APIを利用したコード(jsonp.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配列の最初の要素からaddress1address3を取り出して、連結したものを[住所]欄に反映させています。本来であれば、複数の住所情報がある場合にはユーザーに適切な方を選択させるべきですが、ここでは簡単化のために、決め打ちで0番目の要素を反映させています。

処理対象:基本 カテゴリ:Ajax
処理対象:簡略表記メソッド カテゴリ:Ajax
API:.getJSON() カテゴリ:Ajax > Shorthand Methods(簡略表記メソッド)

※以下では、本稿の前後を合わせて5回分(第32回~第36回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
32. 自作のjQueryプラグインに引数を設定するには?($.extend)

プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。

jQuery逆引きリファレンス
33. HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)

$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。

jQuery逆引きリファレンス
34. 【現在、表示中】≫ JSON形式のWeb APIにアクセスするには?($.getJSON)

クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。

jQuery逆引きリファレンス
35. 非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。

jQuery逆引きリファレンス
36. id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター

jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。

サイトからのお知らせ

Twitterでつぶやこう!