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均有转换器
WEB服务1:WS1
WEB服务2:WS
二、前台页面:
注意要点:
需要使用的后台WebService的方法均设置在如下位置
三、JavaScript程序:
注意要点:
AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"("),而AJAX December CTP 支持以下方法转换“Sys.Preview.Data.DataTable.parseFromJson(result)”
版本为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
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
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
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
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
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