浅谈关于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的读写是很消耗性能的，没有数据库的读写效率高，而且也不适合大量数据的频繁读写。