Asp.net Ajax(一）概述

       Ajax应用

       1.异步。2、页面部分刷新。3、减少数据传输量。4、提高用户体验（这是根本原因）。

       但是，我也想说也存在Ajax烂用的现象，比如说用户点击一个按钮，发出一个Ajax请求，用户还可以点击页面其它的内容，会发出好多的Ajax请求，从而加重服务器端的压力。所以，怎样可能提高用户体验，是我们开发的根本出发点。

        微软Asp.net的Ajax实现

          1、与asp.net2.0无缝集成。

          2、轻易添加Ajax效果。

          3、以服务端为中心开发（不用写JS代码）。

          4、以客户端为中心开发（提供丰富支持）。

         Asp.net Ajax组件

               

         Microsoft Ajax Library

               1、JavaScript基础扩展

         2、浏览器兼容层。

         3、面向对象类型系统。

         4、异步通信层

         5、客户端基础类库

 

        Demo 面向对象类型类型系统

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <script type="text/javascript">
            //注册命名空间
            Type.registerNamespace("AspNetAjaxOverView");
            //构造函数，在类型系统中有个命名规则，就是前面加下划线就是私有成员，一般来说不让你主动访问
            AspNetAjaxOverView.Person = function (firstName, lastName) {
                this._firstName = firstName;
                this._lastName = lastName;
            }
            //定义方法成员
            AspNetAjaxOverView.Person.prototype =
                {
                    get_firstName: function () {
                        return this._firstName;
                    },
                    get_lastName: function () {
                        return this._lastName;
                    },
                    toString: function () {
                        return String.format("Hello,I'm {0} {1}", this.get_firstName(), this.get_lastName());
                    }
                }
            //这句话不可少，告诉类型系统定义了一个类
            AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");

            //定义employee类，继承person类
            AspNetAjaxOverView.Employee = function (firstName, lastName, title) {
                AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);
                this._title = title;
            }
            AspNetAjaxOverView.Employee.prototype =
                {
                    get_title: function () {
                        return this._title;
                    },
                    //覆盖父类的toString方法
                    toString: function () {
                        return AspNetAjaxOverView.Employee.callBaseMethod(this, "toString") + ".My title is " + this.get_title() + ".";
                    }
                }

            //这句话中，有说明继承哪个类
            AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person);
        </script>
        <%--相当于申请了两个客户端的实例--%>
         <input type="button" value="Bill Gates"
		οnclick="alert(new AspNetAjaxOverView.Employee('Bill', 'Gates', 'Chair man'))" />
    <input type="button" value="Steve Ballmer"
		οnclick="alert(new AspNetAjaxOverView.Employee('Steve', 'Ballmer', 'CEO'))" />
     </form>

           Demo 异步层通信

        

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <script type="text/javascript">
            function showEmployee(firstName,lastName,title)
            {
                //创建一个WebRequest对象
                var request = new Sys.Net.WebRequest;
                request.set_url('GetEmployee.ashx');
                request.set_httpVerb("post");
                //定义了一个回调函数onGetEmployeeComplete  回调函数就是说发出一个请求后要等服务器端回复，服务器端回复后用回调函数来通知。
                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())
                {
                    //get_object()方法会直接调用Eval()方法，把服务器端交给客户端的jason字符串变成客户端的一个对象。javascript对象
                    var employee = response.get_object();
                    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"
			οnclick="showEmployee('Bill', 'Gates', 'Chair man')" />
		<input type="button" value="Steve Ballmer"
			οnclick="showEmployee('Steve', 'Ballmer', 'CEO')" />
    </form>

         GetEmployee.ashx

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace AspNetAjaxOverView
{
    /// <summary>
    /// GetEmployee 的摘要说明
    /// </summary>
    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"];

            AspNetAjaxOverView.App_Code.Employee employee = new App_Code.Employee(firstName, lastName, title);

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string jsonEmp = serializer.Serialize(employee);

            context.Response.Write(jsonEmp);
        }

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

     Asp.net Ajax Extensions

      1、序列化与反序列化。

      2、客户端访问WebService方法。

      3、服务器端Ajax控件

            ScriptManager

            UpdatePanel

            Extender

       Demo 客户端调用WebService

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
           <Services>
               <asp:ServiceReference Path="EmployeeService.asmx" />
           </Services>
        </asp:ScriptManager>
        <script type="text/javascript">

            Type.registerNamespace("AspNetAjaxOverView");

            function showEmployee(firstName, lastName, title)
            {
                AspNetAjaxOverView.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"
			οnclick="showEmployee('Bill', 'Gates', 'Chair man')" />
		<input type="button" value="Steve Ballmer"
			οnclick="showEmployee('Steve', 'Ballmer', 'CEO')" />
    </form>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace AspNetAjaxOverView
{
    /// <summary>
    /// EmployeeService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
    [System.Web.Script.Services.ScriptService]
    public class EmployeeService : System.Web.Services.WebService
    {
        [WebMethod]
        public AspNetAjaxOverView.App_Code.Employee GetEmployee(string firstName, string lastName, string title)
        {
            return new AspNetAjaxOverView.App_Code.Employee(firstName, lastName, title);
        }
    }
}

     employee类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AspNetAjaxOverView.App_Code
{
    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;
            }
        }
    }
}