JavaScript調用WebServices(使用WebService.htc)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

. XML Web services 行為使用戶端指令碼能夠調用由 Microsoft .NET XML Web services 或其他支援簡易物件存取通訊協定 (SOAP) (SOAP) 的 Web 服務器公開的遠程方法。

目的：提供一種簡單的方法使用和利用 SOAP，而不需具有 SOAP 實現的專業知識。

步驟：

1.下載Webservice.htc,許多網上的文章介紹該檔案可以在微軟的網站上找到，但我按照地址點進去時，只看到網頁不存在的提示

2.建立WebService檔案假設為MathService.asmx，其提供Add和Subtract兩個服務函數

3.建立調用的網頁檔案Sample.htm(檔案內容在下面詳細分析)

4.將Webservice.htc複製到Sample.htm同一目錄下

5.通過瀏覽器，瀏覽該網頁

下面分析Sample.htm的內容（取自Msdn）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css"><SCRIPT language="JavaScript">var iCallID;var callObj;function init(){// 定位WebService服務位置，並且為該服務制定一個名字
// 同一ServiceURl可以指定多個名字,Service為HTM檔案中的HTML TAG,可以使用HTML中定義的任何標記service.useService("..\\..\\MathService.asmx?WSDL","MyMath");// 禁用Add按鈕.doAddButton.disabled = true;service.onserviceavailable = enableButton();}function enableButton(){doAddButton.disabled = false;}function doAdd(x, y){// 同步調用 // 建立一個 the SOAPHeader objectvar headObj = new Object();// 建立 the call object callObj = service.createCallOptions();callObj.async = false;callObj.params = new Array();callObj.params.a = x;callObj.params.b = y;callObj.funcName = "Add";callObj.SOAPHeader = new Array();callObj.SOAPHeader[0] = headObj;oSPAN.innerText = x + " + " + y + " = ";// 使用回呼函數"mathResults"調用iCallID = service.MyMath.callService(mathResults, callObj);mathResults(iCallID);}function doSubtraction(y, x){// 非同步呼叫，這是系統預設的調用方式(the default)oSPAN.innerText = y + " - " + x + " = ";// 調用Subtract// 使用回呼函數"mathResults"調用    iCallID = service.MyMath.callService(mathResults,  "Subtract", y, x);}function mathResults(result){// If there is an error, and the call came from the call() in init()if(result.error){// Pull the error information from the event.result.errorDetail propertiesvar xfaultcode   = result.errorDetail.code;var xfaultstring = result.errorDetail.string;var xfaultsoap   = result.errorDetail.raw;oSPAN.innerText = xfaultcode + " " + xfaultstring + " " + xfaultsoap;}// If there was no errorelse{// Show the arithmeticoSPAN.innerText += result.value;}}</SCRIPT></HEAD><body onload="init()">

//設定Div元素繫結WebService服務，在這裡可以添加onresult="onWSresult()"，在該事件中處理調用結果<div id="service" style="behavior:url(../webservice.htc)"></div><BR><BR>Equation : <SPAN id="oSPAN"></SPAN><BR><BR><BUTTON id="doAddButton" onclick="doAdd(5, 6);">Do Add function of 5 and 6</BUTTON><BUTTON onclick="doSubtraction(6, 5);">Do Subtraction of 6 and 5</BUTTON></body>

一些總結：

用戶端必須包含Webservice.htc，將Webservice.htc放在伺服器可訪問的目錄下，可以保證IE瀏覽器瀏覽時自動下載該檔案，該過程對客戶來說是透明的，但是使用其他的瀏覽器可能會無法使用該功能。
擷取調用結果有兩種方式
使用事件捕獲:在Html標記中添加 onresult="onWSresult()"，如：
<SCRIPT language="JavaScript">
var iCallID;
function init()
{
    service.useService("/services/math.asmx?WSDL","MyMath");
    iCallID = service.MyMath.callService("add",5,6);
}
function onWSresult()
{
    if((event.result.error)&&(iCallID==event.result.id))
    {
        var xfaultcode   = event.result.errorDetail.code;
        var xfaultstring = event.result.errorDetail.string;
        var xfaultsoap   = event.result.errorDetail.raw;
        document.writeln("ERROR. Method call failed!");
        document.writeln("Call ID:" + iCallID);
        document.writeln("Fault Code:" + xfaultcode);
        document.writeln("Fault String:" + xfaultstring);
        document.writeln("SOAP Data:" + xfaultsoap);
    }
    else if(event.result.error == false)
    {
        document.writeln("Result received without errors!");
    }
}
</script>
<body onload="init()">
<div id="service" style="behavior:url(webservice.htc)" onresult="onWSresult()">
</div>
</body>
使用回呼函數：（例子見上面）
調用分為同步調用和非同步呼叫，非同步呼叫為預設的調用方式：（例子見上面）
可以使用Callobj進行複雜的調用，設定調用時的參數，以及認證資訊
支援有限的資料類型，請參看http://msdn.microsoft.com/workshop/author/webservice/datatypes.asp

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More