2つのAJAX：「jQuery AJAX API」と「ASP.NET AJAX」

実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント 第8回

［2］非同期リクエストおよびコールバック処理の作成

　Webページ側にjQuery AJAX APIを用いた非同期リクエストとコールバック処理の作成を行います。

1. 場所、会議室のClientIDModeをStaticにする

　jQueryで操作する項目については、前回にも説明した通り、ClientIDModeをStaticに設定しておきます。

リスト2 ClientIDMode設定（ReservationsDetail.aspxより）

<!-- 場所 -->
<asp:DropDownList ID="LocationDropDownList" runat="server"
  AppendDataBoundItems="True" DataTextField="LocationName"
  DataValueField="LocationId" DataSourceID="LocationObjectDataSource"
  ViewStateMode="Enabled" ClientIDMode="Static"
  OnDataBound="LocationDropDownList_DataBound"
  OnInit="LocationDropDownList_Init">
  <asp:ListItem Value="" Text="" />
</asp:DropDownList>

<!-- 会議室 -->
<asp:DropDownList ID="MeetingRoomDropDownList" runat="server"
  DataTextField="MeetingRoomName" DataValueField="MeetingRoomId"
  DataSourceID="MeetingRoomObjectDataSource" ViewStateMode="Enabled"
  ClientIDMode="Static" OnDataBound="MeetingRoomDropDownList_DataBound"
  OnInit="MeetingRoomDropDownList_Init">
</asp:DropDownList>

2. 場所変更時の会議室絞り込み処理を実装する

　場所を変更した際、会議室の絞り込み処理を行うよう、jQueryを使って実装します。

リスト3 場所による会議室絞込み処理（ReservationsDetail.aspxより）

$(document).ready(function () {
  // 場所の変更による会議室絞り込み処理
  var location = $("#LocationDropDownList");
  location.change(function () { // （1）
    $.ajax({  // （2）
      url: "MeetingRoomsHandler.ashx",
      type: "GET",
      data: { locationId: location.val() },
      dataType: "json",
      success: function (result) {	// （3）
        // 会議室の洗い替えを行う
        var meetingRooms = $("#MeetingRoomDropDownList");
        meetingRooms.empty();
        meetingRooms.append($("<option />"));
        $(result).each(function (index, item) {
          meetingRooms.append(
              $("<option />")
                  .val(item.meetingRoomId)
                  .text(item.meetingRoomName)
              );
        });
      }
    });
  });

  ...

});

　（1）changeメソッドを使い、場所変更時の処理を登録する：jQueryのchangeファンクションを使うことで、対象項目を変更した際に呼び出される処理を登録できます。

　（2）ajaxメソッドを使い、場所を送信し会議室データの取得、洗い替えを行う：jQuery AJAX APIの中でももっとも根幹となるajaxファンクションを使うことで、AJAX処理を実装します。

　引数の意味はそれぞれ次のとおりです。

url	データの送信先URLを設定する。 今回は［1］で作成したジェネリックハンドラーを指定する。
type	使用するHTTPメソッドを指定する。 今回はQueryStringで場所情報を渡すため、"GET"を使用する。
data	サーバーに送信するデータを設定する。このデータがQueryStringに設定される。
data-type	サーバーから返却されるデータの種類を設定する。 正しく設定することで、サーバーからの返却データを文字列ではなく、 オブジェクトとして扱えるようになる。
success	サーバーから処理が返ってきた時に呼び出されるコールバックファンクションを設定する。

　（3）サーバーからの返却値のデータから会議室を洗い替える：サーバーからの返却値はsuccessに設定したファンクションの引数に設定されます。この値を使い、一度会議室をクリアし、会議室を追加しなおすことで洗い替えを行います。

　なお、追加処理はjQuery.eachファンクションを使って行うと簡単です。eachファンクションの第二引数には帰ってきた会議室データのオブジェクトが渡されますので、そのままフィールドにアクセスが可能です。

　以上で実装は完了です。実際に動作させ、場所を変更すると会議室が絞り込まれることを確認してみてください。

ASP.NET AJAXの導入

　続いてASP.NET AJAXを用いた場合について説明していきましょう。

ASP.NET AJAXとは

　ASP.NET WebフォームアプリケーションでAJAXを活用したい場合、一番簡単なのはASP.NET 3.5から標準装備となった「ASP.NET AJAX」を使うことです。ASP.NET AJAXでは、ScriptManagerコントロール、UpdatePanelコントロールを使うことで、従来の非AJAXのWebフォームをほとんど変えずにAJAX化することができます。

　簡単に動作原理を説明しておきましょう。

　UpdatePanelコントロール内にコントロールを置き、ボタンなどでSubmitすると、ページ全体が非同期にPostBackされます。非同期PostBack自体は、ScriptManagerコントロールによって自動で生成されたJavaScriptコードにより行われます。

　サーバーサイドでは処理を行った後、処理結果のUpdatePanelのデータだけブラウザに戻します。

　そして、UpdatePanelコントロールの内部が動的に書き換えられます。

図3：ASP.NET AJAXによる非同期PostBack

　UpdatePanelは便利ですが、使用時には次のような点に注意が必要です。

頻繁な非同期​ポストバックを行わない

　 上述のとおりページ全体をサーバーに送ってしまいますので、あまりに頻繁に非同期ポストバックを行うと、ネットワークに負荷がかかってしまいます。

不要なViewStateは無効にする

　 本連載の第4回でも説明した通り、ViewStateに格納された値が大きいと、それだけネットワークに負荷がかかります。それが非同期ポストバックになれば、より頻度が高くなるため、なおのこと気を付けなければなりません。

UpdatePanelと互換性のないサーバーコントロールの存在

　 Loginコントロールなど、UpdatePanelの内部に配置しても動作しないコントロールがいくつかあります。

　詳しくは「UpdatePanelコントロールと互換性のないコントロール」セクションを参照してください。

　非同期ポストバックのリクエスト、レスポンスデータの詳細などは、「［ASP.NET AJAX］UpdatePanelコントロール利用時の注意点とは？［2.0のみ、C#、VB］」の記事を参照してください。