ASP.NET AJAX客户端实现方式（实例）

要实现的效果：单击一个按钮，会弹出相应的对话框来显示，姓名，职业等。
以下将分别通过面向对象的类型系统、异步通信层两个方式来实现：
前提：已经装了ASP.NET 2.0 AJAX Extensions ，请先下载：【ASP.NET AJAX安装软件下载】
1、面向对象的类型系统：
新建一个Web窗体（Default.aspx），往工作区拉入一个ScriptManager控件，然后在源代码页面添加如下代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>面向对象的类型系统</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript" language="javascript">
        Type.registerNamespace("Aillo"); //注册并创建命名空间Aillo
        Aillo.person=function(p1,p2)    //定义person类的构造函数，两个参数
        {
            this._p1=p1;
            this._p2=p2;
        }
        Aillo.person.prototype=         //以下是定义person的方法：get_p1、get_p2、get_p3
        {
            get_p1: function()
            {
                return this._p1;
            },
            get_p2: function()
            {
                return this._p2;
            },
            toString : function() //覆盖toString方法
            {
                return String.format("Hello, I'm {0} {1}. ", this.get_p1(),this.get_p2());
            }
        }
        Aillo.person.registerClass("Aillo.person"); //注册Person类
        Aillo.title=function(p1,p2,tt)     //定义title类的构造函数，三个参数
        {
            Aillo.title.initializeBase(this,[p1,p2]); //调用父类的构造函数
            this._tt=tt;
        }
        Aillo.title.prototype=   //定义title类的方法:get_tt
        {
            get_tt: function()
            {
                return this._tt;
            },
            toString : function() //覆盖父类的toString方法
            {
                return Aillo.title.callBaseMethod(this,"toString")+"Title is '"+this.get_tt()+"'";
            }
        }
         Aillo.title.registerClass("Aillo.title",Aillo.person); //注册title类
</script>

        <input type="button" value="AilloChen" onclick="alert(new Aillo.title('Aillo','Chen','Student'));" />
        <input type="button" value="JackieYeah" onclick="alert(new Aillo.title('Jackie','Yeah','Student2'));" />
    </form>
</body>
</html>

2、异步通信层：
新建一个web窗体（Default2.aspx），代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_081117_Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>异步通讯层</title>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script language="javascript" type="text/javascript">
        function showEmployee(first, last, title)
        {
            var request =new Sys.Net.WebRequest();
            request.set_url("GetEmployee.ashx");
            request.set_httpVerb("POST"); //HTTP请求方式为POST
            request.add_completed(onGetEmployeeComplete); //设置回调函数

            var requestBody = String.format(
           "first={0}&last={1} &title={2}",   //这里&后面不能有空格
           encodeURIComponent(first),
           encodeURIComponent(last),
           encodeURIComponent(title));
           request.set_body(requestBody); //设置请求的内容
            request.invoke(); //向服务器发送请求
        }

        function onGetEmployeeComplete(response)
        {
            if(response.get_responseAvailable())
            {
                var employee=response.get_object(); //获取response返回的对象
                alert(String.format(
                "Hello, I'm {0} {1}.title is '{2}'", employee.get_first,employee.get_last,employee.get_title));
            }
        }
    </script>

    <input type="button" value="AilloChen" onclick="showEmployee('Aillo','Chen','Student')" />
        <input type="button" value="JackieYeah" onclick="showEmployee('Jackie','Yeah','Student2')" />

    </div>
    </form>
</body>
</html>

新建一个Employee类（Employee.cs）,代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// Employee 的摘要说明
/// </summary>
///
namespace Aillo
{
    public class Employee
    {
        private string _first;
        private string _last;
        private string _title;
        public Employee()
        {
            //
            // TODO: 在此处添加构造函数逻辑
            //
        }
        public Employee(string first, string last, string title)
        {
            this._first = first;
            this._last = last;
            this._title = title;
        }
        public string get_first
        {
            get
            {
                return this._first;
            }
        }
        public string get_last
        {
            get
            {
                return this._last;
            }
        }

        public string get_title
        {
            get
            {
                return this._title;

            }
        }
    }
}

新建一个一般处理程序（GetEmployee.ashx），代码如下：

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

using System;
using System.Web;
using System.Web.Script.Serialization;
using Aillo;
public class GetEmployee : IHttpHandler
{

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string first = context.Request.Params["first"];
            string last = context.Request.Params["last"];
            string title = context.Request.Params["title"];
            Employee employee = new Employee(first, last, title);
            JavaScriptSerializer ss = new JavaScriptSerializer();
            string ee = ss.Serialize(employee); //序列化
            context.Response.Write(ee);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
}