2.XML之编程解析示例笔记

全栈工程师修炼指南

发布于 2020-10-23 16:22:55

8000

发布于 2020-10-23 16:22:55

文章被收录于专栏：全栈工程师修炼之路全栈工程师修炼之路

[TOC]

0x00 JavaScript

描述:在采用JavaScript解析XML时候常常采用AJAX 技术与 XML 的融合,即XML解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

XMLHttpRequest 对象用于在后台与服务器交换数据

//创建 XMLHttpRequest 对象的语法：
xmlhttp=new XMLHttpRequest();

//旧版本的Internet Explorer（IE5和IE6）中使用 ActiveX 对象：
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")

// JS Ajax的对象申请 
XHR = window.XMLHttpRequest ? new XMLHttpRequest():new activexObjext("Microsoft.XMLHTTP");

(1) 解析XML文档

//基础示例:
XHR = "";
XHR = window.XMLHttpRequest ? new XMLHttpRequest():new activexObjext("Microsoft.XMLHTTP");
XHR.open("GET","http://127.0.0.1/XML-study/css.xml",false);
XHR.send();
ResultXml=XHR.responseXML;  //返回一个对象一个
document.write(ResultXml.getElementsByTagName("to")[0].childNodes[0].nodeValue); // Love

请注意，即使 XML 文件只包含一个 <to>元素，您仍然必须指定数组索引[0]。这是因为 getElementsByTagName() 方法返回一个数组。

(2)解析 XML 字符串

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script>
txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

if (window.DOMParser){
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(txt,"text/xml");
    alert(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
}else{
     // Internet Explorer
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.loadXML(txt);
}

//这种方式值得学习
document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

(3) HTML 页面显示 XML 数据

实例1:我们打开一个 XML 文件（“index.xml”），然后遍历每个 person元素，并显示HTML 表格中的name元素和age元素和addr元素的值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        XHR = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
        XHR.open("GET","index.xml",false);
        XHR.send();
        rs = XHR.responseXML;

        document.write("<p style='font-weight:blod'>个人信息</p><table border='1'>");
        var person = rs.getElementsByTagName("person");
        for(var i = 0; i < person.length; i++){
            document.write("<tr>");
                for(var x = 1; x < 7 ; x+=2){
                    document.write("<td>");
                    document.write(person[i].childNodes[x].firstChild.nodeValue);
                    document.write("</td>");
                }
            document.write("</tr>");
        }
    </script>
</body>
</html>

index.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <person>
        <name>张伟</name>
        <age>12</age>
        <addr>重庆市渝北区光电园轻轨站</addr>
    </person>
    <person>
        <name>李伟</name>
        <age>28</age>
        <addr>重庆市南岸区</addr>
    </person>
    <person>
        <name>黄淑华</name>
        <age>52</age>
        <addr>重庆市九龙坡区</addr>
    </person>
</root>

WeiyiGeek.

实例2: 从第一个 CD 元素中获取 XML 数据，然后在 id=”showCD” 的 HTML 元素中显示数据。 displayCD() 函数在页面加载时调用,添加导航（功能），需要创建 next() 和 previous() 两个函数：

<!DOCTYPE html>
<html>
<head>
<script>
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
    artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
    title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
    txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
    document.getElementById("showCD").innerHTML=txt;  //值得学习
}

//值得学习
function next(){
if (i<x.length-1){
  i++;
  displayCD();
  }
}
function previous(){
if (i>0){
  i--;
  displayCD();
  }
}
</script>
<body onload="displayCD()">
<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />

WeiyiGeek.

实例3:展示如何在用户点击某个 CD 项目时显示专辑信息：

<script>
XHR = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("CD");

function displayCDInfo(i)
{
    artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
    title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
    country=(x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue);
    company=(x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue);
    price=(x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue);
    txt="Artist: "+artist+"<br>Title: "+title+"<br>Year: "+year+"<br>Country: "+country+"<br>Company: "+company+"<br>Price: "+price  ;
    document.getElementById("showCD").innerHTML=txt;
}
</script>

<div id='showCD'>Click on a CD to display album information.</div><br>
<script>
document.write("<table border='1'>");
for (var i=0;i<x.length;i++)
  { 
  //这里值得学习
  document.write("<tr onclick='displayCDInfo(" + i + ")'>");
  document.write("<td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

WeiyiGeek.

(4) 实际利用案例 XML文件格式：

<?xml version="1.0" encoding="utf-8" ?>
<SecurityGateway>
  <!-- IPRuleSet -->
  <IPRuleSet Name="Server-SAT" Comments="服务器映射">
    <IPPolicy Name="sat-8888" SourceInterface="any" DestinationInterface="any" SourceNetwork="all-nets" DestinationNetwork="183.2.5.19" Service="port8888" DestAddressTranslation="SAT" DestAddressAction="SingleIP" DestNewIP="1.184.10.24" />
   </IPRuleSet>
</SecurityGateway>

HTML展示以及JS解析处理页面:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>映射地址列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <style>
.table { 
    margin-left: auto; 
    margin-right: auto;
    border: 1px solid black; 
    line-height: 1.25;
    width: 100%;
    text-align: center; 
    border-spacing: 0px 1px; 
    border-collapse: collapse;
   
}

.table th { 
    border: 1px solid black;
    line-height: 1;
    padding: 7px;
    background-color: #dddddd;
    text-align:center;
}

.table td { 
    border: 1px solid black; 
    padding: 5px;
    text-align:left;
}
    
</style>

</head>
<body>
<p align="center">
    内网地址映射列表
    <hr>
    红色代表：映射被禁用
    <hr>
</p>
 <div id="result"></div>   
    <script>
        var result = "<table border='1' class='table'> <th>名称</th><th>源接口</th><th>目标接口</th><th>外网地址</th><th>映射端口</th><th>内网地址</th><th>内网端口</th><th>映射是否启用</th><th>映射信息</th>";
        XHR = "";
            XHR = window.XMLHttpRequest ? new XMLHttpRequest() : new activexObjext("Microsoft.XMLHTTP");
            XHR.open("GET", "http://127.0.0.1/demo1.xml", false);
            XHR.send();
        ResultXml = XHR.responseXML;  //返回一个xml文档对象

        var childObj = ResultXml.getElementsByTagName("IPRuleSet")[0];
        //获取xml子节点个数（IP映射次数）
        var childLength = childObj.childNodes.length;
        for (let num = 1; num < childLength; num+=2) {
          var childObjArr = childObj.childNodes[num];
          //或者子节点属性个数
          var attrlength = childObjArr.attributes.length;

            // 判断映射是否启用
            if(childObjArr.attributes[attrlength-1].nodeValue == 1){
                result += "<tr bgcolor='#c90000' style='color:white'>";
            }else{
                result += "<tr>";
            }

            for (let index = 0; index < attrlength; index++) {
                var childAttrVa = childObjArr.attributes[index].nodeValue;
                if(index == 6 || index == 7 || index == 3  || childAttrVa == "SinglePort" || childAttrVa == "SingleIP"){
                    continue;
                }
                result += "<td>"+ childAttrVa + "</td>";
            }
                result += "</tr>";
        }
        result += "</table>"
        var res = document.getElementById("result").innerHTML = result;
    </script>
</body>
</html>