Asp.Net Ajax深入浅出（1）：概述

　　本系列内容是根据Jeffrey Zhao的webcast系列课程学习。了解ajax，并为以后的工作保存例子，方便查询。

例子1：使用Generic Handler实现前后台的ajax交互。

　　　1.加入ScriptManager控件。

　　   2.写js脚本实现调用后台Handler 。

　　   3.实现回调函数。

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script language="javascript" type="text/javascript">
        function showEmployee(firstname, lastname, title) {
        
            var request = new Sys.Net.WebRequest();
            request.set_url("GetEmployee.ashx");
            request.set_httpVerb("POST");
            request.add_completed(onGetEmployeeComplete);

            var requestBody = String.format(
                "firstName={0}&lastName={1}&title={2}",
                encodeURIComponent(firstname),
                encodeURIComponent(lastname),
                encodeURIComponent(title));
            request.set_body(requestBody);
            request.invoke();
        }
        function onGetEmployeeComplete(response) {
        
            if (response.get_responseAvailable()) {
                var employee = response.get_object();
                alert(String.format(
                    "Hello I'm {0} {1},My title is '{2}'", employee.FirstName, employee.LastName, employee.Title));
            }
        }
    </script>

　　　4.实现后台的GenericHandler。

public class GetEmployee : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string firstName = context.Request.Params["firstName"];
            string lastName = context.Request.Params["lastName"];
            string title = context.Request.Params["title"];
            Employee employee = new Employee(firstName, lastName, title);

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            StringBuilder jsonEmployee = new StringBuilder();
            serializer.Serialize(employee, jsonEmployee);
            //serializer.Serialize(employee, jsonEmployee);
            context.Response.Write(jsonEmployee);
        }

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

附：Employee的类

public class Employee
    {
        private string _FirstName;
        private string _LastName;
        private string _Title;
        public Employee() { }

        public Employee(string firstName, string lastName, string title)
        {
            this._FirstName = firstName;
            this._LastName = lastName;
            this._Title = title;
        }

        public string FirstName
        {
            get
            {
                return this._FirstName;
            }
        }

        public string LastName
        {
            get
            {
                return this._LastName;
            }
        }

        public string Title
        {
            get
            {
                return this._Title;
            }
        }
    }

 

 

 

 

 

例子2：使用WebService实现前后台的ajax交互。 

　　 1.加入ScriptManager控件，并注册WebService文件。

       2.用JS脚本实现调用后台WebService的方法。

　　 3.实现回调函数

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="EmployeeService.asmx" />    
            </Services>
        </asp:ScriptManager>
        <script language="javascript" type="text/javascript">
            function showEmployee(firstName,lastName,title)
            {
                WebApplication1.EmployeeService.GetEmployee(
                    firstName,
                    lastName,
                    title,
                    onGetEmployeeSuccess);
                
            }
            
            function onGetEmployeeSuccess(employee)
            {
                alert(String.format("Hello I'm {0} {1} ,my title is '{2}'",
                employee.FirstName,
                employee.LastName,
                employee.Title));
            }
        </script>
        <input type="button" value="Bill Gates"
            onclick="showEmployee('Bill', 'Gates', 'Chair man')" />
        <input type="button" value="Steve Ballmer"
            onclick="showEmployee('Steve', 'Ballmer', 'CEO')" />
    </form>

　　4.实现后台的WebService方法（注册ScriptService 和 ScriptMethod）

 

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class EmployeeService : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod]
        public Employee GetEmployee(string firstName, string lastName, string title)
        {
            return new Employee(firstName, lastName, title);
        }
    }

 

 使用WebService的方法比Handler的方法简洁很多。