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

您需要 script 元素来自动加载 jQuery、工作台 JavaScript 以及您的应用程序特定脚本。您还需要一个 link 元素来确定 target_XML 使用的 XML 文件。如果您需要使用多个 XML 文件，扩展工作台设置非常容易。（workbench.js）是工作台脚本。

清单 2（workbench.js）. jQuery XML 工作台 JavaScript

/* workbench.js */ // The jQuery hook invoked once the DOM is fully ready $(document).ready(function(){ // Get the target XML file contents (Ajax call) var fileurl = $("link[rel='target_XML']").attr('href'); $.ajax({ url: fileurl, type: "GET", dataType: "xml", complete: xml_ready, error: error_func }); }); // Callback for when the Ajax call results in an error function error_func(result) { alert(result.responseText); } // ns_filter, a jQuery extension for XML namespace queries. (function($) { $.fn.ns_filter = function(namespaceURI, localName) { return $(this).filter(function() { var domnode = $(this)[0]; return (domnode.namespaceURI == namespaceURI && domnode.localName == localName); }); }; })(jQuery);

已经对工作台代码做了很好的注释，但这里还有一些需要注意的地方。名称空间过滤器是清单中最后一个函数。第一个函数是在主页 DOM 完全准备好之后调用一般的 jQuery hook。它为目标 XML 检索 URL，并调用 Ajax 来加载文件。注意，dataType: "xml" 命令 Ajax 机制来分析 XML 响应文件。如果出现错误，它将调用 error_func 回调函数，否则它将调用 xml_ready 回调函数，这是用户为实现应用程序行为而提供的。该回调函数使用了结果架构，您可以用responseXML 属性从中取回 XML 。（quotes.js）是这种情况下的应用程序代码。

清单 3. （quotes.js）动态引用查看器的应用程序代码

/* quotes.js */ function xml_ready(result){ var xml = result.responseXML; //Make sure the target area for inserting data is clear $("#update-target ol").empty(); $(xml).find('*').ns_filter('http://example.com', 'q').each(function(){ var quote_text = $(this).text() $('<li></li>') .html(quote_text) .appendTo('#update-target ol'); }); //close each( }

（quotes1.xml）是带有引用清单的 XML 文件。

清单 4. （quotes1.xml）带有引用清单的 XML 文件

<?xml version="1.0" encoding="utf-8"?> <x:quotes xmlns:x='http://example.com'> <x:q>Words have meaning and names have power</x:q> <x:q>Sticks and stones will break my bones, but names will never hurt me.</x:q> <x:q>The beginning of wisdom is to call things by their right names.</x:q> <x:q>Better to see the face than to hear the name. </x:q> </x:quotes>

请注意，我使用了 x 前缀，这意味着，理论上我可以尝试上文提到过的基于前缀的黑客方法。但是，如果我这样做，它将会被破坏，如果我用（quotes2.xml）中的 quotes 文件代替，它是与完全相当的名称空间，以及相同的 Canonical XML（参见）。

清单 5. （quotes2.xml）与清单 4 相当的 XML 文件，带有引用清单

<?xml version="1.0" encoding="utf-8"?> <quotes xmlns='http://example.com'> <q>Words have meaning and names have power</q> <q>Sticks and stones will break my bones, but names will never hurt me.</q> <q>The beginning of wisdom is to call things by their right names.</q> <q>Better to see the face than to hear the name. </q> </quotes>

如果您替代中的 quotes2.xml，您将发现它还起作用，这是一个针对名称空间的重要测试。是 quotes.html 的浏览器显示。

图 1. 使用 jQuery XML 工作台展示的引用

使用 jQuery XML 工作台展示的引用（来自清单 5）

Atom XML 的动态显示

一旦您开始在 jQuery 中进行 XML 处理，您就能够处理更多有用的 XML 格式，包括 Web 提要格式，例如 RSS 和 Atom。在此部分我将使用 jQuery XML 工作台来显示来自一个 Web 页面上 Atom 提要的最新条目。是 HTML 页面。

清单 6. （home.html）托管动态 XML 的 Web 页面

<html> <head> <title>jQuery XML workbench</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="workbench.js"></script> <script type="text/javascript" src="home.js"></script>  <link href="atom1.xml" type="application/xml" /> </head> <body> <h1>Caesar's home page</h1> <p>GALLIA est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. </p> <p>Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. </p> <p>Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt. Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p> <h2>My <a href="feed.xml">Web feed</a></h2> <div></div> </body> </html>

（atom1.xml）是引用的 Atom 文件。

清单 7. （atom1.xml）Atom 文件示例