本篇文章基于W3C而写
在Firefox及其他浏览器中的XML解析器(除IE)
var xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async="false"; xmlDoc.load("note.xml");
第一行:创建一个空的 XML 文档对象。
第二行:关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行。
第三行:告知解析器加载名为 "note.xml" 的 XML 文档。
解析完成后,就可以通过DOM树来访问XML里面的元素。
比如我们现在有一个XML:
<?xml version="1.0" encoding="UTF-8"?> <information name='ghtt'> <person> <name>hsrshm</name> <sex>male</sex> <birth> <year>1999</year> <month>12</month> <day>19</day> </birth> </person> <person> <name>wx</name> <sex>male</sex> <birth> <month>9</month> <day>5</day> </birth> </person> <person> <name>zyy</name> <sex>male</sex> <birth> <month>5</month> <day>20</day> </birth> </person> <person> <name>wj</name> <sex>male</sex> <birth> <year>2000</year> <month>11</month> <day>29</day> </birth> </person> <person> <name>bl</name> <sex>female</sex> <birth> <year>2002</year> <month>2</month> <day>17</day> </birth> </person> <person> <name>jf</name> <sex>female</sex> <birth> <year>2002</year> <month>5</month> <day>25</day> </birth> </person> </information>
现在我们要在html中读取他们的信息
如法炮制,我写出了如下代码:
var xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async="false"; xmlDoc.load("/xml/mingdan.xml");
但是在chrome浏览器中打开后 提示如下错误:
Uncaught TypeError: xmlDoc.load is not a function
???
换火狐试试,还是没用
在网上我也没找到有关这个问题的解决方法,但是,W3C给我们了另一个方式:$XMLHttpRequest$
这个东西是在后台和服务器交换数据用的,即可以读取服务器里的xml,因此,我们稍微改一改就可以用它来读取本地的xml
代码如下:
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","xml/mingdan.xml",false);//第二个空填xml文件的本地目录 xmlhttp.send(); xmlDoc=xmlhttp.responseXML;
成功读取xml后,显示东西就很简单啦,下面是我所写的一个例子:读取上面的那个xml并显示每个人的名字,性别,生日(没有年份的要特判)
这是代码:
<html> <head> <meta charset="UTF-8"> <title>解析xml</title> <script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",'xml/mingdan.xml',false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("person"); i=0; //console.log(i); function display() { console.log(i); //document.write("begin"); name=(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue); //document.write(name); sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue); birthYear=null; if (x[i].getElementsByTagName("year")[0]!=null) birthYear=x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue; birthMonth=(x[i].getElementsByTagName("month")[0].childNodes[0].nodeValue); birthDay=(x[i].getElementsByTagName("day")[0].childNodes[0].nodeValue); txt="NAME: "+name+"<br />SEX:"+sex+"<br />BIRTH:"; if (birthYear!=null) txt=txt+birthYear+"/"; txt=txt+birthMonth+"/"+birthDay+"<br /><br />"; //console.log(x[i]); document.write(txt); } </script> </head> <body> <div> <script> //display(); for (i=0;i<x.length;i++) display(); </script> </div> </body> </html>
今天才发现原来console.log 不仅可以用在小程序里调试,还可以用在这
PS:chrome默认是无法读取本地文件的,需要在chrome快捷方式-目标里加上如下一段代码才能正常运行
--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
来源:https://www.cnblogs.com/Fizzmy/p/12232434.html