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 " Hell o 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 " 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 >
<! 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"
