Ajax接收XML,DOM解析动态生成下拉列表框


在XMLHttpRequest对象中可以使用responseXML()方法接收一组返回的动态生成的XML数据,当然也可以直接读取一个XML文件,通过DOM解析对数据进一步操作。下面的Demo详细说明了如何利用Ajax接收服务器返回的XML文件,并采用DOM解析的方式动态生成下拉列表框。

PS:运行时,只在IE内核浏览器下正常。

allarea.xml:

[xml]
<?xml version="1.0" encoding="GBK"?>
<allarea>
<area>
<id>1</id>
<title>北京</title>
</area>
<area>
<id>2</id>
<title>天津</title>
</area>
<area>
<id>3</id>
<title>南京</title>
</area>
</allarea>
[/xml]

ajax_select.html:

[html]
<!DOCTYPE html>
<html>
<head>
<title>ajax_select.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!–<link rel="stylesheet" type="text/css" href="./styles.css">–>

</head>
<script language="javascript" type="text/javascript">
var xmlHttp;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getCity(){
createXMLHttp();
xmlHttp.open("POST", "allarea.xml");
xmlHttp.onreadystatechange = getCityCallback;
xmlHttp.send(null);
}
function getCityCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes;
//取得下拉列表框city的对象
var select = document.getElementById("city");
select.length = 1;//显示一个内容
select.options[0].selected = true;//设置第一个为选中
//循环all下的子节点
for(var i = 0; i < allarea.length; i++){
var area = allarea[i];//取得每一个<area>
// 创建option元素
var option = document.createElement("option");
//取得每一个<area>中的<id>内容
var id = area.getElementsByTagName("id")[0].firstChild.nodeValue;
//取得每一个<area>中的<title>内容
var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
//在option中设置显示的内容
option.setAttribute("value", id);
//在option中添加显示的文本内容
option.appendChild(document.createTextNode(title));
//在下拉框中加入option属性
select.appendChild(option);
}
}
}
}
</script>
<body onLoad="getCity()"><!– 页面加载时调用 –>
<form action="xxx.jsp" method="post">
请选择城市:
<select id="city">
<option value="0"> –请选择城市– </option>
</select>
</form>
</body>
</html>
[/html]

发表评论