jQuery可以像处理HTML的DOM那样处理xml，xml节点的存取就更简单一些。
这里需要三个文件。
第一，html文件，其中定义的显示数据的模板
第二，xml文件。数据本身。
第三，javascript文件。其中定义如何解释xml并将其添加到html文件之中。
有关注释附加在各文件相关行附近。
html文件
<html>
<head>
<style type="text/css"> <!--css的定义-->
body {font_family:Arial, helvetica, sans_serif; font_size:12pt; background_color:white;}
table, td, th { border: thin #2b2b2b solid; border-collapse:collapse; padding:4px; background_color:white; color:black;}
</style>
</head>
<body>
<table class="tbl">
<tbody>
<tr id="xml_header">
<th>Entry</th> <th>Service</th> <th>Action</th>
</tr>
<tr id="xml_data"><!--XML数据的模板行-->
<td>#Entry#</td> <td>#Service#</td> <td>#Action#</td>
</tr>
</tbody>
</table>
<!--需要参照jquery的函数库。也可以下载到自己的服务器或PC上使用-->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="info.js"></script>
</body>
</html>
xml文件：data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<config> <!--在config和rules之间有许多数据，这里简化-->
<devices>
<entry>
<vsys>
<entry>
<rulebase>
<security>
<rules>
<entry name="GlobalProtect">
<action>allow</action>
<service>
<member>service-https</member>
<member>TCP_80</member>
</service>
</entry>
<entry name="ping_deny">
<action>allow</action>
<service>
<member>DNS</member>
<member>service-https</member>
<member>TCP_80</member>
</service>
</entry>
<entry name="ping">
<action>deny</action>
<service>
<member>any</member>
</service>
</entry>
</rules>
</security>
</rulebase>
</entry>
</vsys>
</entry>
</devices>
</config>
javascript文件：info.js
// -------------------------------------------------
// Initialization
// -------------------------------------------------
var xml_header, xml_data;
$(function(){
//从HTML文件中读取表头和表行的html文本
xml_header = $("#xml_header").html();
xml_data = $("#xml_data").html();
//初始化表格
$("table.tbl tbody").html("");
//加载自定义函数
xmlLoad();
});
// -------------------------------------------------
// XML loading
// -------------------------------------------------
function xmlLoad(){
$.ajax({
url:'data.xml',
type:'get',
dataType:'xml',
timeout:1000,
success:parse_xml
});
}
// -------------------------------------------------
// 为处理XML做准备
// -------------------------------------------------
function parse_xml(xml,status){
if(status!='success')return;
// 添加表头
$('<tr>'+xml_header+'</tr>').appendTo('table.tbl tbody');
$(xml).find('rules').find('entry').each(disp);
}
// -------------------------------------------------
// 重写HTML
// -------------------------------------------------
function disp(){
//取得entry的属性name
var $entry = $(this).attr('name');
//取得action的单一值
var $action = $(this).find('action').text();
//取得service的多个值，然后更换换行符（\n）为html的<br>
var $service = $(this).find('service').text().split('\n').join('<br />');
//根据HTML文件按中的模板行
//【<td>#Entry#</td> <td>#Service#</td> <td>#Action#</td>】重写表行
var html_data = xml_data.replace('#Entry#',$entry).replace('#Service#',$service).replace('#Action#',$action);
$('<tr>'+html_data+'</tr>').appendTo('table.tbl tbody');
}
验证结果
| Entry | Service | Action |
| GlobalProtect | service-https
TCP_80 |
allow |
| ping_deny | DNS
service-https TCP_80 |
allow |
| ping | any | deny |
文件在当地PC上，Firefox/Safari 可以正确处理显示该html文件。
如果将以上三个文件上传到web服务器，IE/Chrome/Firefox/Safari都可正确处理显示该html文件。
时间： 2024-10-29 19:11:32