小毛驴（xml）试乘记（三）：jQuery方法

来源：互联网发布：专业视频制作软件编辑：程序博客网时间：2024/04/30 16:53

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');}

验证结果

EntryServiceActionGlobalProtectservice-https
TCP_80allowping_denyDNS
service-https
TCP_80allowpinganydeny

文件在当地PC上，Firefox/Safari 可以正确处理显示该html文件。

如果将以上三个文件上传到web服务器，IE/Chrome/Firefox/Safari都可正确处理显示该html文件。

0 0