天天看点
返回

DOM解析XML文件

首先是定义一个XML文件,文件名为student.xml,代码如下：

<?xml version="1.0" encoding="utf-8" ?>

<classmates>

  <student>

    <sid>05205020227</sid>

    <sname>YJ</sname>

    <sex>女</sex>

  </student>

    <sid>05205020228</sid>

    <sname>YKF</sname>

    <sex>男</sex>

    <sid>05205020229</sid>

    <sname>ZDW</sname>

    <sid>05205020230</sid>

    <sname>ZGJ</sname>

</classmates>

接下来就是一个网页文件,嵌入javascript脚本代码，如下：

<head>

    <title>Dom解析HTML</title>

    <script language="javascript" type="text/javascript">

        var XMLHttpReq;

        var url = "student.xml";

        function createXMLHttpRequest()

        {

            if(window.XMLHttpRequest)

            {

                XMLHttpReq = new XMLHttpRequest(); //Mozilla浏览器

            }

            else if(window.ActiveXObject)

                try

                {

                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

                }

                catch(e)

                    try

                    {

                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                    }

                    catch(e)

        }

        //发送请求的函数

        function sendRequest()

            createXMLHttpRequest();

            XMLHttpReq.onreadystatechange = processResponse;

            XMLHttpReq.open("GET",url,true);

            XMLHttpReq.send(null);

        //处理响应的函数

        function processResponse()

            if(XMLHttpReq.readyState==4)//判断对象状态

                if(XMLHttpReq.status==200)//信息已经成功返回，开始处理信息

                    readXml();

                else

                    //页面不正常

                    window.alert(XMLHttpReq.statusText);

                    window.alert("请求的页面有异常");

                }               

        //读取XML文档中的数据信息的函数，既是解析函数

        function readXml()

            var table = document.createElement("table");

            table.setAttribute("border","1");

            table.setAttribute("width","600");

            document.body.appendChild(table);

            var caption = "学生信息"+url;

            table.createCaption().appendChild(document.createTextNode(caption));

            var header = table.createTHead();

            var headerrow = header.insertRow(0);

            headerrow.insertCell(0).appendChild(document.createTextNode("学号"));

            headerrow.insertCell(1).appendChild(document.createTextNode("姓名"));

            headerrow.insertCell(2).appendChild(document.createTextNode("性别"));

            var students = XMLHttpReq.responseXML.getElementsByTagName("student");

            for(var i=0;i<students.length;i++)

                var stud = students[i];

                var sid = stud.getElementsByTagName("sid")[0].firstChild.data;

                var sname = stud.getElementsByTagName("sname")[0].firstChild.data;

                var sex = stud.getElementsByTagName("sex")[0].firstChild.data;

                var row = table.insertRow(i+1);

                row.insertCell(0).appendChild(document.createTextNode(sid));

                row.insertCell(1).appendChild(document.createTextNode(sname));

                row.insertCell(2).appendChild(document.createTextNode(sex));

    </script>

</head>

<body>

    <form >

        <input type="button" value="解析XML文件"  onclick="sendRequest();"/>

    </form>

</body>

</html>

xml javascript 前端开发 数据格式 dom解析xml文件 xml dom解析文件 dom生成文件解析xml dom xml文件 Dom解析Xml
上一篇: 客户端请求WEB页面的过程
下一篇: flask 获取GET和POST请求参数（全）

继续阅读