7.6.1 通过webbehavior.htc调用Web Service

7.6  JavaScript如何调用Web Service

本节将为你介绍JavaScript如何调用Web Service。

7.6.1  通过webbehavior.htc调用Web Service

webservice.htc是微软提供的一个对Web Servie常用方法的封装，可以从微软官方网站下载，安装IE webcontrols时也会安装到你的网站根目录下，使用时需要注意路径。请注意代码中body的属性设置。

实现步骤如下。

（1）首先，我们先创建一个加法运算的Web Service，例如：

  1. using System.Web;  
  2. using System.Web.Services;  
  3. namespace WebService1  
  4. {  
  5.     //<summary>  
  6.     //Service1 的摘要说明  
  7.     //</summary>  
  8.     [WebService(Namespace = "http://tempuri.org/")]  
  9.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  10.     [ToolboxItem(false)]  
  11.     public class Service1 : System.Web.Services.WebService  
  12. {  
  13.         //加法的例子  
  14.         [WebMethod]  
  15.         public int Add(int a, int b)  
  16.         {  
  17.             return a + b;  
  18.         }  
  19.     }  
  20. } 

然后发布，并得到其wsdl。

（2）下载webbehavior.htc这个文件（本书附件中有），然后放到你的Web当前目录下。

（3）在要调用Web Service的页面中，进行如下修改：

  1. <body>  
  2. <div id="addservice" style="behavior:url(webservice.htc)"></div>  
  3. </body> 

这里我们将div id命名为有意义的名称，并且指定style为 webservice行为。接着，我们要书写JavaScript来调用Web Serice了。

首先，我们在JavaScript中调用其addservice.useService（"http://localhost/services/math.asmx?WSDL","MyMath"）；使用id.useService（WSDLL路径，简单的命名方式）；我们之前设定的id是addservice，为了给客户端调用方便，我们这里起了名称，叫MyMath。而为了保证能正确调用webservice，必须在body里的onload事件里，马上加载处理webservice调用的JavaScript，如下：

  1. <script language="JavaScript">  
  2. function init()  
  3. {  
  4. addservice.useService("http://localhost/services/math.asmx?WSDL","MyMath"); }  
  5. </script>  
  6. <body onload="init()">  
  7. <div id="service" style="behavior:url(webservice.htc)">  
  8. </div>  
  9. </body> 

上面我们通过webservice行为，首先得到了返回webservice的wsdl，接下来我们就要进行调用了，调用的格式如下：

  1. iCallID = id.FriendlyName.callService([CallbackHandler,]"MethodName",  
  2. Param1,Param2, ...); 

这里id是我们在div里设置的id,而FridndbyName是我们刚才为方法起的名，这里就是MyMath了，而CallbackHandler是使用回调函数的过程名，如果无设置的话，则默认是使用onresult所调用的方法来进行处理，而param1、param2等则是传入的参数了。例如：

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>Js 调用 WebService实例</title>  
  4.     <script language="JavaScript">      
  5.     function init()  
  6.     {  
  7.         //改成你自己的实际地址  
  8.        divservice.useService("http://localhost:12074/Service1.asmx?WSDL",  
  9.        "MyMath");   
  10.     }  
  11.     function onWSresult()  
  12.     {          
  13.         if((event.result.error)&&(iCallID==event.result.id))//如果有错误  
  14.         {  
  15.             //得到详细错误信息  
  16.             var xfaultcode   = event.result.errorDetail.code;  
  17.             var xfaultstring = event.result.errorDetail.string;  
  18.             var xfaultsoap   = event.result.errorDetail.raw;        
  19.             //错误处理代码              
  20.         }     
  21.         else   
  22.             if((!event.result.error) && (iCallID == event.result.id))  
  23.             {          
  24.                 divservice.innerHTML=  event.result.value;//显示计算结果  
  25.             }  
  26.             else 
  27.             {  
  28.                 alert("Something else fired the event!");  
  29.             }  
  30.     }       
  31.     </script>  
  32. </head>  
  33. <body onload="init()">  
  34.     <div>         
  35.     第1个值：<input type='text' id='ip1' name="ip1"><br>  
  36.     第2个值：<input type='text' id='ip2' name="ip2"><br>  
  37.     <button onclick='iCallID=divservice.MyMath.callService("Add",ip1.value,  
  38.         ip2.value);'   
  39.        id="Button1" type="button">s调用加法方法</button><br>  
  40.     结果:<div id="divservice" style="behavior:url(webservice.htc)" onresult=  
  41.         "onWSresult()">  
  42.         </div>  
  43.     </div>  
  44. </body>  
  45. </html> 

代码中使用了onresult方式返回处理结果，并在div部分的onresult中指定执行处理的方法，这里用的是onWsresult()方法，其中根据返回的信息来判断是否出错，出错的话则显示。

posted @ 2012-02-06 13:55  ^_^肥仔John  阅读(531)  评论(0)  编辑  收藏  举报