javascript调用WebService - Hello World

WebService既可以大用，也可以小用。
大用可以应用到整个系统，将整个系统设计成SOA(面向服务)，小用可以应用到JS。
今天我们就来看一下如何在网页中用JS来调用WebService。

我们举的例子很简单，用 JS调用默认VS2008生成的Hello World服务。
Service的代码如下：

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Xml.Linq;

namespace  BlogNet.WebService
{
    [WebService(Namespace  =   " http://www.cnblogs.com/davidgu/opservice " )]
    [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
    [ToolboxItem( false )]
     //  To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
     //  [System.Web.Script.Services.ScriptService]
     public   class  OpService : System.Web.Services.WebService
    {

        [WebMethod]
         public   string  HelloWorld()
        {
             return   " Hell o World " ;
        }
    }
}

关键部分是JS的代码，首先，我们需要下载一个 webservice.htc,
这个是IE中支持支持JS调用WebService的组件，我们可以在微软网站下载到。
我们将这个文件放在我们网页的同一个目录。
然后，在HTML中，使用CSS的 behavior特性来调用该组件，如下：
<div id="service" style="behavior:url(webservice.htc)" ...>
我们还需要把web service返回的结果放在div的onresult事件里，如下：
<div id="service" style="behavior:url(webservice.htc)" onresult="onWebServiceResult()"></div>
 
需要注意的是：
url连接必须跟上?wsdl后缀，否则会报错。
" http://localhost:1408/WebService/OpService.asmx?wsdl "


完整代码如下：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " testJsCustomer.aspx.cs "  Inherits = " BlogNet.WebService.testJsCustomer "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > javascript调用WebService </ title >
     < script  type ="text/javascript" >
    
         var  iCallID  =   null ;
         var  sUrl  =   " http://localhost:1408/WebService/OpService.asmx?wsdl " ;
        
         function  getHelloWorld() {
             var  oService  =  document.getElementById( " service " );
            
            oService.useService(sUrl,  " WS_OpService " );
            iCallID  =  service.WS_OpService.callService( " HelloWorld " ); 
        }
        
         /*
        function callback(res) {
            //var oResult = event.result;

            if (!res.error) {
                alert("webservice success!");
            } else {
                alert("webservice error!");
            }
        }
         */
        
         function  onWebServiceResult() {
             var  oResult  =  window.event.result;

             if  (oResult.id  ==  iCallID) {
                 var  oDiv  =  document.getElementById( " Result " );

                 if  (oResult.error) {
                    alert( " An error occurred:  "   +  oResult.errorDetail.string);
                }  else  {
                    alert( " The result is:  "   +  oResult.value);
                }
            }
        }
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
    
     < div  id ="service"  style ="behavior:url(webservice.htc)"  onresult ="onWebServiceResult()" ></ div >
    
     < input  type ="button"  id ="btnLoad"  name ="btnLoad"  value ="load result"  
        onclick ="javascript:getHelloWorld();"   />
    
     < div  id ="Result" ></ div >
    
     </ div >
     </ form >
</ body >
</ html >

运行结果：
alert框弹出 "Hello World"