浅谈关于JavaScript解析XML文件的注意事项

之前在重庆农商行的时候做项目，涉及到一个级联的功能，需要从XML中读取数据存到select框中。

 

开始的时候一直出错，首先是火狐浏览器报错、但是IE正常，后来是火狐浏览器不报错了但是不显示、而IE依然显示。

 

经过一番仔细的研究，总算解决了问题，下面我总结一下， 希望给更多的人带来帮助。

 

首先呢，是 页面加载的时候要把数据从XML中读取并且存入select中的option 。

 

以下是详细的代码

 

 

第一步：以下是我所定义的XML代码 名称为school.xml

<?xml version="1.0" encoding="UTF-8" ?>

<schools>

  <province name="北京市">

  <school>北京大学</school>

  <school>清华大学</school>

  <school>中国人民大学</school>

  <school>北京交通大学</school>

  <school>北京工业大学</school>

  <school>北京航空航天大学</school>

  <school>北京大学(医学部)</school>

  <school>北京理工大学</school>

  <school>北京科技大学</school>

  <school>中央民族大学</school>

 </province>

 <province name="天津市">

  <school>南开大学</school>

  <school>天津大学</school>

  <school>天津科技大学</school>

  <school>天津工业大学</school>

  <school>中国民航大学</school>

 </province>

 <province name="上海市">

  <school>复旦大学</school>

  <school>同济大学</school>

  <school>上海交通大学</school>

  <school>华东理工大学</school>

  <school>上海理工大学</school>

 </province>

</schools>

 

 

第二步：以下这是Javascript的代码

<script type="text/javascript">



window.onload = function(){ 

    //声明XML对象

    var xmlhttp; 

    //  IE7+, Firefox, Chrome, Opera, Safari 等等都支持XMLHttpRequest，所以用new XMLHttpRequest();可直接获取对象

    if (window.XMLHttpRequest) {  

        xmlhttp = new XMLHttpRequest();

    }

    //但是 IE6、IE5等等不支持XMLHttpRequest，所以用以下的方式获取，创建一个空的微软 XML 文档对象

    else {// code for IE6, IE5

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }     



    //打开XML文档  我的这句话是我的XML文档所在的路径 

   <s:property value="webPath" />/resource/xml/schools.xml  

    //之所以后面是false，意思是：关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行  

    xmlhttp.open("GET", "<s:property value="webPath" />/resource/xml/schools.xml", false);

    xmlhttp.send();

      

    var xmlDom = xmlhttp.responseXML;

    

       //获取xml文件的根节点  

    var root = xmlDom.documentElement;

    

       

      

    //获取根节点下面的省节点  

    var provinces = root.childNodes;  

    

      

    var province = document.getElementById("province"); 



    for (var i = 0; i < provinces.length; i++) {  

        //获取省节点的name属性的值  

        if(provinces[i].nodeType == 1){

            var name = provinces[i].getAttribute("name");  

                //创建一个option  

            var opt = document.createElement("option");  

               //为option添加文本  

            opt.appendChild(document.createTextNode(name));  

            //添加到父节点中  

            province.appendChild(opt);  

        }

    }  

      

    var cities = document.getElementById("PRB_SCHOOLNAME"); 

    province.onchange = function(){  

        var pce = document.getElementById("province");  

        var opts = pce.options;  

        //根据下标获取选中的OPTION  

        var opt1 = opts[pce.selectedIndex];  

        var name = opt1.innerHTML;  

        for (var i = 0; i < provinces.length; i++) {  

            //获取省节点的name属性的值  

            if(provinces[i].nodeType == 1){

                var name1 = provinces[i].getAttribute("name");  

                if (name == name1) {  

                    cities.length = 1;//每次改变的时候清空  

                    var pros = provinces[i];  

                    var citys = pros.childNodes;  

                      

                    for (var j = 0; j < citys.length; j++) {  

                     if(citys[j].nodeType == 1){

       //创建一个option  

       var cityName;

       if(citys[j].text){

        cityName = citys[j].text;

       }else{

        cityName = citys[j].textContent

       }

       var opt = document.createElement("option");  

       //为option添加文本  

       opt.appendChild(document.createTextNode(cityName));  

       //添加到父节点中  

       cities.appendChild(opt);  

      } 

                    }  

                }  

            }  

        }  

    }  

} 



</script>

 

 

第三步：以下是html页面body中的代码

<span>  

                     <select id="province" name="province">  

                         <option>请选择省</option>  

                     </select>  

                 </span>  

                 <span>  

                     <select id="PRB_SCHOOLNAME" name="PRB_SCHOOLNAME">  

                         <option>请选择学校</option>  

                     </select>  

                 </span>

 

 

如果大家有更好的方式，希望可以交流一下经验，一起进步。

 

 

 注意：在做级联的时候，通常有AJAX和XML两种实现方式。

　　　 如果数据是固定的，那么建议采用XML的方式进行操作，因为XML是一次加载，就不会重复的进行读取，比在数据库要有效率！

　　　 但是如果是动态的数据，用户可以自由修改数据的，那么建议采用ajax 的方式，因为XML的读写是很消耗性能的，没有数据库的读写效率高，而且也不适合大量数据的频繁读写。