ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-01-24 18:00:32  阅读:404  来源: 互联网

标签:XML 解析器 xmlhttp xml getElementsByTagName 笔记 txt xmlDoc


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

标签:XML,解析器,xmlhttp,xml,getElementsByTagName,笔记,txt,xmlDoc
来源: https://www.cnblogs.com/Fizzmy/p/12232434.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有