亚洲色图.com,亚洲av产在线精品亚洲第一站 ,亚洲砖码砖专无区2023

JavaScript調用Web Services實現無刷新三聯動

使用微軟提供的webservice.htc實現通過JavaScript調用WebService.
1.首先從微軟網站上下載webservice.htc,我附件源代碼也包含，不下載也可以
http://msdn.microsoft.com/workshop/author/webservice/webservice.htc
2.在網頁BODY中添加一個DIV，實現對webservice.htc的引用

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.

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，代碼如下

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>

<!--

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>

</SELECT><SELECT id="select_city" onchange="city_onchange();" style="Z-INDEX: 102; LEFT: 160px; WIDTH: 128px; POSITION: absolute; TOP: 16px">

</SELECT><SELECT id="select_area" style="Z-INDEX: 103; LEFT: 304px; WIDTH: 128px; POSITION: absolute; TOP: 16px">

</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]

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[province]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[province]

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[city]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[city]

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]

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]

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]

8.下載真實數據/Files/singlepine/area.rar
9.源代碼下載/Files/singlepine/jsWebServices.rar

posted on 2007-06-20 13:20 chenguo 閱讀(250) 評論(0) 編輯收藏所屬分類: AJAX Dev

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 動態圖js腳本 js焦點圖片輪換--幾個實例 ajax框架 DHTML應用開發下拉菜單全攻略-JavaScript篇 JavaScript[對象.屬性]集錦 XmlHttp實現無刷新三聯動下拉框 Ajax使用初步 Ajax.NET的幾個示例代碼 Ajax簡單示例之改變下拉框動態生成表格

JavaScript調用Web Services實現無刷新三聯動

導航

統計

留言簿

隨筆分類(1)

文章分類(52)

好友小山的博客

最新隨筆

最新評論

JavaScript調用Web Services實現無刷新三聯動

導航

統計

留言簿

隨筆分類(1)

文章分類(52)

好友 小山的博客

最新隨筆

最新評論

好友小山的博客