ajax解析xml数据并生成下拉列表框
1、使用ajax解析xml，并生成下拉列表框：
ajax生成下拉框
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <meta charset="gbk">
5 <TITLE> Ajax </TITLE>
6 <script language="javascript">
7 var xmlHttp;
8 function createXMLHttpRequest(){
9 if(window.ActiveXObject){
10 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
11 //xmlHttp=new XMLHttpRequest();
12
13
14 }else{
15 //xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
16 xmlHttp=new XMLHttpRequest();
17 }
18 }
19 function getCity(){
20
21 createXMLHttpRequest();
22 xmlHttp.open("POST","C:\\Users\\fzx\\Desktop\\data.xml");
23
24 xmlHttp.onreadystatechange=getCityCallback;
25 xmlHttp.send(null);
26 }
27 function getCityCallback(){
28
29 if(xmlHttp.readyState==4){
30 alert(xmlHttp.statusText);
31 if(xmlHttp.status==200){
32 alert("*************");
33 var allerea=xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes;
34 alert(allerea);
35 var select=document.getElementById("city");
36 select.length=1;
37 select.options[0].selected=true;
38 for(var i=0;i++;i<allarea.length){
39 var area=allarea[i];
40 var option=document.createElement("option");
41 var value=area.getElementsByTagName("value")[0].firstChild.nodeValue;
42 var title=area.getElementsByTagName("title")[0].firstChid.nodeValue;
43 option.setAttribute("value",value);
44 option.appendChild(document.createTextNode(title));
45 select.appendChild(option);
46 }
47 }
48 }
49 }
50
51
52
53 </script>
54 </HEAD>
55
56 <BODY onload="getCity()">
57 <form action="" method="post">
58 <select id="city">
59 <option value="">--请选择--</option>
60 </select>
61 </form>
62
63 </BODY>
64 </HTML>
2、以下为xml数据：
data代码
1 <?xml version="1.0" encoding="utf-8">
2 <allarea>
3 <area>
4 <value>1</value>
5 <title>云浮</title>
6 </area>
7 <area>
8 <value>2</value>
9 <title>肇庆</title>
10 </area>
11 <area>
12 <value>3</value>
13 <title>中山</title>
14 </area>
15 <area>
16 <value>4</value>
17 <title>广州</title>
18 </area>
19 </allarea>
错误说明（高人指点经验所得）：
1、貌似本地离线测试不行，有些浏览器不支持。解决办法：
1）把代码放到网站测试：url="http://localhost/....."
2) 离线环境下，用同步试试
function getCity(){
createXMLHttpRequest();
xmlHttp.open("GET","C:\\Users\\fzx\\Desktop\\data.xml",false);
////xmlHttp.onreadystatechange=getCityCallback;//注意，同步下不能使用
xmlHttp.send(null);
//这里直接取数据
var ret=responseXML
}
2、如果你使用POST，要根据数据传输类型加头信息：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
或 xmlHttp.setRequestHeader("Content-Type","text/XML");之类的
2) 离线环境下，用同步试试
function getCity(){
createXMLHttpRequest();
xmlHttp.open("GET","C:\\Users\\fzx\\Desktop\\data.xml",false);
////xmlHttp.onreadystatechange=getCityCallback;//注意，同步下不能使用
xmlHttp.send(null);
//这里直接取数据
var ret=responseXML
}
2、如果你使用POST，要根据数据传输类型加头信息：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
或 xmlHttp.setRequestHeader("Content-Type","text/XML");之类的
