使用jQuery在瀏覽器中處理XML

XML 是 Web 的 SGML，但它還沒有像 XML 社群那樣在 Web 上引人注目。 XML 在 Web 上最突出的成就 —— XHTML —— 已經被政治和委員會設計所糾纏，並且其他雄心壯志、技術良好的規範 —— 例如 XForms 和 SVG —— 一直受到低使用率的困擾。有時 XML 會在意想不到的方面在 Web 上獲得成功，包括 XML 格式的 Web 提要（例如 RSS 類型和 Atom）的流行。

常用縮寫

Ajax：非同步JavaScript + XML

API：應用程式介面

CSS：層疊樣式表

DOM：文件物件模型

HTML：超文本標記聚合

SGML：標準通用標記語言

SVG：可縮放向量圖

URI：統一資源標識符

URL：統一資源定位符

W3C：萬維網聯盟

URL：統一資源定位符

W3C：萬維網聯盟

URL：統一資源定位符

W3C：萬維網聯盟

點

XML：可擴展標記語言

和其他Web 上的技術一樣，Web 上的XML 以瀏覽器為中心，但是大部分關於在Web 上處理XML 的討論都集中在伺服器端。在 developerWorks 的 Firefox and XML 系列中，我介紹了幾種在 Firefox 瀏覽器中使用 XML 的方法。遺憾的是，跨瀏覽器處理 XML 甚至比跨瀏覽器處理 HTML 更奇怪，這就是為什麼這麼多 Web 上的 XML 處理堅持相對安全的伺服器端領域的部分原因。

許多動態 HTML 開發人員厭煩了跨瀏覽器的痛苦和瀏覽器之間腳本編寫的怪癖。幾種出色的 JavaScript 程式庫的出現使開發人員的工作更加輕鬆。這些函式庫中最受歡迎一種就是 jQuery，developerWorks 上有幾篇文章已經對它進行了介紹。如果您知道如何繞過這些巨大的陷阱，您也可以使用 jQuery 來處理 XML。在本文中，我將展示如何在實際場景中聯合使用 jQuery 和 XML，如何使用 Atom Web 提要，介紹一種在 jQuery 中處理 XML 的實用模式，並解決不幸遇到的實際問題。您需要對 XML、XML 名稱空間、HTML、JavaScript 和 jQuery 函式庫有基本的了解。

XML 名稱空間的問題

我將首先介紹最嚴重的問題。 jQuery 並不能完全解決 XML 名稱空間問題。這個眾所周知的問題由來已久，人們嘗試了各種解決方案，但結果都不太令人滿意。理想的解決方案可能是利用jQuery 支援CSS Level 3 名稱空間選擇器，它將新增一個新的選擇器，如下所示：

@namespace　ex　url(http://example.com);

ex|quote {　font-weight:　bold　}

第一行是 http://example.com 名稱空間的前綴聲明，第二行是一種使用新的名稱空間組件的類型選擇器，其中用垂直線符號分隔已聲明的前綴和本地名稱。不幸的是，jQuery 並不支援這種方法，因此人們採取了各種方法來處理名稱空間問題。

偽裝前綴的重要性

一種最常見的駭客方法是在 jQuery 中處理 XML 和名稱空間時忽略名稱空間，並選擇完整的 qname（前綴和本地部分）。

$(xml).find("x\:quote").each(function()　{

　　　//process　each　node
　　});

🎝node

　　});n OMSjam

，此程式碼透過 jQuery 的節點名稱。它包含一個冒號，是 jQuery 選擇器保留的符號，並且必須使用反斜線進行轉義。反斜杠是 JavaScript 腳本保留的符號且必須是一對。這種駭客方法在使用不同前綴的名稱空間等效文件中無法使用。
使用屬性過濾器

據說有人成功地使用過以下方法的變體，即在偽屬性nodeName 上使用jQuery 屬性過濾器：

$(xml).find("[nodeName=x:quote]") .each(function()　{

　　　//process　each　node
　　});

使用jQuery 1.3.x 之前的版本，您需要在nodeName 前面加上@。但是，這樣做與上一節 偽裝前綴的重要性 中提到的方法有著相同的基本問題。它將破壞許多真實的名稱空間場景。我嘗試了以下變體，這種方法更合理：

$(xml).find("[namespaceURI='http://example.com'][localName='quote']")

　　.each(function ()　{

　　　//process　each　node

　　});🎜🎜可惜這樣不起作用。 🎜🎜尋找一個好的插件🎜

这种混乱不完全是 jQuery 的错。DOM 为寻找节点提供了有效的方法：getElementsByTagName 和 getElementsByTagNameNS。后者旨在感知名称空间，接受名称空间的 URI 并忽略前缀，但遗憾的是，尽管其他浏览器都支持它，但 Microsoft® Internet Explorer® 除外。然而，jQuery 的目的是处理此类浏览器问题，以便消除人们的此类烦恼。一种可能的、牵强的理由是，jQuery 很大程度上以 CSS 作为其选择器的基础，并且即使是 W3C CSS Level 3 名称空间选择器也无法使它通过工作草案阶段。jQuery bug #155，“Get Namespaced Elements in XML Documents”，涵盖了这些问题，但是问题在 3 年之内没有得到解决。

Ryan Kelly 遇到此问题并做了一次大胆的尝试，为 XML Namespace Selector 创建了一个 jQuery 插件 jquery.xmlns.js。它试图支持以下代码。

$.xmlns["ex"]　=　"http://example.com";
$(doc).find("ex|quote").each(...);

第一行是对该插件的全局名称空间声明 — 由于底层 jQuery 机制的局限性。它的确用典型的 jQuery 用语为名称空间范围提供一个非全局块。 遗憾的是，我在使用这种扩展时成败参半。我希望它能够改变，并最终找到合适的方法进入 jQuery 。

一个更简单的插件

我最终选择的解决方案是创建一个简单插件，它不使用 jQuery 选择器做任何特殊工作，而是添加一个新的过滤器。您可以直接传递一个名称空间和本地名称到该过滤器，从而使结果集与节点匹配。请您按以下方法使用它：

$(xml).find('*').ns_filter('http://example.com',　'quote').each(function(){
　.each(function()　{
　　//process　each　node
　});

ns_filter 是我写的特殊过滤器。执行一个单独的 find('*') 的需求看起来可能不优雅，更简单的变化可能是：

$(xml).find('quote').ns_filter('http://example.com').each(function(){
　.each(function()　{
　　//process　each　node
　});

然而，这样做并不可行，因为您不能相信 jQuery 能够以名称空间中立（即作为本地名称选择器）的方式来处理查询，例如 find('quote')。我的过滤器实现将在下一节提供，作为安装 jQuery 来处理 XML 的一般系统的一部分。我在 Mac OS X Snow Leopard 操作系统下的 Firefox 3.5.5 和 Safari 4.0.4 ，以及 Windows® XP 操作系统最新的 Internet Explore 7 和 Internet Explorer 8 浏览器中对它进行了测试。

jQuery XML 工作台

名称空间问题只是以下事实的症状：说到底，jQuery 是一个 HTML 工具。我发现，使用 jQuery 处理 XML 最实用的方式就是为 XML 文档创建一个 HTML 工作台，通过可靠地跨浏览器方法引用脚本，然后建立需要的暂时性解决方案，例如针对 XML 名称空间问题的解决方案。您可以用工作台模式准备并测试您基于浏览器的 XML 处理的模式和技术，您甚至还可以把工作台作为基于浏览器的应用程序本身的基础。

清单 1 （quotes.html）是 HTML 使用工作台的简单例子。它能够动态地从 XML 文件加载引用。

清单 1 （quotes.html）. 使用 jQuery XML 工作台的 HTML 例子

　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　
　　　　
　　　　
　　　　

A　few　quotations　for　your　enjoyment