JavaScript调用Web Services实现无刷新三联动

使用微软提供的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 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. 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 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. 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 call 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，代码如下
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Web;
using System.Web.Services;
using System.Data.OleDb;
namespace WebApplication1
{
 /// <summary>
 /// Summary description for Service1.
 /// </summary>
 public class Service1 : System.Web.Services.WebService
 {
        public static string ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" + System.Web.HttpContext.Current.Server.MapPath("area.mdb");
        OleDbConnection conn = new OleDbConnection(ConnectionString);

  public Service1()
  {
   //CODEGEN: This call is required by the ASP.NET Web Services Designer
   InitializeComponent();
  }

  #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
  
  #region getProvince
  [WebMethod(true)]
  public string getProvince()
  {
   string sql="select * from province";
   OleDbCommand cmd=new OleDbCommand(sql,conn);
   cmd.Connection.Open();
   OleDbDataReader dr=cmd.ExecuteReader();
   string s="";
   while(dr.Read())
   {
    s += "," + dr["provinceID"].ToString() + "|" + dr["province"].ToString();
   }
   return s;
  }

  #endregion

  #region getCity
  [WebMethod(true)]
  public string getCity(string provinceid)
  {
   string str="select * from city where father = '"+provinceid+"'";
   OleDbCommand cmd=new OleDbCommand(str,conn);

   cmd.Connection.Open();
   OleDbDataReader dr=cmd.ExecuteReader();
   string s="";
   while(dr.Read())
   {
    s += "," + dr["cityID"].ToString() + "|" + dr["city"].ToString();
   }
   return s;
  }

  #endregion

  #region getArea
  [WebMethod(true)]
  public string getArea(string cityid)
  {
   string str="select * from area where father='"+cityid+"'";
   OleDbCommand cmd=new OleDbCommand(str,conn);

   cmd.Connection.Open();
   OleDbDataReader 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]
GO

8.下载真实数据/Files/singlepine/area.rar
9.源代码下载/Files/singlepine/jsWebServices.rar

引用地址http://singlepine.cnblogs.com/articles/301009.html