[TOC]
0x00 JavaScript
描述:在采用JavaScript解析XML时候常常采用AJAX 技术 与 XML 的融合,即XML解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。
XMLHttpRequest 对象用于在后台与服务器交换数据
2.XML之编程解析示例笔记
|[TOC]
0x00 JavaScript
描述:在采用JavaScript解析XML时候常常采用AJAX 技术 与 XML 的融合,即XML解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。
XMLHttpRequest 对象用于在后台与服务器交换数据1
2
3
4
5
6
7
8
9//创建 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文档1
2
3
4
5
6
7//基础示例:
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 字符串1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<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元素的值：
1 | <!DOCTYPE html> |
index.xml weiyigeek.top-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<?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>
实例2:
从第一个 CD 元素中获取 XML 数据，然后在 id=”showCD” 的 HTML 元素中显示数据。
displayCD() 函数在页面加载时调用,添加导航（功能），需要创建 next() 和 previous() 两个函数：
1 | <!DOCTYPE html> |
weiyigeek.top-
实例3:展示如何在用户点击某个 CD 项目时显示专辑信息： weiyigeek.top-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<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>
(4) 实际利用案例 weiyigeek.top-实用案例
XML文件格式：1
2
3
4
5
6
7<?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解析处理页面:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83<!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>
X
你好看友,欢迎关注博主微信公众号哟! ❤
这将是我持续更新文章的动力源泉，谢谢支持！(๑′ᴗ‵๑)
温馨提示: 未解锁的用户不能粘贴复制文章内容哟!
方式1.请访问本博主的B站【WeiyiGeek】首页关注UP主,
将自动随机获取解锁验证码。
Method 2.Please visit 【My Twitter】. There is an article verification code in the homepage.
方式3.扫一扫下方二维码，关注本站官方公众号
回复：验证码
将获取解锁(有效期7天)本站所有技术文章哟!
@WeiyiGeek - 为了能到远方，脚下的每一步都不能少
欢迎各位志同道合的朋友一起学习交流，如文章有误请在下方留下您宝贵的经验知识，个人邮箱地址【master#weiyigeek.top】或者个人公众号【WeiyiGeek】联系我。
更多文章来源于【WeiyiGeek Blog - 为了能到远方，脚下的每一步都不能少】, 个人首页地址( https://weiyigeek.top )
专栏书写不易，如果您觉得这个专栏还不错的，请给这篇专栏 【点个赞、投个币、收个藏、关个注、转个发、赞个助】，这将对我的肯定，我将持续整理发布更多优质原创文章！。
最后更新时间：
文章原始路径：_posts/编程世界/前端技术/Xml/2.XML之编程解析示例笔记.md
转载注明出处，原文地址：https://blog.weiyigeek.top/2020/2-14-363.html
本站文章内容遵循 知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议