首頁 > php教程 > PHP开发 > 主體

使用jQuery在瀏覽器中處理XML

黄舟
發布: 2016-12-15 09:38:14
原創
1309 人瀏覽過

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


    
        jQuery XML workbench
        
        
        
        
    
    
    
    

A few quotations for your enjoyment


    

        

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板