本文实例源码下载
使用微软提供的webservice.htc实现通过JavaScript调用WebService.
1.首先从微软网站上下载webservice.htc,我附件源代码也包含，不下载也可以
http://msdn.microsoft.com/workshop/author/webservice/webservice.htc
2.在网页BODY中添加一个DIV，实现对webservice.htc的引用
<div id="service" style="BEHAVIOR:url(webservice.htc)"></div>
3.编写JavaScript，实现对WebService的引用：
useService 语法:
sElementID.useService(sWebServiceURL, sFriendlyName [, oUseOptions])
callService语法:
iCallID = sElementID.sFriendlyName.callService( [oCallHandler], fo, oParam)
4.建立WebService，代码如下
5.建立测试页面
点击展开
<HTML>
<HEAD>
<title>jsWebServices</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
<!--
var str_province;
var str_city;
var str_area;
function window_onload()
{
service.useService("/Service1.asmx?WSDL","myselect");
str_province=service.myselect.callService(province_Result,"getProvince");
}
function province_Result(result)
{
if(!result.error)
{
document.all("select_province").length=0;
if(result.value.substring(0,1)==",")
result.value =result.value.substring(1,result.length);
var piArray = result.value.split(',');
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split('|');
document.all("select_province").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
}
function province_onchange()
{
var province=document.getElementById("select_province");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
str_city=service.myselect.callService(city_Result,"getCity",pValue);
}
function city_onchange()
{
var city=document.getElementById("select_city");
var cindex = city.selectedIndex;
var cValue = city.options[cindex].value;
var cText = city.options[cindex].text;
str_area=service.myselect.callService(area_Result,"getArea",cValue);
}
function city_Result(result)
{
if(!result.error)
{
document.all("select_city").length=0;
if(result.value.substring(0,1)==",")
result.value =result.value.substring(1,result.length);
var piArray = result.value.split(",");
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("select_city").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
}
function area_Result(result)
{
if(!result.error)
{
document.all("select_area").length=0;
if(result.value.substring(0,1)==",")
result.value =result.value.substring(1,result.length);
var piArray = result.value.split(",");
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("select_area").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="return window_onload()">
<div id="service" style="BEHAVIOR:url(webservice.htc)"></div>
<form id="Form1" method="post" runat="server">
<SELECT id="select_province" onchange="province_onchange();" style="Z-INDEX: 101; LEFT: 8px; WIDTH: 128px; POSITION: absolute; TOP: 16px">
<OPTION selected></OPTION>
</SELECT><SELECT id="select_city" onchange="city_onchange();" style="Z-INDEX: 102; LEFT: 160px; WIDTH: 128px; POSITION: absolute; TOP: 16px">
<OPTION selected></OPTION>
</SELECT><SELECT id="select_area" style="Z-INDEX: 103; LEFT: 304px; WIDTH: 128px; POSITION: absolute; TOP: 16px">
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
</HTML>
6.引用webservicers
7.数据库脚本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[area]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[area]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[province]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[province]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[city]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[city]
GO
CREATE TABLE [dbo].[area] (
[id] [int] NOT NULL ,
[areaID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[area] [nvarchar] (60) COLLATE Chinese_PRC_CI_AS NULL ,
[father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
CREATE TABLE [dbo].[province] (
[id] [int] NOT NULL ,
[provinceID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
[province] [nvarchar] (40) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
CREATE TABLE [dbo].[city] (
[id] [int] NOT NULL ,
[cityID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
[city] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
function window_onload() 
service.useService("/Service1.asmx?WSDL","myselect"); 
}
...{ 
}