jQuery可以像处理HTML的DOM那样处理xml,xml节点的存取就更简单一些。
这里需要三个文件。
第二,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 |