本篇文章基于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