简单的js解析xml

data.xml<?xml version="1.0" encoding="UTF-8"?>
<data>
<value1>bike</value1>
<value2>car</value2>
</data>
html:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax的三种数据传递方式</title>
<script type="text/javascript">
var myRequest = window.XMLHttpRequest();//window.getXMLHTTPRequest();//window.XMLHttpRequest()
if(myRequest){

myRequest.open("GET","data.xml",false);
myRequest.send(null);
var xml= myRequest.responseXML;
var select = document.getElementById("opt");
html = "<select id='opt'><option>" + xml.childNodes[0].childNodes[0].nodeValue + "</option>";
alert(xml.childNodes[0].childNodes[0].text);

html += "<option>" + xml.childNodes[0].childNodes[1].nodeValue + "</option>";
select.outerHTML = html;
alert(html)
}
</script>
</head>
<body>
<select id="opt"></select>
</body>
</html>大家看看我哪儿写的不对

解决方案 »

  1.   

    我只好說：慎用這種xml.childNodes[0].childNodes[0].nodeValue最好是採用DOM操作。例如：xml.getElementsByTagName('data')或者是：你的XML不要格式化（換行之類的）。採用如這樣的格式：<?xml version="1.0" encoding="UTF-8"?><data><value1>bike</value1><value2>car</value2></data>
    否則，你的childNodes的第一個是空文檔，即你的數據應該是childNodes[1]。
      

  2.   

    本地测试的时候IE会提示访问拒绝。
    FF下正常。
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax的三种数据传递方式</title>
    <script type="text/javascript">
        window.onload = function(){
    var myRequest = new XMLHttpRequest();
    if(myRequest){

    myRequest.open("GET","data.xml",false);
    myRequest.send(null);
    var xml= myRequest.responseXML;
    var select = document.getElementById("opt");
    html = "<option>" + xml.childNodes[0].getElementsByTagName("value1")[0].childNodes[0].nodeValue + "</option>";

    html += "<option>" +xml.childNodes[0].getElementsByTagName("value2")[0].childNodes[0].nodeValue+ "</option>";
    select.innerHTML= html; }
    };
    </script>
    </head>
    <body>
        <select id="opt"></select>
    </body>
    </html>
      

  3.   

    1、创建XMLHttpRequest 对象方法不兼容
    2、outerHTML  兼容不好
    3、你平均的 outerHTML 少了结束标签
    4、获取响应时，判断一下 myRequest.readyState==4 && myRequest.status == 200
    建议 自己调试一下
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax的三种数据传递方式</title>
    <script type="text/javascript">
        window.onload = function(){
    var xmldoc = importXML();
    xmldoc.load("data.xml");
    var data = xmldoc.getElementsByTagName("data")[0];
    var select = document.getElementById("opt");
    var option = document.createElement("option");
    option.text =  data.getElementsByTagName("value1")[0].childNodes[0].nodeValue;

    var option1 = document.createElement("option");
    option1.text = data.getElementsByTagName("value2")[0].childNodes[0].nodeValue;
    if(+'\v1') {
    select.add(option,null);
    select.add(option1,null);
    }
    else {
    select.add(option);
    select.add(option1);
    }
    };
    function importXML() //初始化Xml文档对象
    {
    var orderDoc
    if (+'\v1')
    {  
    orderDoc = document.implementation.createDocument("", "doc", null);//创建FIREFOX下XML文档对象
    orderDoc.async = false;
    }
    else
    {  
    orderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");  
    orderDoc.async = false;  
    while( orderDoc.readyState != 4) {};//创建IE下XML文档对象
    }
    return orderDoc
    }
    </script>
    </head>
    <body>
        <select id="opt"></select>
    </body>
    </html>
      

  5.   

    上面这个可以兼容IE 和FF~
      

  6.   

    以上代码本地通过，谢谢，同时也解决了我的一个问题，但我不知if (+'\v1')，是判断什么啊？其它菜鸟帮我解答一下吧
      

  7.   

    +'\v1'是判断浏览器的一个小技巧
    根据ie不认识\v来做的
    也就是说+'\v1'能隐式转换为true的话，他就是非IE浏览器
      

  8.   

    以下是W3CSCHOOL例题的加载xml文档的代码，同上面的写法有什么区别吗？
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","note.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
      

  9.   

    楼主你可以用以上大家给提供的方法，也可以自己写的安全些，而且全面一些，比如要兼容多个浏览器，需要加入10楼的协议，也要注意象四楼说的那样少用outerHTML等
      

  10.   

    这种写法我就是没法显示xml的内容，是浏览器的兼容性问题吗？
    <script type="text/javascript">
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","data.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;document.getElementById("value1").innerHTML=
    xmlDoc.getElementsByTagName("data")[0].childNodes[0].nodeValue;document.getElementById("value2").innerHTML=
    xmlDoc.getElementsByTagName("data")[0].childNodes[1].nodeValue;</script>这样写不显示value1  value2的值
      

  11.   

    不要结贴啊，多多照顾先来者啊，我还有问题，我以下解释的对吗？zho
            var data = xmldoc.getElementsByTagName("data")[0];  //定义变量data，并取data.xml文档中的所有data下的内容
            var select = document.getElementById("opt");  //不知如何解释？
            var option = document.createElement("option"); //新建一个可选项容器，以便后期添加选项值
            option.text =  data.getElementsByTagName("value1")[0].childNodes[0].nodeValue; //添加选项内容为data下标识为value1下第一个节点的值；