使用微软提供的webservice.htc实现通过JavaScript调用WebService.
1.首先从微软网站上下载webservice.htc,我附件源代码也包含,不下载也可以
http://msdn.microsoft.com/workshop/author/webservice/webservice.htc
2.在网页BODY中添加一个DIV,实现对webservice.htc的引用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
< 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 >
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
8.下载真实数据
/Files/singlepine/area.rar
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
9.源代码下载 /Files/singlepine/jsWebServices.rar
<div id="service" style="BEHAVIOR:url(webservice.htc)"></div>
3.编写JavaScript,实现对WebService的引用:
function
window_onload()
{
service.useService("/Service1.asmx?WSDL","myselect");
str_province=service.myselect.callService(province_Result,"getProvince");
}
useService 语法:{
service.useService("/Service1.asmx?WSDL","myselect");
str_province=service.myselect.callService(province_Result,"getProvince");
}
sElementID.useService(sWebServiceURL, sFriendlyName [, oUseOptions] )
useService 参数:
sElementID | Required. The id of the element to which the WebService behavior is attached. | ||||||||
sWebServiceURL | Required. String specifying the URL of the Web Service, using one of the following path types. See the examples section, where several variations of this parameter are shown.
| ||||||||
sFriendlyName | Required. String representing a friendly name for the Web Service URL. | ||||||||
oUseOptions | Optional. An instance of the useOptions object. |
callService语法:
iCallID = sElementID.sFriendlyName.callService( [oCallHandler], fo, oParam )
callService参数:
sElementID | Required. The id of the element to which the WebService behavior is attached. | ||||
sFriendlyName | Required. The friendly name for the Web Service, which is defined by calling the useService method. | ||||
oCallHandler | Optional. Name of a script callback function that handles the results returned from this instance of the method call. | ||||
fo | Required. One of the following possible values.
| ||||
oParam | Required. One or more comma-delimited parameters, which are passed to the method name specified by fo. |
4.建立WebService,代码如下
public class
Service1 : System.Web.Services.WebService
{
public static string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlConnection conn=new SqlConnection(ConnectionString);
public Service1()
{
//CODEGEN: This call is required by the ASP.NET Web Services Designer
InitializeComponent();
}
Component Designer generated code#region Component Designer generated code
//Required by the Web Services Designer
private IContainer components = null;
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
}
/**//// <summary>
/// Clean up any resources being used.
/// </summary>
protected override void Dispose( bool disposing )
{
if(disposing && components != null)
{
components.Dispose();
}
base.Dispose(disposing);
}
#endregion
getProvince#region getProvince
[WebMethod(true)]
public string getProvince()
{
string sql="select * from province";
SqlCommand cmd=new SqlCommand(sql,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["provinceID"].ToString() + "|" + dr["province"].ToString();
}
return s;
}
#endregion
getCity#region getCity
[WebMethod(true)]
public string getCity(string provinceid)
{
string str="select * from city where father = '"+provinceid+"'";
SqlCommand cmd=new SqlCommand(str,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["cityID"].ToString() + "|" + dr["city"].ToString();
}
return s;
}
#endregion
getArea#region getArea
[WebMethod(true)]
public string getArea(string cityid)
{
string str="select * from area where father='"+cityid+"'";
SqlCommand cmd=new SqlCommand(str,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["areaID"].ToString() + "|" + dr["area"].ToString();
}
return s;
}
#endregion
}
{
public static string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlConnection conn=new SqlConnection(ConnectionString);
public Service1()
{
//CODEGEN: This call is required by the ASP.NET Web Services Designer
InitializeComponent();
}
Component Designer generated code#region Component Designer generated code
//Required by the Web Services Designer
private IContainer components = null;
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
}
/**//// <summary>
/// Clean up any resources being used.
/// </summary>
protected override void Dispose( bool disposing )
{
if(disposing && components != null)
{
components.Dispose();
}
base.Dispose(disposing);
}
#endregion
getProvince#region getProvince
[WebMethod(true)]
public string getProvince()
{
string sql="select * from province";
SqlCommand cmd=new SqlCommand(sql,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["provinceID"].ToString() + "|" + dr["province"].ToString();
}
return s;
}
#endregion
getCity#region getCity
[WebMethod(true)]
public string getCity(string provinceid)
{
string str="select * from city where father = '"+provinceid+"'";
SqlCommand cmd=new SqlCommand(str,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["cityID"].ToString() + "|" + dr["city"].ToString();
}
return s;
}
#endregion
getArea#region getArea
[WebMethod(true)]
public string getArea(string cityid)
{
string str="select * from area where father='"+cityid+"'";
SqlCommand cmd=new SqlCommand(str,conn);
cmd.Connection.Open();
SqlDataReader dr=cmd.ExecuteReader();
string s="";
while(dr.Read())
{
s += "," + dr["areaID"].ToString() + "|" + dr["area"].ToString();
}
return s;
}
#endregion
}