Ajax实现异步传输

1,简单JavaScript实

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <script language="javascript" 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 am {0},{1}" , this.get_firstName(), this.get_lastName());
                }
            };

            AspNetAjaxOverview.Person.registerClass("AspNetAjaxOverview.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: function () {
                    return AspNetAjaxOverview.Employee.callBaseMethod(this, "toString") + ", my title  is:" + this.get_title();
                }
            }

            AspNetAjaxOverview.Employee.registerClass("AspNetAjaxOverview.Employee", AspNetAjaxOverview.Person); //将类注册到命名空间中
            
        </script>
       
    <input id="Button2" type="button" value="button2" onclick="alert(new AspNetAjaxOverview.Employee('Bill','Gates','chair man'));" />

2,客户端服务器实现

Defalut.aspx

<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>
    <input type="button"  value="Bill " onclick="showEmployee('Bill','gate','chair man')"/>

类:

public class Employee
    {
        private string _FirstName;
        private string _LastName;
        private string _Title;

        public Employee() { }

        /// <summary>
        /// 构造函数,传入三个参数
        /// </summary>
        /// <param name="firstName"></param>
        /// <param name="lastName"></param>
        /// <param name="title"></param>
        public Employee(string firstName, string lastName, string title)
        {
            this._FirstName = firstName;
            this._LastName = lastName;
            this._Title = title;
        }

        /// <summary>
        /// 获取firstname
        /// </summary>
        public string FirstName
        {
            get
            {
                return this._FirstName;
            }
        }
        /// <summary>
        /// 获取lastname
        /// </summary>
        public string LastName
        {
            get
            {
                return this._LastName;
            }
        }
        /// <summary>
        /// 获取title
        /// </summary>
        public string Title
        {
            get
            {
                return this._Title;
            }
        }
    }

服务器端:EmployeeServers.asmx

namespace AspNetAjaxOverview
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [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);
        }
    }
}

一般处理:GetEmployee.ashx

namespace AspNetAjaxOverview
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [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);
        }
    }
}

相关推荐