这几天群里很多朋友问这个问题，所以就抽时间整理了一下。也方便自己日后查找。
由于WebServices本质来讲是通过http方式请求调用的，所以我们的思路是使用JavaScript的异步请求方式来访问WebServices。
首先我们新建一个Web服务：
1 using System;
2 using System.Web.Services;
3
4 namespace WebApplication
5 {
6 [WebService(Namespace ="http://tempuri.org/")]
7 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
8 [System.ComponentModel.ToolboxItem(false)]
9
10 /// 这句很重要，要想使JavaScript能够调用此Web服务必须增加此特性
11 [System.Web.Script.Services.ScriptService]
12 publicclass Math : System.Web.Services.WebService
13 {
14 [WebMethod]
15 public Int32 Add(Int32 a,Int32 b)
16 {
17 return a + b;
18 }
19 }
20 }
21
2 using System.Web.Services;
3
4 namespace WebApplication
5 {
6 [WebService(Namespace ="http://tempuri.org/")]
7 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
8 [System.ComponentModel.ToolboxItem(false)]
9
10 /// 这句很重要，要想使JavaScript能够调用此Web服务必须增加此特性
11 [System.Web.Script.Services.ScriptService]
12 publicclass Math : System.Web.Services.WebService
13 {
14 [WebMethod]
15 public Int32 Add(Int32 a,Int32 b)
16 {
17 return a + b;
18 }
19 }
20 }
21
对于客户端访问现在提供两种方式来实现：
1、通过微软的Ajax框架来实现（需要.Net Framework 3.5）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication._Default"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7
8 <script type="text/javascript">
9 var calc = function() {
10 var a = parseInt(document.getElementById('numberA').value);
11 var b = parseInt(document.getElementById('numberB').value);
12 /// 这个为Web服务公开的方法，前两个参数为Web服务中定义的参数，第三个参数为调用成功后回调的函数，第四个参数为调用失败后回调的函数
13 WebApplication.Math.Add(a, b, function(rlt) {
14 document.getElementById('result').value = rlt;
15 }, function() {
16 alert('调用Web服务失败！');
17 });
18 };
19 </script>
20
21 </head>
22 <body>
23 <form id="form1" runat="server">
24 <div>
25 <input type="text" id="numberA"/>
26 +
27 <input type="text" id="numberB"/>
28 =
29 <input type="text" id="result"/><br />
30 <input type="button" value="计算" onclick="calc();"/>
31 </div>
32 <div>
33 <%--
34 添加脚本管理器，注册我们刚才定义的Web服务为Ajax中可以使用的Web服务
35 --%>
36 <asp:ScriptManager ID="ScriptManager1" runat="server">
37 <Services>
38 <asp:ServiceReference Path="~/Math.asmx"/>
39 </Services>
40 </asp:ScriptManager>
41 </div>
42 </form>
43 </body>
44 </html>
45
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7
8 <script type="text/javascript">
9 var calc = function() {
10 var a = parseInt(document.getElementById('numberA').value);
11 var b = parseInt(document.getElementById('numberB').value);
12 /// 这个为Web服务公开的方法，前两个参数为Web服务中定义的参数，第三个参数为调用成功后回调的函数，第四个参数为调用失败后回调的函数
13 WebApplication.Math.Add(a, b, function(rlt) {
14 document.getElementById('result').value = rlt;
15 }, function() {
16 alert('调用Web服务失败！');
17 });
18 };
19 </script>
20
21 </head>
22 <body>
23 <form id="form1" runat="server">
24 <div>
25 <input type="text" id="numberA"/>
26 +
27 <input type="text" id="numberB"/>
28 =
29 <input type="text" id="result"/><br />
30 <input type="button" value="计算" onclick="calc();"/>
31 </div>
32 <div>
33 <%--
34 添加脚本管理器，注册我们刚才定义的Web服务为Ajax中可以使用的Web服务
35 --%>
36 <asp:ScriptManager ID="ScriptManager1" runat="server">
37 <Services>
38 <asp:ServiceReference Path="~/Math.asmx"/>
39 </Services>
40 </asp:ScriptManager>
41 </div>
42 </form>
43 </body>
44 </html>
45
这种方式使用微软的Ajax框架来调用Web Services，比较简单，并且与ASP.NET的Web服务结合较为容易，但有所局限（需要.Net Framework 3.5，需要引入微软的Ajax框架资源，如果已有的项目没有使用微软的Ajax框架，而是使用其他的或者自己的Ajax框架，就会有所不便）下面介绍通用的方式。
2、通用的异步请求方式来实现，原理就是异步提交POST数据到Web Services的方法上，分析返回的xml数据，获得结果。下面是用比较流行的Ajax框架JQuery来实现刚才的操作。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script type="text/javascript" src="jquery-1.4.min.js"></script>
6 <script type="text/javascript">
7 var calc = function() {
8 var a = parseInt($('#numberA').val());
9 var b = parseInt($('#numberB').val());
10 /// 这个为Web服务公开的方法所在的URL
11 var methodPath ='./Math.asmx/Add';
12 /// Web服务方法所需的参数
13 var params= { a: a, b: b };
14 $.post(methodPath, params, function(msg) {
15 /// 异步请求成功以后返回的数据为msg，需要通过分析xml来获得返回结果
16 $('#result').val($('int', msg).text());
17 });
18 };
19 </script>
20
21 </head>
22 <body>
23 <div>
24 <input type="text" id="numberA"/>
25 +
26 <input type="text" id="numberB"/>
27 =
28 <input type="text" id="result"/><br />
29 <input type="button" value="计算" onclick="calc();"/>
30 </div>
31 </body>
32 </html>
33
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script type="text/javascript" src="jquery-1.4.min.js"></script>
6 <script type="text/javascript">
7 var calc = function() {
8 var a = parseInt($('#numberA').val());
9 var b = parseInt($('#numberB').val());
10 /// 这个为Web服务公开的方法所在的URL
11 var methodPath ='./Math.asmx/Add';
12 /// Web服务方法所需的参数
13 var params= { a: a, b: b };
14 $.post(methodPath, params, function(msg) {
15 /// 异步请求成功以后返回的数据为msg，需要通过分析xml来获得返回结果
16 $('#result').val($('int', msg).text());
17 });
18 };
19 </script>
20
21 </head>
22 <body>
23 <div>
24 <input type="text" id="numberA"/>
25 +
26 <input type="text" id="numberB"/>
27 =
28 <input type="text" id="result"/><br />
29 <input type="button" value="计算" onclick="calc();"/>
30 </div>
31 </body>
32 </html>
33
这种方式使用通用的异步请求来访问Web服务，适用性较广。适用于任何Web服务。例子中使用JQuery来异步请求和分析结果，如果使用其他的Ajax框架，操作相同。
需要注意：JavaScript方式调用Web服务，同样需要遵循JavaScript的跨域策略，对于外域访问Web服务，需要通过C#做代理，这个抽时间再专门介绍吧。
