首页 > 代码库 > 浅谈关于JavaScript解析XML文件的注意事项

浅谈关于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="http://www.mamicode.com/webPath" />/resource/xml/schools.xml      //之所以后面是false,意思是:关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行      xmlhttp.open("GET", "<s:property value="http://www.mamicode.com/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的读写是很消耗性能的,没有数据库的读写效率高,而且也不适合大量数据的频繁读写。

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