使用 jQuery 在浏览器中处理 XML(3)_H5之家 - 中国HTML5教程资源分享第一站

<?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en" xml:base="http://www.example.org"> <id></id> <title>My Simple Feed</title> <updated>2005-07-15T12:00:00Z</updated> <link href="/blog" /> <link href="/myfeed" /> <author><name>Uche Ogbuji</name></author> <entry> <id></id> <title>A simple blog entry</title> <link href="/blog/2005/07/1" /> <updated>2005-07-14T12:00:00Z</updated> <summary>This is a simple blog entry</summary> </entry> <entry> <id></id> <title /> <link href="/blog/2005/07/2" /> <updated>2005-07-15T12:00:00Z</updated> <summary>This is simple blog entry without a title</summary> </entry> </feed>

是 home.js，包含了加载到工作台上的动态应用程序代码。

清单 8. （home.js）主页 Web 提要显示的应用程序代码

/* home.js */ var ATOM_NS = 'http://www.w3.org/2005/Atom'; function xml_ready(result){ var xml = result.responseXML; //Make sure the target area for inserting data is clear $("#update-target").empty(); $(xml).find('*').ns_filter(ATOM_NS, 'entry').each(function(){ var title_elem = $(this).find('*').ns_filter(ATOM_NS, 'title').clone(); var link_text = $(this).find('[rel="alternate"]') .ns_filter(ATOM_NS, 'link') .attr('href'); var summary_elem = $(this).find('*').ns_filter(ATOM_NS, 'summary').clone(); //Deal with the case of a missing title if (!title_elem.text()){ title_elem = '[No title]'; } //Deal with the case where is omitted if (!link_text){ link_text = $(this).find('*') .ns_filter(ATOM_NS, 'link') .not('[rel]') .attr('href'); } //Update the target area with the entry information $('<p></p>') .append( $('<a href="' + link_text + '"></a>') .append(title_elem) ) .append(' - ') .append(summary_elem.clone()) .fadeIn('slow') //bonus animation .appendTo('#update-target'); }); //close each( }

同样，我对该文件进行了注释，但是有几点值得特别强调。Atom 有许多可以接受的元素变体，其中多数是可选的。这就意味着您必须对异常情况进行处理。我举两个常见的异常情况：在一个必须的链接上的可选 rel="alternate"；标题是可选的这一事实。正如您所看到的，jQuery 提供了处理这些情况的巨大灵活性，因此您甚至应该能够处理这种不规则的 XML 格式。在某些情况下，我直接从 XML 将结构复制到主文档（托管 HTML）。这需要非常小心，并且您会发现我使用了 clone() 方法，以确保我没有将某个文档的节点嫁接到另一个文档，否则 DOM 异常 WRONG_DOCUMENT_ERR 将会发出一个错误。另外，我使用了 jQuery 方法 fadeIn，以便添加的内容会慢慢从视线中消失。是 home.html 的浏览器显示。

图 2. 动态添加 Web 提要内容的主页

Caesar 的主页（文本来自清单 6 ），带有动态添加的 Web 提要内容

结束语

jQuery 是所有处理 Web 浏览器问题的技巧和权宜之计的集合，我在本文中介绍的 XML 工作台是面向那些需要处理 XML 的开发人员的可重用工具的第一步。您已经了解到，最大的问题之一就是名称空间处理问题。一旦您越过这个障碍，jQuery 就会给您提供恰当处理用 XML 表达的多种不规则文档的工具。您将会发现处理 Web 提要的技术已经准备好在浏览器中应用于许多其他 XML 格式。

如果您发现 jQuery 和随之产生的权宜之计不合适，那么您还可以更加直接地使用 JavaScript 库进行 XML 处理，例如 Sarissa；这个库值得撰写一篇文章来介绍，但是它没有被广泛使用，也不像 jQuery 那样易于部署。

下载

描述名字大小

本文的代码清单code.zip6KB

参考资料学习

使用 jQuery，第 1 部分：将桌面应用程序引入浏览器（Michael Abernethy，developerWorks，2008 年 9 月）：阅读核心函数、选择和结果，然后开始使用您的 jQuery。在使用 jQuery 简化 Ajax 开发（Jesse Skinner，developerWorks，2007 年 4 月）中，了解 Ajax 和 DOM 脚本编写可以多简单。

：检查一个可选的类型选择器名称空间组件，它支持名称空间前缀声明和新的名称空间分隔符 —— 竖线符号。

jQuery bug #155, "Get Namespaced Elements in XML Documents"：了解关于 XML 名称空间的问题，但是这些问题似乎没有引起足够重视。

在 Uche Ogbuji 为 developerWorks 撰写的以下文章中关注面向 XML 开发人员的 Mozilla Firefox：

developerWorks 播客：收听针对软件开发人员的有趣访谈和讨论。

获得产品和技术讨论

XML 专区讨论论坛：参与几个与 XML 有关的讨论之一。

developerWorks blogs：阅读这些博客并加入讨论。

条评论

developerWorks: 登录

标有星（*）号的字段是必填字段。