【Javascript】jQueryのAjaxリクエスト 15

今回は、jQueryのAjaxとAjaxリクエストについての最初の表にあるAjax Requests の分類の中で ふたつめの表の4番目のメソッドjQuery.getJSON( url, data, callback ) を紹介します。

jQueryの取得などについては下記リンクをご参照ください。

• jQuery
  • jquey.jsのダウンロード
• jQuery ドキュメント API/1.x/Ajax
• jQueryのダウンロードと設置

getJSON( url, data, callback )

今回のgetJSONメソッドは、$ajaxメソッドでdataTypeを"json"にした場合や$.getメソッドのtype 引数を"json"にした場合と同じですが、それらを簡単に書けるようにしたメソッドです。

第1引数で渡すurlは、ajaxメソッドやloadメソッドと同様に、HTTP通信のリクエスト先を指定するもので、第2、3引数のdataとcallbackは省略可能です。

では、簡単なサンプルを 試してみましょう。

test

サンプルでは、ボタンをクリックすると「ここが書き換わります」と書いてある場所が「2009年のこんにちは」に変わります。

まず、test1のソースを見てみましょう。

<div>ボタンを押してみてください。
  <button id="test">クリック</button>
  <p>
  <span id="my1">ここが書き換わります</span>
  </p>

</div>

<script type="text/javascript">
jQuery(function($){

  $("#test")
    .click(function () { 
       $.getJSON( "./msg.js",
         function(data){ 
          $("#my1").html(
              data.year 
              + " 年の "
              + data.msg
            );
         }
       );
    });
     
});
</script>

サーバー側のJSONデータ ./msg.js

{
  "year" : 2009,
  "msg"  : "こんにちは"
}

第1引数"./msg.js"のJSONデータを読み込むわけですが、ここでは、こちらから送信するdata引数は省略し、コールバック用の関数のみを与えています。

受信したJSONは、コールバックの引数(ここではdata)として与えられますので、data.yearで 「2009」、data.msgで「こんにちは」を受け取ってhtmlメソッドで加工し出力しています。


次ページでは、Webサービスからjsonデータを取得してみます。