ASP.NET2.0下使用AJAX调用Webservice的方法

ASP.NET 2.0 中AJAX能够在客户端Javascript中很方便地调用服务器Webservice，以下为一些调用的示例。笔者安装的ASP.NET 2.0  
   
  版本为AJAX November CTP。
  
  三个示例分别为：
  1 带参数的WS方法
  2 不带参数的WS方法
  3 参数类型为DataTable的WS方法
  
  一、WebMethod
  注意要点：
  1 WebMethod类需要添加命名空间 Microsoft.Web.Script.Services，此空间需要引用Microsoft.Web.Preview.dll
  2 类声明加入标签 [ScriptService]
  3 在Asp.net 2.0里可以直接用DataTable作为返回类型了，但是需要在Web.config文件添加序列化转换器的属性。DataSet、DataTable、DataRow均有转换器 
 

 1      < system .web.extensions >  
 2      < scripting >  
 3      < webServices >  
 4      < jsonSerialization >  
 5      < converters >  
 6      < add name = " DataSetConverter "  type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview " />  
 7      < add name = " DataRowConverter "  type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview " />  
 8      < add name = " DataTableConverter "  type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview " />  
 9      </ converters >  
10      </ jsonSerialization >  
11      </ webServices >  
12      </ scripting >  
13      </ system.web.extensions >  
14 

  

  WEB服务1：WS1 

 1     using  System; 
 2     using  System.Web; 
 3     using  System.Collections; 
 4     using  System.Web.Services; 
 5     using  System.Web.Services.Protocols; 
 6     using  Microsoft.Web.Script.Services; 
 7     using  System.Data; 
 8     /**/ ///   <summary>  
 9     ///  WS1 的摘要说明 
10     ///   </summary>  
11    [WebService(Namespace  =   " http://tempuri.org/ " )] 
12    [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)] 
13    [ScriptService] 
14     public   class  WS1 : System.Web.Services.WebService { 
15     
16      public  WS1 () { 
17     
18      // 如果使用设计的组件，请取消注释以下行 
19      // InitializeComponent(); 
20     } 
21     
22     [WebMethod] 
23      public   string  ServerTime() 
24     { 
25      return  String.Format( " now： {0} " , DateTime.Now); 
26     } 
27     
28     [WebMethod] 
29      public  DataTable GetDataTable() 
30     { 
31     DataTable dt  =   new  DataTable( " Person " ); 
32     
33     dt.Columns.Add( new  DataColumn( " Name " ,  typeof ( string ))); 
34     dt.Columns.Add( new  DataColumn( " LastName " ,  typeof ( string ))); 
35     dt.Columns.Add( new  DataColumn( " Email " ,  typeof ( string ))); 
36     
37     dt.Rows.Add( " he " ,  " sei " ,  livebaby@163.com ); 
38     dt.Rows.Add( " mei " ,  " wu " ,  blog@163.com ); 
39     
40      return  dt; 
41     } 
42    } 
43 

   
   
   
  WEB服务2：WS 

 1     using  System; 
 2     using  System.Web; 
 3     using  System.Collections; 
 4     using  System.Web.Services; 
 5     using  System.Web.Services.Protocols; 
 6     using  Microsoft.Web.Script.Services; 
 7     
 8     /**/ ///   <summary>  
 9     ///  http://meil.livebaby.cn
10     ///   </summary>  
11    [WebService(Namespace  =   " http://tempuri.org/ " )] 
12    [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)] 
13    [ScriptService] 
14     public   class  WS : System.Web.Services.WebService { 
15     
16      public  WS () { 
17     
18      // 如果使用设计的组件，请取消注释以下行 
19      // InitializeComponent(); 
20     } 
21     
22     [WebMethod] 
23     [ScriptMethod(UseHttpGet  =   true )] 
24      public   string  HelloWorld(String query) 
25     { 
26      string  inputString  =  Server.HtmlEncode(query); 
27      if  ( ! String.IsNullOrEmpty(inputString)) 
28     { 
29      return  String.Format( " hello, {0}.  " , inputString); 
30     } 
31      else  
32     { 
33      return   " query string is null or empty " ; 
34     } 
35     } 
36     
37    } 
38 

  
二、前台页面：
  注意要点：
  需要使用的后台WebService的方法均设置在如下位置

 1     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >  
 2      < Services >  
 3      < asp:ServiceReference  Path ="~/WS.asmx"   />  
 4      < asp:ServiceReference  Path ="~/WS1.asmx"   />  
 5      </ Services >  
 6      </ asp:ScriptManager >  
 7    Default页面： 
 8     
 9     <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>  
10     
11     <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >  
12     < html  xmlns ="http://www.w3.org/1999/xhtml" >  
13     < head  runat ="server" >  
14      < title > Untitled Page </ title >  
15     
16      < script  language ="JavaScript"  type ="text/javascript"  src ="js.js" >  
17      </ script >  
18     
19     </ head >  
20     < body >  
21      < form  id ="form1"  runat ="server" >  
22      < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >  
23      < Services >  
24      < asp:ServiceReference  Path ="~/WS.asmx"   />  
25      < asp:ServiceReference  Path ="~/WS1.asmx"   />  
26      </ Services >  
27      </ asp:ScriptManager >  
28      < div >  
29      < asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  OnClientClick ="dd();return false;"   />  
30      < div  id ="time" >  
31      </ div >  
32      < div  id ="List1" >  
33      < asp:DropDownList  ID ="ddl1"  runat ="server"  Width ="187px" >  
34      </ asp:DropDownList >  
35      </ div >  
36     
37      </ div >  
38      </ form >  
39     </ body >  
40     </ html >  
41 

 三、JavaScript程序:
  注意要点：
  AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"(")，而AJAX December CTP 支持以下方法转换“Sys.Preview.Data.DataTable.parseFromJson(result)”

 1  function  dd() 
 2     { 
 3     WS.HelloWorld( 
 4     'hekui', 
 5      function (result) 
 6     { 
 7     alert(result); 
 8     } 
 9     ); 
10     WS1.ServerTime( 
11      function (result) 
12     { 
13     alert(result); 
14      var  divTime  =  document.getElementById( " time " ); 
15     divTime.innerHTML  =  result; 
16     } 
17     ); 
18     WS1.GetDataTable( 
19      function (result) 
20     { 
21      //  获取到下拉框控件 
22      var  List  =  document.getElementById( " ddl1 " ); 
23     
24      // AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"(") 
25      var  Text =  result.dataArray.substring( 0 ,result.dataArray.length  - 1 ); 
26      var  Table  =  eval( Text); 
27     
28      // AJAX December CTP 支持以下方法转换 
29     //  var Table = Sys.Preview.Data.DataTable.parseFromJson(result); 
30     
31      // 清除下拉框原有列表项 
32      for  (x = List.options.length - 1 ; x  >   - 1 ; x -- ) 
33     { 
34     List.remove( 0 ); 
35     } 
36     
37      // 从获取的DataTable添加数据到下拉框列表项 
38      for  (x = 0 ; x  <  Table.length; x ++  ) 
39     { 
40      // 获取每一行 
41      var  Row  =  Table[x]; 
42      // 创建一个列表项 
43      var  option  =  document.createElement( " option " ); 
44      // 列表项显示文本赋值 
45     option.text  =  Row.Name  +   "   "   +  Row.LastName; 
46      // 列表项选项值赋值 
47     option.value  =  Row.Email; 
48     
49      // 判断浏览器类型，进行项目添加 
50      if  ( window.navigator.appName.toLowerCase().indexOf( " microsoft " )  >   - 1 ) 
51     List.add(option); 
52      else  
53     List.add(option,  null ); 
54     } 
55     } 
56     ); 
57     } 
58