亲宝软件园·资讯

展开

XML学习笔记——关于XML解析器

Fizzmy 人气:0

本篇文章基于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<https://img.qb5200.com/download-x/day>
        </birth>
    </person>
    <person>
        <name>wx</name>
        <sex>male</sex>
        <birth>
            <month>9</month>
            <day>5<https://img.qb5200.com/download-x/day>
        </birth>
    </person>
    <person>
        <name>zyy</name>
        <sex>male</sex>
        <birth>
            <month>5</month>
            <day>20<https://img.qb5200.com/download-x/day>
        </birth>
    </person>
    <person>
        <name>wj</name>
        <sex>male</sex>
        <birth>
            <year>2000</year>
            <month>11</month>
            <day>29<https://img.qb5200.com/download-x/day>
        </birth>
    </person>
    <person>
        <name>bl</name>
        <sex>female</sex>
        <birth>
            <year>2002</year>
            <month>2</month>
            <day>17<https://img.qb5200.com/download-x/day>
        </birth>
    </person>
    <person>
        <name>jf</name>
        <sex>female</sex>
        <birth>
            <year>2002</year>
            <month>5</month>
            <day>25<https://img.qb5200.com/download-x/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);
            /https://img.qb5200.com/download-x/document.write("begin");
            name=(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            /https://img.qb5200.com/download-x/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>
                /https://img.qb5200.com/download-x/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

加载全部内容

相关教程
猜你喜欢
用户评论