观看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;
}
注册命名空间下类的构造方法;
{
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属于重载;
{
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());
}
4、
AspNetAjaxOverView.Person.registerClass(
"
AspNetAjaxOverView.Person
"
);
注册这个类;
5、
AspNetAjaxOverView.Employee
=
function
(firstName, lastName, title)
{
AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);
this._title = title;
}
注册命名空间下的Employee类,initializeBase调用其他类的构造方法,以做重载;
{
AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);
this._title = title;
}
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 }
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 }
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 }
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#的使用方法进行使用
2 alert(String.format(
3 " Hello I'm {0} {1}, my title is '{2}' " ,
4 employee.FirstName,
5 employee.LastName,
6 employee.Title));
的确好强大啊
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要经过以上声明才能被客户端使用。
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 }
9、
1
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
2 < Services >
3 < asp:ServiceReference Path ="EmployeeService.asmx" />
4 </ Services >
5 </ asp:ScriptManager >
注册webservice.
2 < Services >
3 < asp:ServiceReference Path ="EmployeeService.asmx" />
4 </ Services >
5 </ asp:ScriptManager >
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(
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 >
firstName,
lastName,
title,
onGetEmployeeSuccess)
为命名空间,类,方法,传参,加上回调函数,就能调用了