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