在客户端页面,我们主要编写了2个javascript函数,?一个用来创建XMLHttpRequest请求和发送请求数据.另一个用来处理返回的xml文档数据.?

?????//?从指定URL加载XML文档数据对象。
?????//?@param?url?请求地址
?????//?@param?reqText?请求数据
?????function?loadXMLDoc(url,reqData)?
?????{
???????????try
???????????{
?????????????????var?xmlHttp;
??????????????if?(window.XMLHttpRequest)?
??????????????{
????????????????????//?创建?Mozilla/FireFox平台的?XMLHttpRequest?对象
?????????????????????????xmlHttp?=?new?XMLHttpRequest();
??????????????}?else?if?(window.ActiveXObject)?
??????????????{
????????????????????//?创建?IE/Windows?平台的XMLHttp对象
???????????????????????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
?????????????????}
??????????//?用POST，非异步方式开启请求地址，
??????????xmlHttp.open("POST",?url,?false);
??????????//?设置提交数据的格式为Form表单格式。
??????????//?如要发送xml格式的数据，将此行注释掉即可。
??????????//?或者显式指定为"Content-Type",?"text/xml;?charset=utf-8"
??????????xmlHttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
??????????//?发送数据
??????????xmlHttp.send(reqData);
?????????????????//?返回xml文档数据对象
?????????????????return?xmlHttp.responseXML;
???????????}catch(exception)
???????????{
?????????????????//alert(exception);
???????????}
?????}

?????//?处理XML文档数据
?????function?processData(param)
?????{
???????????if?(?param==null?)?return;
???????????//?请求参数
???????????var?sParam?=?"country="+param;
???????????//?请求地址
???????????var?sUrl?=?"http://turbo:8080/qis/Ajax.jsp";
???????????//?加载xml文档数据对象
???????????var?xmlDOM?=?loadXMLDoc(sUrl,sParam);
???????????//?下面开始将返回的xml数据解析出来，并添加到列表中。
???????????var?root?=?xmlDOM.documentElement;
???????????try
???????????{
?????????????????document.getElementById("city").length?=?0;
?????????????????for?(i=0;i<root.childNodes.length;i++)
?????????????????{
???????????????????????sValue?=?root.getElementsByTagName('city')[i].firstChild.data;
???????????????????????if(sValue!=null)
???????????????????????{
?????????????????????????????//将解析出来的城市名添加到清单列表中
?????????????????????????????document.getElementById('city').length?=
???????????????????????????????????document.getElementById('city').length+1;
?????????????????????????????document.getElementById('city').options[i].text=sValue;
?????????????????????????????document.getElementById('city').options[i].value="/sValue;
???????????????????????}
?????????????????}
???????????}catch(exception)
???????????{
?????????????????//alert(exception);
???????????}
?????}

其中第1个函数用来从指定URL加载XML文档数据对象,?返回一个XML?DOM对象,?你可以用标准的dom对象方法来解析其中的数据.?这个方法几乎是通用的,?你也可以将它复制到你的Ajax的页面中使用.?而第2个函数处理返回的DOM数据,并将数据添加到指定的表单元素中显示.?注意,?为了跨浏览器使用,?我们的代码里引用表单元素的方法是document.getElementById.?如果你要将它移植到你的程序中,你得重写xml数据解析的代码.?

在表单元素选择省份的下拉式清单上,?我们加了onchange事件,?将当前所选省份传给processData函数处理,?

??onchange="javascript:processData(this.value)
当选择省份时,?则马上调用processData函数,?从服务器端取数据.?


而对于服务端程序,?为了部署简便,?我采用jsp来编写,?它主要负责处理用户请求,?并返回相应的xml文档数据,?其大致结构如下:?

?????//?创建文档对象。
?????Document?doc?=?DocumentBuilderFactory.newInstance()
???????????????????????????????.newDocumentBuilder().newDocument();
?????//?创建文档对象根元素。
?????Element?xmlRoot?=?doc.createElement("result");
?????
?????String?country?=?request.getParameter("country");
?????//?如果是广东省，创建广东省城市数据文档树。
?????if?(?"GuangDong".equals(country)?)
?????{
?????...
?????}
?????//?如果是湖北省，创建湖北省城市数据文档树。
?????else?if?(?"HuBei".equals(country)?)
?????{
?????...
?????}
?????//?如果是湖南省，创建湖南省城市数据文档树。
?????else?if?(?"HuNan".equals(country)?)
?????{
?????...
?????}

???//?如果是山东省，创建山东省城市数据文档树。
?????else?if?(?"HuNan".equals(country)?)
?????{
?????...济南???青岛???潍坊
?????}


?????//?将文档根元素加到文档对象。
?????doc.appendChild(xmlRoot);
?????//?将xml文档数据发送给客户端浏览器。
?????DOMSource?dom