天天看点

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 " ,  [email protected] ); 

38     dt.Rows.Add( " mei " ,  " wu " ,  [email protected] ); 

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

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

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

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

"  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   

继续阅读