关于JavaScript调用WebService的简单示例！

关于JavaScript调用WebService的简单示例！

这几天群里很多朋友问这个问题，所以就抽时间整理了一下。也方便自己日后查找。
由于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 public class 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  

这种方式使用微软的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  

 

这种方式使用通用的异步请求来访问Web服务，适用性较广。适用于任何Web服务。例子中使用JQuery来异步请求和分析结果，如果使用其他的Ajax框架，操作相同。

 

需要注意：JavaScript方式调用Web服务，同样需要遵循JavaScript的跨域策略，对于外域访问Web服务，需要通过C#做代理，这个抽时间再专门介绍吧。

posted on 2010-07-21 13:39 大树桩 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/veryinf/archive/2010/07/21/1782107.html