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

浏览数：43 / 时间：2015年06月09日

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

验证结果