在jQuery中处理XML数据的大致方法

这篇文章主要介绍了在jQuery中处理XML数据的大致方法,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下

XML 全称为 可扩展标记语言，其文件结构与 HTML 类似，但是区别也很明显，HTML 只能使用已经定义的标签，如 title, body, span 等，标签种类是有限的，但是 XML 除了可以使用 HTML 的所有标签，还可以自己随意定制标签，如 person, name, sex, age 等，而且 XML 中的标签属性名称，也可以随意定制。另外二者用途方面也有明显区别，HTML 主要用来展示数据，XML 则侧重于数据的存储和传输。例如下面这个简单的 XML 文档用以存储员工信息：

1. <员工> 
2. <姓名>麻花疼</姓名> 
3. <性别>男</性别> 
4. <年龄>40</年龄> 
5. <职位>疼逊CEO</职位> 
6. </员工> 

下面本文简单介绍如何使用 jQuery 载入一个 XML 文件并从中获取自己想要的数据。

准备 XML 文档及测试数据

假设我们现在要构建一个包含人员信息的 XML 文档，该 XML 文档要能反映其姓名、所在公司、公司简介、公司产品简介几个信息，那么我们可以把 XML 设计成如下样式：

1. <?xml version="1.0" encoding="utf-8" ?> 
2. <Persons> 
3. <Person FullName="Bill Gates"> 
4. <Corporation>Microsoft</Corporation> 
5. <Description>The largest software company</Description> 
6. <Products>Windows series OS, SQL Server Database, XBox 360...</Products> 
7. </Person> 
8.  
9. <Person FullName="Jobs"> 
10. <Corporation>Apple</Corporation> 
11. <Description>The famous software company</Description> 
12. <Products>Macintosh, iPhone, iPod, iPad...</Products> 
13. </Person> 
14.  
15. <Person FullName="Larry Page"> 
16. <Corporation>Google</Corporation> 
17. <Description>the largest search engine</Description> 
18. <Products>Google search, Google Adsense, Gmail...</Products> 
19. </Person> 
20. </Persons> 

简单分析一下这个 XML 文件，其中第一行 是声明此文档为 XML 文档，且文本编码为 utf-8。第二行及最后一行 Persons 为文档的根元素，然后每个 Person 元素即表示每个人，姓名存储在 Person 元素的 FullName 属性中，Corporation 元素用来存储所在公司名称，Description 元素用来存储公司简介，Products 元素用来存储公司产品简介。至此，该文档里面包含了比尔·盖茨、乔布斯、拉里·佩奇三位 IT 界大佬的信息。

用 jQuery 解析此 XML 文档

首先要用$.get()方法载入 XML 文件，然后用find()方法找到所有 Person 元素，再用 each() 方法进行遍历，代码如下：

1. <script type="text/javascript"> 
2. jQuery(document).ready(function() { 
3. /* 先用 $.get 方法载入 XML 文件 */ 
4. $.get("EmployeesInformation.xml", function(xmlData) { 
5. /* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */ 
6. var htmlData = "<table border='1'>"; 
7.  
8. /* 找到 Person 元素，然后用 each 方法进行遍历 */ 
9. $(xmlData).find("Person").each(function() { 
10. var Person = $(this); /* 将当前元素复制给 Person */ 
11. var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */ 
12. var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */ 
13. var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */ 
14. var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */ 
15.  
16. /* 将得到的数据，放到表格的一行中 */ 
17. htmlData += "<tr>"; 
18. htmlData += " <td>" + FullName + "</td>"; 
19. htmlData += " <td>" + Corporation + "</td>"; 
20. htmlData += " <td>" + Description + "</td>"; 
21. htmlData += " <td>" + Products + "</td>"; 
22. htmlData += "</tr>"; 
23. }); 
24.  
25. //完成表格字符窜 
26. htmlData += "</table>"; 
27. //将表格放到 body 中 
28. $("body").append(htmlData); 
29. }); 
30. }); 
31. </script> 

简单解释一下这段代码，由于此 XML 文档相对简单，所以这段代码也比较简短，代码中$.get()方法的第一个参数为 XML 文件地址，第二个参数是一个回调函数，回调函数中参数 xmlData 即为 XML 文件中的数据。在此示例中，我们打算 XML 中的数据以表格的形式显示在 HTML 中，所以先构建一个表格字符串 htmlData 先。

紧接着，用find()方法，找到所有名为 Person 的元素，因为每个 Person 元素即表示一个人，然后再用 each() 方法进行遍历，把遍历到的元素赋个一个变量 Person。用Person.attr()方法去除元素的 FullName 属性，也就是人员的姓名，再用find()方法找到其子元素 Corporation，Description 和 Products 并返回它们的文本内容，并用 tr 和 td 标签将它们包装在表格的一个行里面。最后完成表格字符串，并将表格添加到 body 标签中。