浅谈关于javaScript解析xml文件的注意事项

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

<?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>

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