JavaScript和Webservice实现联动-白红宇

JavaScript和Webservice实现联动

阅读量：7098 次

发布时间：2019-06-28

本文共 8875 字，大约阅读时间需要 29 分钟。

关于无刷新联动,目前实现的方法有很多种,可以使用XMLHttpRequest对象来实现,也可以采用Ajax Library,另外也可以使用AjaxControlToolkit里的控件来实现.刚刚这些天在一个项目里使用到了这个功能

通常联动又分静态联动（数据不变）和动态联动（数据会变动），比如省市区县这里固定数据就是很少变动的。又比如一个公司里，下面分得有不同的部分，各部门下又可能有不能的小组......这样的关系，各个小组都有可能随时都会变动的，撤消也可能会增加小组等。下面我就一动态联动简单介绍下。

准备工作：

● 建立数据库

Code

USE AJAX

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

drop table [dbo].[Citys]

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

drop table [dbo].[Districts]

CREATE TABLE [dbo].[Citys] (

[CityID] [int] IDENTITY (1, 1) NOT NULL ,

[CityName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL

) ON [PRIMARY]

CREATE TABLE [dbo].[Districts] (

[DistrictID] [int] IDENTITY (1, 1) NOT NULL ,

[DistrictName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,

[CityID] [int] NULL

) ON [PRIMARY]

● 初始化数据

● 建立相关类和WebService

City

public class City

{

public City()

{ }

public City(int id, string name)

{

this.CityId = id;

this.CityName = name;

}

private int _cityId;

public int CityId

{

get

{ return _cityId; }

set

{ _cityId = value; }

}

private string _cityName;

public string CityName

{

get

{ return _cityName; }

set

{ _cityName = value; }

}

District

public class District

{

public District()

{ }

public District(int id, string name,int cid)

{

this.DistrictId = id;

this.DistrictName = name;

this.CityID = cid;

}

private int _districtId;

public int DistrictId

{

get

{ return _districtId; }

set

{ _districtId = value; }

}

private string _districtName;

public string DistrictName

{

get

{ return _districtName; }

set

{ _districtName = value; }

}

private int _cityID;

public int CityID

{

get

{ return _cityID; }

set

{ _cityID = value; }

}

AjaxPattern.WebService

namespace AjaxPattern

{

/**//// <summary>

/// WebService 的摘要说明

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class WebService : System.Web.Services.WebService

{

public WebService()

{ }

[WebMethod]

public City[] GetCitys()

{

List<City> list = new List<City>();

DataTable dt = DataAccess.GetCitys();

foreach (DataRow row in dt.Rows)

{

list.Add(new City(

int.Parse(row["CityID"].ToString()),

row["CityName"].ToString()));

}

return list.ToArray();

}

[WebMethod]

public District[] GetDistricts(int cityID)

{

List<District> list = new List<District>();

DataTable dt = DataAccess.GetDistricts(cityID);

foreach (DataRow row in dt.Rows)

{

list.Add(new District(

int.Parse(row["DistrictID"].ToString()),

row["DistrictName"].ToString(),

int.Parse(row["CityID"].ToString())));

}

return list.ToArray();

}

一、使用XMLHttpRequest实现

建立两个aspx文件，AjaxClient.asp,AjaxServer.aspx，下面是两个文件的CS代码定义：

public

partial

class

AjaxClient : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.ddlCitys.DataSource = new WebService().GetCitys();

this.ddlCitys.DataTextField = "CityName";

this.ddlCitys.DataValueField = "CityID";

this.ddlCitys.DataBind();

ddlCitys.Items.Insert(0, new ListItem("--请选择--", "0"));

ddlDistricts.Items.Insert(0, new ListItem("--请选择--", "0"));

this.ddlCitys.Attributes.Add("onchange", "getDistrictByCityID(this.value);");

this.ddlDistricts.Attributes.Add("onchange", "displayResults();");

}

在AjaxClient.aspx里放置了两个下拉列表控件，一个用来显示城市，一个用来显示区。在AjaxClient的服务端我们为城市绑定好数据，这里是通过调用WebService里的GetCitys()得到的一个数组，详细可以看上面的WebService的详细定义代码，这里我们还为这两个控件设置了客户端事件及响应事件的方法。下面我们看看AjaxServer.aspx的定义：

public

partial

class

AjaxServer : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

int cityID = 0;

if (Request["CityID"] != null)

{

int.TryParse(Request["CityID"], out cityID);

}

GetDistricts(cityID);

}

private void GetDistricts(int cityID)

{

District[] dist = new WebService().GetDistricts(cityID);

StringBuilder sb = new StringBuilder();

sb.Append(@"<?xml version=""1.0"" ?>");

sb.Append(@"<Districts>");

foreach (District d in dist)

{

sb.Append(@"<District id='" + d.DistrictId + "' cityID='" + d.CityID + "'>" + d.DistrictName + "</District>");

}

sb.Append(@"</Districts>");

Response.Clear();

Response.ContentType = "text/xml";

Response.Write(sb.ToString());

Response.End();

}

上面的代码不难理解，在Page_Load里获取AjaxClient.aspx传递过来的CityID这个参数，然后通过这个参数的值调用下面定义的GetDistricts方法，在这方法里通过调用WebService里的方法得到查询数据库得到一个数组对象。然后在把这个数组对象解吸为XML并Response给客户端。客户端的JavaScript定义如下：

script type

text/javascript

//初始化客户端控件引用

var

ddlCitys

document.getElementById(

<% = ddlCitys.ClientID %>

);

var

ddlDistricts

document.getElementById(

<% = ddlDistricts.ClientID %>

);

初始化HttpRequest

var

HttpRequest

false

;

(window.XMLHttpRequest)

{

HttpRequest = new XMLHttpRequest();

}

else

{

HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

resetDistrit();

function

getDistrictByCityID(cityID)

{

if(!HttpRequest) return;

if(cityID<0) return;

var uri="AjaxServer.aspx?CityID="+cityID;

HttpRequest.open("GET",uri);

HttpRequest.onreadystatechange=function()

{

if (HttpRequest.readyState == 4 && HttpRequest.status == 200)

{

var xml=HttpRequest.responseXML;

var disctricts=xml.getElementsByTagName("District");

ddlDistricts.options.length=0;

for(i=0;i<disctricts.length;i++)

{

var value=disctricts[i].firstChild.nodeValue;

var id=disctricts[i].attributes[0].value;

ddlDistricts.options[i]=new Option(value,id);

}

ddlDistricts.disabled=false;

}

HttpRequest.send(null);

}

function

displayResults()

{

var result="";

var citys=document.getElementsByName(ddlCitys);

var district=document.getElementsByName(ddlDistricts);

if(ddlDistricts.selectedIndex>0)

{

result += ddlCitys.options[ddlCitys.selectedIndex].text +" ";

result += ddlDistricts.options[ddlDistricts.selectedIndex].text;

}

document.getElementById("Results").innerHTML=result;

}

function

resetDistrit()

{

ddlDistricts.options.length=0;

ddlDistricts.disabled=true;

}

script>

来分析下上面的JavaScript的定义，getDistrictByCityID方法就是通过CityID做为参数向AjaxServer.aspx发起请求，然后返回一个XML对象，然后通过getDistrictByCityID方法的回调函数来处理返回的XML，解析后把值绑定到ddlDistrict这个下拉列表控件上，这样使用XMLHttpRequest就实现了异步发起请求并处理回调的方式实现了无刷新联动。运行如下：