jQuery と ASP.NET で AJAX なページを作る基本

ここでは jQuery と ASP.NET を生で使う、一番シンプルな AJAX ページを作ります。

今まで AJAX という言葉は聞いたことがあっても、自分ではコードを書いたことがない人も多いとおもいます。このページでは ASP.NET のビルトイン機能ではなく、ASP.NET と jQuery を利用して、直接 JavaScript を書くことによって、 AJAX を実装してみましょう。

ここで作るのは次のような単純なものです。

まず、ボタンがひとつあります。

jQuery と ASP.NET

ボタンをクリックすると、JavaScript から裏側でサーバーに問い合わせを行い、その結果を取得して、ページ全体を再描画することなく、文字を表示します。

jQuery と ASP.NET

たったこれだけの内容ですが、これをどのように行うのかみていきましょう。

まずは土台となる HTML ページを作ります。次の内容を default.html という名前で保存します。

<html>
<head>
     <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
     <script src="test1.js" type="text/javascript"></script>
</head>
<body>
<p><input id="button1" type="button" value="OK" /></p>
<p id="text1"></p>
</body>
</html>

ここで利用する jQuery のバージョンは 1.4.4 なので、jquery-1.4.4.min.js を取り込んでいます。最新の jQuery については jQuery のサイトからダウンロードしてください。(Web/DB プログラミング徹底解説の jQuery 解説ページも参考にしてください)

ボタンをクリックしたときの処理は、test1.js に記述します。

$(document).ready(function () {
     $('#button1').click(function () {
         $.ajax({
             url: "handler1.ashx",
             type: 'POST',
             cache: false,
             dataType: 'json',
             success: function (o) {
                 $('#text1').html(
                     o.FirstName + ' ' + o.LastName
                         + ' (' + o.EmployeeID + ')'
                 );
             }
         });
     });
});

ここでは document が読込まれたタイミングで、ボタンの click ハンドラを定義しています。

クリックしたときに行うのは、$.ajax の呼び出しで、呼出し先は handler1.ashx です。この HTTP ハンドラに対して POST リクエストを送り、その応答を受け取ります。

応答は JSON 形式を想定しているので、dataType: 'json' を指定しています。こうすると、success で指定したファンクションオブジェクトの引数には、 JSON 文字列を評価した後のオブジェクトが渡されます。

サーバーからの応答からは、FirstName、LastName、EmployeeID という属性を持つオブジェクトが JSON 形式で返されることを想定していましたから、それらの値をつなぎ合わせて、HTML 要素に文字をセットしています。

<%@ WebHandler Language="C#" Class="handler1" %>

using System;
using System.Web;

public class handler1 : IHttpHandler {
     
     public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";

         Employee emp = new Employee("Keisuke", "Oyama", "000001");

         System.Web.Script.Serialization.JavaScriptSerializer serializer 
             = new System.Web.Script.Serialization.JavaScriptSerializer();

         context.Response.Write(serializer.Serialize(emp));
     }
  
     public bool IsReusable {
         get {
             return false;
         }
     }
}

public class Employee
{
     public Employee(
         string firstName, 
         string lastName, 
         string empID)
     {
         FirstName = firstName;
         LastName = lastName;
         EmployeeID = empID;
     }
     
     public string FirstName { get; set; }
     public string LastName { get; set; }
     public string EmployeeID { get; set; }
}

尚、この HTTP ハンドラ内では Employee オブジェクトを、JavaScriptSerializer を用いて JSON に変換しています。それについては、JavaScriptSerializer による JSON への変換で説明します。