第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（8/11 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　$.getJSONメソッドは、HTTP GET通信でJSON（JavaScript Object Notation）形式のデータを取得するためのメソッドです。JSONは、名前のとおり、JavaScriptのオブジェクト・リテラルを基にしたフォーマットで、JavaScriptとの親和性が高いことから、Ajax通信ではよく利用されています。

　JSONデータの取得は、もちろん、$.get、loadメソッドを利用しても行えますが、$.getJSONメソッドを利用することでよりシンプルにコードを記述できます。$.getJSONメソッドで利用できる引数は、以下のとおりです。

引数	概要
url	アクセスするURL
data	サーバに送信するデータ（「キー: 値」の形式。詳細はloadメソッドも参照）
fnc	処理成功時に実行するコールバック関数
$.getJSONメソッドの引数

　なお、$.getJSONメソッドの戻り値は、（ほかの多くのjQueryメソッドとは異なり）XMLHttpRequestオブジェクトである点に注意してください。

　さっそく具体的な例を見てみましょう。以下は、［データ取得］ボタンをクリックしたタイミングでサーバ側に置いたJSONデータを取得し、その内容をページに反映させる例です。実際のアプリケーションでは、JSONデータはデータベースや外部サービスから動的に生成されることになるはずですが、ここではあらかじめ静的に.jsファイルを用意しておくものとします。

{
  "isbn" : "978-4-7980-2401-1",
  "title" : "ASP.NET MVC実践プログラミング",
  "price" : 3360,
  "publish" : "秀和システム"
}

リスト114 JavaScriptから動的に読み込まれるJSONデータ（Json.js）

<script type="text/javascript">

$(function() {

  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {

    // JSONデータをHTTP GETで取得
    $.getJSON(
      './Json.js', // アクセス先のURL
      function(data, status) {
        $('#result').html(
          data.title  + "(" +
          data.isbn + ")<br/>" +
          data.price + "円<br />" +
          data.publish
        ); // 取得したデータから値を取得＆ページに反映
      }
    );
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="データ取得" />
  <div id="result"></div>
</form>

リスト115 JSONデータをHTTP GETで取得＆ページに反映（GetJson.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト115の実行結果

　コールバック関数（引数fnc）は引数として、以下の情報を受け取ります。

• レスポンス本体（テキスト）
• 通信結果ステータスを表すテキスト（success、notmodifiedなど）

　$.getJSONメソッドで取得したJSONデータは、内部的にデシリアライズ（JavaScriptのオブジェクトとして解析）されていますので、それぞれのメンバには「data.isbn」のように、普通のJavaScriptオブジェクトと同じ要領でアクセスできます。ここでは、JSONデータ（オブジェクト）から必要な値だけを取り出し、レイアウトしたものを<div>要素に反映させています。