WebService既可以大用，也可以小用。
大用可以应用到整个系统，将整个系统设计成SOA(面向服务)，小用可以应用到JS。
今天我们就来看一下如何在网页中用JS来调用WebService。
我们举的例子很简单，用 JS调用默认VS2008生成的Hello World服务。
Service的代码如下：
大用可以应用到整个系统，将整个系统设计成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 "Hello World";
}
}
}
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 "Hello 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>
<!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"