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)
为命名空间，类，方法，传参，加上回调函数，就能调用了