zoukankan      html  css  js  c++  java
  • HTML-XML数据解析

    HTML代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var xhr = null;
                if (window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get", "Book.xml", true);
                xhr.send(null);
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState==4) {
                        if (xhr.status == 200) {
                            var data = xhr.responseXML;
                            var bs = data.getElementsByTagName("bookstore")[0];
                            var books = bs.getElementsByTagName("book");
                            var li="";
                            for (var i = 0; i < books.length; i++) {
                                var book = books[i];
                                var name = book.getElementsByTagName("name")[0];
                                var person = book.getElementsByTagName("person")[0];
                                var like = book.getElementsByTagName("like")[0];
                                li+='<li>'+getNodeText(name)+'<br/>'+getNodeText(person)+'<br/>'+getNodeText(like)+'<br/></li>'
                            }
                            var ul = document.createElement("ul");
                            ul.innerHTML = li;
                            document.getElementById("book").appendChild(ul);
                        }
                    }
                }
            }
            function getNodeText(node) {
                if (window.ActiveXObject) {
                    return node.text;
                } else {
                    if (node.nodeType==1) {
                        return node.textContent;
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="book"></div>
    </body>
    </html>

    XML数据

    <?xml version="1.0" encoding="utf-8" ?>
    <bookstore>
      <book>
        <name>三生三世十里桃花</name>
        <person>杨幂</person>
        <like>yes</like>
      </book>
      <book>
        <name>楚乔传</name>
        <person>赵丽颖</person>
        <like>yes</like>
      </book>
      <book>
        <name>花千骨</name>
        <person>赵丽颖</person>
        <like>yes</like>
      </book>
    </bookstore>

    运行结果:

  • 相关阅读:
    ES6学习--函数剩余参数 (rest参数)
    ES6学习 --函数参数默认值与解构赋值默认值
    ES6学习--Array.from()方法
    02ython基础知识(一)
    01 Python初探
    c#利用IronPython调用python的过程种种问题
    Android 对话框(Dialogs)
    不可不知的安卓屏幕知识
    C#中的Split用法以及详解
    关于XML文档操作类
  • 原文地址:https://www.cnblogs.com/xiaonangua/p/7070537.html
Copyright © 2011-2022 走看看