執筆者: 有限会社 WINGS プロジェクト 山田 祥寛

動作確認環境: Visual Studio 2010、jQuery 1.5


jQuery では、Ajax 関連のメソッドが多く用意されており、定型的な処理をスマートに記述できると共に、複雑な処理にも柔軟に対応できます。本稿では、サーバーと非同期通信を行い、その結果を現在のページに反映させる例を、いくつかのパターンで紹介します。

まずは、load メソッドを利用した例です。load メソッドは指定された URL の内容をそのままページに反映させるメソッドです。目的特化していますので、柔軟性はありませんが、サーバーからの応答をなにも考えずにページに反映させたいならば、最もシンプルに表現できます。

[リスト 01] CurrentTime.aspx

C#
<%@ Page Language="C#" %> 
<%: DateTime.Now.ToString() %> 
 
 

[リスト 02] Load.html

HTML
<input type="button" id="btn" value="現在時刻" /> 
<div id="current"></div> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('#btn').click(function () { 
  $('#current').load('./CurrentTime.aspx'); 
}); 
</script> 
 
 

            

図 1

[表示] ボタンをクリックすると、Current.aspx から返された現在時刻がページに反映されます (*)。

*) ただし、Internet Explorer ではキャッシュの問題で 2 度目以降のクリックで最新の時刻が反映されません。これを解消する方法については、別稿「Internet Explorer によるコンテンツ キャッシュを無効にする」を参照してください (以下も同様です)。

同じコードを $.get メソッドで表すこともできます。

[リスト03] Get.html

HTML
<input type="button" id="btn" value="現在時刻" /> 
<div id="current"></div> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('#btn').click(function () { 
$.get( 
  './CurrentTime.aspx',    // アクセス先のURL 
  function (data, status, xhr) { 
    $('#current').html(data); 
  });    // 通信に成功した場合の処理 
}); 
</script> 
 
 

$.get メソッドでは、非同期通信に成功した場合の処理をコールバック関数 (太字部分) で表現しますので、load メソッドよりもコードは冗長になりますが、サーバーからの応答を加工したり、表示以外の用途で利用したりする場合には便利です。コールバック関数の引数には、先頭から「応答データ」「ステータス メッセージ」「XMLHttpRequest オブジェクト」が渡されます。

もうひとつ、$.ajax メソッドも利用してみましょう。

HTML
<input type="button" id="btn" value="現在時刻" /> 
<div id="current"></div> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('#btn').click(function () { 
  $.ajax({ 
    url: './CurrentTime.aspx', 
    type: 'GET', 
    success: function (data) { 
      $('#current').html(data); 
    } 
  }); 
}); 
</script> 
 
 
 

$.ajax メソッドでは、Ajax 通信に必要なパラメータを「パラメータ名: 値」のハッシュとして表現します。ここでは、url (通信する URL)、type (利用する HTTP メソッド)、success (成功時の処理) パラメータを指定していますが、その他にも timeout (タイムアウト時間)、error (エラー時の処理)、cache (キャッシュの有無) など、さまざまなパラメータを指定できます。詳しくは、以下のページも参考にしてください。

なんでもできる分、コードは冗長になりますが、アプリケーションから通信を細かく制御したい場合には、$.ajax メソッドを利用すると良いでしょう。


Code Recipe Code Recipe

ページのトップへ