使用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 例子

　　　　

　　　　　　　　
　　　　　　　　<script></script>
　　　　　　　　<script></script>
　　　　　　　　<script></script>
　　　　　　　　
　　　　
　　　　
　　　　
　　　　

A　few　quotations　for　your　enjoyment

　　　　

　　　　

您需要 script 元素來自動載入 jQuery、工作台 JavaScript 以及您的應用程式特定腳本。您還需要一個 link 元素來決定 target_XML 使用的 XML 檔案。如果您需要使用多個 XML 文件，擴展工作台設定非常容易。清單 2（workbench.js）是工作台腳本。

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

/*　
workbench.js
*/
//　The　jQuery　公〜. ready(function() {
　　　　//　Get　the　target　XML　file　contents　(Ajax　call)
　　　　var　〵　　腳　＋.=$cons.　　$.ajax({
　　　　url:　fileurl,
　　　　type:　"GET",
　　　　dataType:　"xml",
　　　　] ;
});

//　Callback　for　when　the　Ajax　call　results　in　an　error
function　error_func(result )　{
　　alert(result.responseText);

}　

//　ns_filter,　a　jQuery　extension　for　bML.　=　function(namespaceURI,　localName)　{
　　return　$ (this).filter(function()　{
　　　　var　domnode　=　$(this)[0];

　　　　return　　noNamespacespaceURI　　　　return　　noNamespaceURI　no);

　　});
　};

} )(jQuery);

已經對工作台程式碼做了很好的註釋，但這裡還有一些需要注意的地方。名稱空間過濾器是清單中最後一個函數。第一個函數是在主頁 DOM 完全準備好之後呼叫一般的 jQuery hook。它為目標 XML 檢索 URL，並呼叫 Ajax 來載入檔案。注意，dataType: "xml" 指令 Ajax 機制來分析 XML 回應檔。如果出現錯誤，它將呼叫 error_func 回調函數，否則它將呼叫 xml_ready 回調函數，這是使用者為實作應用程式行為而提供的。這個回呼函數使用了結果架構，您可以用responseXML 屬性從中取回 XML 。清單 3（quotes.js）是這種情況下的應用程式程式碼。

清單3. ake　sure　the target　area　for　inserting　data　is　clear

　　　　$("#update-target　ol").empty();

　　$(xml).findqter'). ').each(function(){
　　　　var　quote_text　=　$(this).text()

　　　　$('

')

　　　　甀　甀瀀瀁.　　　　.appendTo('#update-target ol');

　　});　//close　each(

}

清單4 （quotes1.xml）是帶有引用清單的XML 檔案。

清單4.（quotes1.xml）帶有引用清單的XML 檔案。

清單4.（quotes1.xml）帶有引用清單的XML 檔案I power
　Sticks　and　stones　will　break　my　bones,　but　names　will　never　hurt　me　x:0>🀬> call　things　by　their right　names.
　Better　to　see　the　face　than　to　hear　the　name.　

？這意味著，理論上我可以嘗試上文提到的基於前綴的駭客方法。它是與清單4 完全相當的名稱空間，以及相同的Canonical XML。 ="utf-8"?>

　Words　have　meaning　and　names　have　powerſ,a　　　　　瀦　石　石　瀦　瀋石　瀦　腳　腳　瀦〵　腳　其他　腳　腳　腳　其他　腳　腳　腳　腳　其他　腳　腳　腳　其他　腳　腳　其他　腳　腳　其他　其他　皮but　names　will　never　hurt　me.
　The　beginning　of　wisdom　is　to　call　things　y]　face　than　to　hear　the　name.　

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

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

Atom XML 的动态显示

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

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

　　　　

　　　　　　　　
　　　　　　　　<script></script>
　　　　　　　　<script></script>
　　　　　　　　<script></script>
　　　　　　　　
　　　　
　　　　
　　　　
　　　　

Caesar's　home　page

　　　　

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.
　　

　　

Gallos　ab　Aquitanis　Garumna　flumen,　a　Belgis　Matrona　et　Sequana　dividit.
　　

　　

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.

　　　　

My　Web　feed

　　　　

　　

清單 7（atom1.xml）是引用的 Atom 檔。

清單 7.（atom1.xml）Atom 檔案範例

　　xml:lang=“en”
　　xml:base=“http://www.w3.org/2005/Atom” / www.example.org">
http://www.example.org/myfeed

2005-07- 15T12:00 :00Z更新>


Uche奧格布吉

http://www.example.org/entries/1

　
2005-07-14T12:00:00Z更新>
這是一個簡單的部落格文章摘要>


http://www.example.org/entries/2


2005-07-15T12:00:00Z更新>
這是一個簡單的部落格條目，沒有標題摘要>
Entry>

清單8 是home.js，包含了載入到工作台上的動態應用程式程式碼。

清單8.（home.js）主頁Web 提要顯示的應用程式程式碼

/ *
homehome .js
*/
varATOM_NS='http://www.w3.org/2005/Atom';

functionxml_ready(result){
varXMLML; //確保插入資料的目標區域已清除
：$("#update-target").empty();
：$(xml).find('*').ns_filter(ATOM_NS, ''entry').each(function(){
vartitle_elem=$(this).find('*').ns_filter(ATOM_NS,'title').clone();
varlink_text=$(this).find('[rel="alternate"]') .ns_filter(ATOM_NS,'link')
'href');
'summary_elem=
//處理標題缺失的情況

if(!title_elem.text()){?? if（！ link_text）{
link_text=$（this）.find（'*'）
​​link_text.ns_filter（ATOM_NS，'link'） .not（'[rel]'）
//用條目資訊更新目標區域

$('

')

.append(
$(' ; ')
.append(title_elem)
.append('-')
.append(summary_elem. 'slow')//獎勵動畫
。

同樣，我對該文件進行了註釋，但是有幾點值得特別強調。 Atom 有許多可以接受的元素變體，其中多數是可選的。這就意味著您必須對異常情況進行處理。我舉兩個常見的異常情況：在一個必須的連結上的可選 rel="alternate"；標題是可選的這一事實。正如您所看到的，jQuery 提供了處理這些情況的巨大靈活性，因此您甚至應該能夠處理這種不規則的 XML 格式。在某些情況下，我會直接從 XML 將結構複製到主文件（託管 HTML）。這需要非常小心，並且您會發現我使用了 clone() 方法，以確保我沒有將某個文檔的節點嫁接到另一個文檔，否則 DOM 異常 WRONG_DOCUMENT_ERR 將會發出錯誤。另外，我使用了 jQuery 方法 fadeIn，以便添加的內容會慢慢從視線中消失。圖 2 是 home.html 的瀏覽器顯示。

 以上就是使用jQuery在瀏覽器中處理XML，更多相關文章請關注PHP中文網（www.php.cn）！