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

ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。

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

連載目次

　$.getメソッドは、HTTP GETによる非同期通信を行います。loadメソッドにも似ていますが、あくまで$.getメソッドはHTTP GETによる通信を行うのみで、結果の反映までを自動的に行うわけではありませんので注意してください（結果を反映するには、コールバック関数を定義する必要があります）。

　$.getメソッドで利用できる引数は、以下のとおりです。

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

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

　さっそく具体的なサンプルを見てみましょう。以下では、［現在時刻］ボタンをクリックしたタイミングでサーバサイド（Current.aspx*3）から現在時刻を取得し、ページに反映します。

*3 Current.aspxのコードは、「非同期に読み込んだコンテンツをそのままページに反映させるには？」を参照してください。

<script type="text/javascript">

$(function() {

  // キャッシュを無効化（Internet Explorer対応）
  $.ajaxSetup({ cache: false });

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

    // HTTP GETによる非同期通信を実行
    $.get(
      './Current.aspx', // アクセスするURL
      function(data, status, XHR) {
        $('#result').html(data);
      } // 処理結果を<div>要素に反映
    );
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>

リスト112 サーバ側から取得した現在時刻を非同期に反映（Get.html）
Current.aspxについては「非同期に読み込んだコンテンツをそのままページに反映させるには？」を参照。このHTMLを実際にブラウザで開く

ブラウザで開く

リスト112の実行結果

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

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

　ここではサーバサイド・スクリプトから受け取ったレスポンス本体を、htmlメソッドで<div>タグに反映させているわけです。

　ここでは便宜上、$.getメソッドを利用していますが、サーバサイドから得た結果をそのままページに反映させるだけであれば、（コールバック関数を書かなくてよい分だけ）loadメソッドの方が便利です。何かしらコールバック関数での処理が必要であるケースで$.getメソッドを利用するとよいでしょう。