ASP.NET AJAX深入浅出系列课程(1)：ASP.NET AJAX 概述 笔记（备忘）

 

 

观看ASP.NET AJAX深入浅出系列课程(1)：ASP.NET AJAX 概述，特记下以下笔记，备忘，用微软asp.net ajax 的ScriptManager实现ajax应用：
1、

Type.registerNamespace("AspNetAjaxOverView")

注册一个AspNetAjaxOverView命名空间；

2、

AspNetAjaxOverView.Person = function(firstName, lastName)
        {
            this._firstName = firstName;
            this._lastName = lastName;
        }

注册命名空间下类的构造方法；

3、

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());
            }

定义Person类的方法，toString属于重载；

4、

AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");

注册这个类；

5、

AspNetAjaxOverView.Employee = function(firstName, lastName, title)
        {
            AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);
            
            this._title = title;
        }

注册命名空间下的Employee类，initializeBase调用其他类的构造方法，以做重载；

6、

AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person);

书写完其方法后，调用AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person); 使得Employee类继承Person类。



经过以上初步了解微软ajax是怎样定义一个类的，^o^。



7、

 1 function showEmployee(firstName, lastName, title)
 2             {
 3                 var request = new Sys.Net.WebRequest();
 4                 request.set_url('GetEmployee.ashx');
 5                 request.set_httpVerb("POST");
 6                 request.add_completed(onGetEmployeeComplete);
 7                 
 8                 var requestBody = String.format(
 9                     "firstName={0}&lastName={1}&title={2}",
10                     encodeURIComponent(firstName),
11                     encodeURIComponent(lastName),
12                     encodeURIComponent(title));
13                 request.set_body(requestBody);
14                 
15                 request.invoke();
16             }
17             
18             function onGetEmployeeComplete(response)
19             {
20                 if (response.get_responseAvailable())
21                 {
22                     var employee = response.get_object();
23                     alert(String.format(
24                         "Hello I'm {0} {1}, my title is '{2}'",
25                         employee.FirstName,
26                         employee.LastName,
27                         employee.Title));
28                 }
29             }

 1 using System;
 2 using System.Data;
 3 using System.Configuration;
 4 using System.Web;
 5 using System.Web.Security;
 6 using System.Web.UI;
 7 using System.Web.UI.WebControls;
 8 using System.Web.UI.WebControls.WebParts;
 9 using System.Web.UI.HtmlControls;
10 
11 namespace AspNetAjaxOverview
12 {
13     /// <summary>
14     /// Summary description for Employee
15     /// </summary>
16     public class Employee
17     {
18         private string _FirstName;
19         private string _LastName;
20         private string _Title;
21 
22         public Employee() { }
23 
24         public Employee(string firstName, string lastName, string title)
25         {
26             this._FirstName = firstName;
27             this._LastName = lastName;
28             this._Title = title;
29         }
30 
31         public string FirstName
32         {
33             get
34             {
35                 return this._FirstName;
36             }
37         }
38 
39         public string LastName
40         {
41             get
42             {
43                 return this._LastName;
44             }
45         }
46 
47         public string Title
48         {
49             get
50             {
51                 return this._Title;
52             }
53         }
54     }
55 }

 1 <%@ WebHandler Language="C#" Class="AspNetAjaxOverview.GetEmployee" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Web.Script.Serialization;
 6 
 7 namespace AspNetAjaxOverview
 8 {
 9     public class GetEmployee : IHttpHandler
10     {
11         public void ProcessRequest(HttpContext context)
12         {
13             context.Response.ContentType = "text/plain";
14             
15             string firstName = context.Request.Params["firstName"];
16             string lastName = context.Request.Params["lastName"];
17             string title = context.Request.Params["title"];
18             Employee employee = new Employee(firstName, lastName, title);
19             
20             JavaScriptSerializer serializer = new JavaScriptSerializer();
21             string jsonEmp = serializer.Serialize(employee);
22             
23             context.Response.Write(jsonEmp);
24         }
25 
26         public bool IsReusable
27         {
28             get
29             {
30                 return false;
31             }
32         }
33 
34     }
35 }

使用Sys.Net.WebRequest提交ajax数据，调用url：GetEmployee.ashx，使用POST提交，回调函数用onGetEmployeeComplete，set_body方法为提交的body内容，encodeURIComponent编码字符串，invoke提交ajax，
response.get_responseAvailable()验证返回数据是否可用，JavaScriptSerializer类的Serialize方法是返回employee类型的json字符串形式

1 var employee = response.get_object();
2                     alert(String.format(
3                         "Hello I'm {0} {1}, my title is '{2}'",
4                         employee.FirstName,
5                         employee.LastName,
6                         employee.Title));

get_object()可以直接返回C#类型，可以直接根据C#的使用方法进行使用



的确好强大啊


8 、

 1 <%@ WebService Language="C#" Class="AspNetAjaxOverview.EmployeeService" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Web.Services;
 6 using System.Web.Services.Protocols;
 7 using System.Web.Script.Services;
 8 
 9 namespace AspNetAjaxOverview
10 {
11     [WebService(Namespace = "http://tempuri.org/")]
12     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
13     [ScriptService]
14     public class EmployeeService : System.Web.Services.WebService
15     {
16         [WebMethod]
17         [ScriptMethod]
18         public Employee GetEmployee(string firstName, string lastName, string title)
19         {
20             return new Employee(firstName, lastName, title);
21         }
22     }
23 }

WEBSERVICE要经过以上声明才能被客户端使用。

9、

1 <asp:ScriptManager ID="ScriptManager1" runat="server">
2             <Services>
3                 <asp:ServiceReference Path="EmployeeService.asmx" />
4             </Services>
5         </asp:ScriptManager>

注册webservice.

10、

 1 <script language="javascript" type="text/javascript">
 2             function showEmployee(firstName, lastName, title)
 3             {
 4                 AspNetAjaxOverview.EmployeeService.GetEmployee(
 5                     firstName,
 6                     lastName,
 7                     title,
 8                     onGetEmployeeSuccess);
 9             }
10             
11             function onGetEmployeeSuccess(employee)
12             {
13                 alert(String.format(
14                     "Hello I'm {0} {1}, my title is '{2}'",
15                     employee.FirstName,
16                     employee.LastName,
17                     employee.Title));
18             }
19         </script>

调用很简单，AspNetAjaxOverview.EmployeeService.GetEmployee(
     firstName,
     lastName,
     title,
     onGetEmployeeSuccess)
为命名空间，类，方法，传参，加上回调函数，就能调用了