javascript加载xml文件,兼容Chrome
2016-05-29 19:34
405 查看
JavaScript加载xml文件兼容Chrome浏览器;Chrome浏览器没有实现XMLdocument.load方法,你可以换成XmlHttpRequest,
下面是一段实例代码 :
下面是一段实例代码 :
<script type="text/javascript"> function parseXml(fileName) { try{//Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; //加载 XML文档,获取XML文档对象 xmlDoc.load(fileName); }catch(e){//Firefox, Mozilla, Opera, etc. try{ xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async = "false"; //加载 XML文档,获取XML文档对象 xmlDoc.load(fileName); }catch(e){ try{//Google Chrome var xmlhttp=new window.XMLHttpRequest(); xmlhttp.open("get",fileName,false); xmlhttp.send(null); xmlDoc=xmlhttp.responseXML.documentElement; }catch(e){ alert("您的浏览器不能正常加载文件。请切换到兼容模式,或者更换浏览器"); } } } return xmlDoc; } //兼容IE、FireFox、Chrome等浏览器的xml处理函数(selectSingleNode、 selectNodes);selectSingleNode:根据XPath选择单个节点。selectNodes:根据XPath选择多个节点。 window.onload=function() { var provinceNode=document.getElementById('province');//获取省节点 provinceNode.onchange=function()//节点改变时调用该函数 { //清除city节点的所有子节点(除第一个节点) var cityNode=document.getElementById('city'); var cityNodeOptions=cityNode.getElementsByTagName('option'); var len=cityNodeOptions.length; for(var i=1;i<len;i++) { //每次都清除第2个,因为数组cityNodeOptions的长度是动态变化的 cityNode.removeChild(cityNodeOptions[1]); } var provinceVal=this.value; if(provinceVal==null){ return false; } //加载city.xml文件 var xmlDoc=parseXml('cities.xml'); // 重写方法。为了兼容FireFox、Chrome。 if(!window.ActiveXObject) { XMLDocument.prototype.selectSingleNode= Element.prototype.selectSingleNode = function (xpath) { var x = this.selectNodes(xpath) if ( ! x || x.length < 1 ) return null ; return x[ 0 ]; } XMLDocument.prototype.selectNodes=Element.prototype. selectNodes = function (xpath) { var xpe = new XPathEvaluator(); var nsResolver=xpe.createNSResolver( this.ownerDocument ==null?this.documentElement :this.ownerDocument.documentElement); var result = xpe.evaluate(xpath, this , nsResolver, 0 , null ); var found = []; var res; while (res = result.iterateNext()) found.push(res); return found; } } //使用XPATH技术,在xml中查找匹配的province节点 var provinceEles = xmlDoc.selectNodes("//province[@name='" + provinceVal + "']"); var cityNodes=provinceEles[0].getElementsByTagName('city'); //遍历city,得到每个文本值,创建新的节点并添加 for(var i=0;i<cityNodes.length;i++){ var text=cityNodes[i].firstChild.nodeValue; var addNodeOption=document.createElement('option'); var addNodeText=document.createTextNode(text); addNodeOption.appendChild(addNodeText); //将新节点挂载到city节点下 cityNode.appendChild(addNodeOption); } } } </script>
相关文章推荐
- 从js向Action传中文参数出现乱码问题的解决方法
- servlet与jsp核心编程(持续更新)
- ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事?「译」
- 用原生JavaScript实现图片瀑布流的浏览效果
- javascript中的立即执行函数
- 从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)
- javascript+Java 实现MD5加密登录密码
- js基础-input对象,select对象,实例:二级联动菜单
- js处理一个div里面多个点击事件时出现的事件冲突 重复的解决方法 事件冒泡
- JavaScript写一个距离高考还有多少天的案例
- javascript笔试题(4) js模板
- 使用jsoup采集网页实例
- JavaScript(一)基本语法
- 浅析js模板引擎
- Javascript基础2
- js小工具
- 高性能JavaScript模板引擎原理解析
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
- alert() 与 console.log() 的区别
- JavaScript高级程序设计(读书笔记)(五)