http://singlepine.cnblogs.com/articles/301009.html

?

使用微軟提供的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的引用：
function?window_onload()?
????????????{
????????????????service.useService("/Service1.asmx?WSDL","myselect");
????????????????str_province=service.myselect.callService(province_Result,"getProvince");
????????????}useService 語法:
sElementID.useService(sWebServiceURL, sFriendlyName [, oUseOptions])
useService 參數:

sElementID	Required. The of the element to which the 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. Web Service file name A Web service file, which has an .asmx file extension. This short form of the URL is sufficient, provided that the Web service is located in the same folder as the Web page using the WebService behavior. In this case, the ?WSDL query string is assumed by the behavior. WSDL file name A Web Services Description Language (WSDL) file name. The WSDL file must have a .wsdl file extension. Full file path Full path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string. Either a local file path or a URL can be specified. Relative path A relative path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string.
sFriendlyName	Required. String representing a friendly name for the Web Service URL.
oUseOptions	Optional. An instance of the object.

callService語法:
iCallID = sElementID.sFriendlyName.callService( [oCallHandler], fo, oParam)
callService參數:

sElementID	Required. The of the element to which the behavior is attached.
sFriendlyName	Required. The friendly name for the Web Service, which is defined by calling the 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. strFuncName A String representing the name of the remote function being called. The String must be bounded by single or double quotation marks. objCall A object, which has the necessary properties defined to call a remote function.
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
????}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]
GO8.下載真實數據/Files/singlepine/area.rar
9.源代碼下載/Files/singlepine/jsWebServices.rar

?

轉載于:https://www.cnblogs.com/291099657/archive/2009/04/09/1432493.html

總結

以上是生活随笔為你收集整理的JavaScript调用Web Services实现无刷新三联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。