[TOC]
描述:在采用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>
WeiyiGeek.实用案例