school.html文件代码如下：
<HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ajax示例 xml操作</title> </head> <body> <form action="" method="post" style="margin:0px;" name="from" id="from"> <table cellSpacing=0 cellPadding=0 border=0 width=300> <tr> <td width=100>ajax示例</td> <td width=200>xml操作</td> </tr> <tr> <td>国 家:</td> <td><label> <select name="stuta" id="stuta" onChange="schoolsel(this.value)"> <option value="">选择国家</option> <option value="美国">美国</option> </select> </label></td> </tr> <tr> <td>州 名:</td> <td><label> <select name="stu" id="stu"> <option value="">选择城市</option> </select> </label></td> </tr> </table> </form> </body> </html> <script type="text/javascript" src="school.js"></script>
school.asp文件代码如下：
<% Response.Expires=-1 Response.ContentType="text/xml" '--下面的代码您可以从数据库中读取，只要生成XML格式即可 %> <?xml version='1.0' encoding='GB2312'?> <state> <city>纽约</city> <city>华盛顿</city> <city>西雅图</city> </state>
school.js文件代码如下：
var req=createXMLHTTP();
//html页面中用于触发的函数
function schoolsel(value){
var url="school.asp?value="+value;
if(req){
req.open("GET",url,true);
req.onreadystatechange = processRequest;
req.send(null);
}
}
//xml处理函数
function processRequest()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
//XML DOM操作，取出city标记节点
var xmlDOM=req.responseXML.documentElement;
try
{
var xmlItem=xmlDOM.getElementsByTagName("city");
}catch(e){
alert(e.message);
}
var str=new Array();
stu=document.getElementById("stu");
stu.options.length=0;
stu.options[stu.options.length]=new Option("选择州名","选择州名");
for(var i=0;i<xmlItem.length;i++)
{
str[i]=xmlItem[i].firstChild.data;
stu.options[stu.options.length]=new Option(str[i],str[i]);
}
}else{
alert("请求页面发生异常!");
}
}
}
//ajax对象创建函数
function createXMLHTTP()
{
var request;
var browser = navigator.appName;
//使用IE，则使用XMLHttp对象
if(browser == "Microsoft Internet Explorer")
{
var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
for (var i=0; i < arrVersions.length; i++)
{
try
{
//从中找到一个支持的版本并建立XMLHttp对象
request = new ActiveXObject(arrVersions[i]);
return request;
}catch(e){
alert(e.message);
}
}
}else{
//否则返回一个XMLHttpRequest对象
request = new XMLHttpRequest();
return request;
}
}
在线演示地址：http://www.yanghengfei.com/demo/ajax-xml/school.html
示例打包下载：school.zip
版权所有，转载请注明出处。
转载自 <a href="http://www.yanghengfei.com/archives/391/" title="ajax xml操作实例说明" rel="bookmark">ajax xml操作实例说明 | 星外飞客 </a>
我简单说几句