XML は Web の SGML ですが、XML コミュニティほど Web 上で目立つようにはなっていません。 Web における XML の最も著名な成果である XHTML は、政治や委員会の設計に巻き込まれており、XForms や SVG などの他の野心的で技術的に健全な仕様は、使用率の低さに悩まされています。 XML は、XML 形式の Web フィード (RSS タイプや Atom など) の人気など、予期せぬ方法で Web 上で成功することがあります。

よく使われる略語

Ajax: 非同期JavaScript + XML

API: アプリケーションプログラミングインターフェース

CSS: カスケードスタイルシート

DOM: ドキュメントオブジェクトモデル

HTML: ハイパーテキストマークアップ言語

RSS: Really Simple Agg規制

SGML: 標準汎用マークアップ言語

SVG: スケーラブルベクターグラフィックス

URI: ユニフォームリソース識別子

URL: ユニフォームリソースロケーター

W3C: World Wide Web コンソーシアム

XHTML: 拡張可能なハイパーテキストマークアップ言語

XML: 拡張可能なマークアップ言語

Web 上の他のテクノロジーと同様、Web 上の XML はブラウザー中心ですが、Web 上の XML の処理に関するほとんどの議論はサーバー側に焦点を当てています。「developerWorks Firefox と XML」シリーズでは、Firefox ブラウザーで XML を使用するいくつかの方法を説明します。残念ながら、ブラウザ間での XML の処理は、ブラウザ間での HTML の処理よりもさらに奇妙です。これが、Web 上の XML 処理の多くがサーバー側の比較的安全な領域に留まっている理由の 1 つです。

多くの動的 HTML 開発者は、ブラウザー間の苦痛や、ブラウザー間のスクリプト作成の癖にうんざりしています。いくつかの優れた JavaScript ライブラリの出現により、開発者の作業は容易になりました。これらのライブラリの中で最も人気のあるものの 1 つは jQuery で、developerWorks のいくつかの記事で取り上げられています。これらの大きな落とし穴を回避する方法を知っていれば、jQuery を使用して XML を処理することもできます。この記事では、現実世界のシナリオで jQuery と XML を一緒に使用する方法、Atom Web フィードの使用方法、jQuery で XML を処理するための実践的なパターンを紹介し、現実世界の不幸な問題を解決する方法を示します。 XML、XML 名前空間、HTML、JavaScript、および jQuery ライブラリについての基本的な理解が必要です。

XML 名前空間の問題

最初に最も深刻な問題について説明します。 jQuery は XML 名前空間の問題を完全には解決しません。このよく知られた問題は長い間存在しており、さまざまな解決策が試みられてきましたが、満足のいく結果は得られませんでした。理想的な解決策は、jQuery の CSS レベル 3 名前空間セレクターのサポートを活用することです。これにより、次のような新しいセレクターが追加されます:

@namespace ex url(http://example.com);
ex|quote {font-weight:太字}

最初の行は http://example.com 名前空間の接頭辞宣言で、2 行目は新しい名前空間コンポーネントを使用する型セレクターであり、宣言された接頭辞とローカル名で区切られています。。残念ながら、jQuery はこのアプローチをサポートしていないため、名前空間の問題に対処するためにさまざまなアプローチが取られています。

プレフィックスの重要性

最も一般的なハックの 1 つは、jQuery で XML と名前空間を処理するときに名前空間を無視し、完全な qname (プレフィックスとローカル部分) を選択することです。

$(xml).find("x\:quote").each(function() {
//process each node
});

このコードは、jQueryのノード名の概念、つまりDOMのnodeNameを通じて選択します。属性。これには、jQuery セレクターの予約記号であるコロンが含まれており、バックスラッシュでエスケープする必要があります。バックスラッシュは JavaScript スクリプトの予約記号であり、ペアで指定する必要があります。このハックは、異なる接頭辞を使用する名前空間と同等のドキュメントでは機能しません。
属性フィルターの使用

一部の人々は、次の方法のバリエーション、つまり疑似属性ノード名に対して jQuery 属性フィルターを使用して成功したと言われています:

$(xml).find("[nodeName=x] :quote]") .each(function() {
//process each node
});

1.3.xより前のバージョンのjQueryを使用する場合は、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

jQuery、ワークベンチ JavaScript、およびアプリケーション固有のスクリプトを自動的にロードするには、script 要素が必要です。 target_XML で使用される XML ファイルを識別するための link 要素も必要です。複数の XML ファイルを操作する必要がある場合は、ワークベンチのセットアップを簡単に拡張できます。リスト 2 (workbench.js) はワークベンチスクリプトです。

/*
workbench.js
*/
// DOM の準備が完了すると呼び出される jQuery フック
$(document).ready(function() {
//ターゲットのXML ファイルの内容を取得（Ajax call）
var fileurl = $("link[rel='target_XML']").attr('href');
$.ajax({
url: fileurl,
) type: "GET",
dataType: "xml",
complete: xml_ready,
error: error_func
});
});

// Ajax呼び出しでエラーが発生した場合のコールバック
function error_func(result ) {
alert(result.responseText);
}

//ns_filter、(this).filter(function() の jQuery 拡張機能。{
var domnode =$(this)[0];
return (domnode.namespaceURI = =namespaceURI &&domnode.localName ==localName);
});
};

} )(jQuery);

リスト 3. (quotes.js) 動的見積ビューアのアプリケーションコード

function xml_ready(result){
var データ挿入対象領域がクリア
').each(function (){
var quote_text =$(this).text()

$('

リスト 4 (quotes1.xml) は引用リストの XML ファイルです。

リスト 4. (quotes1.xml) は引用リストの XML ファイルです

jQueryを使用してブラウザでXMLを処理する

A　few　quotations　for　your　enjoyment

Caesar's　home　page

My　Web　feed

jQueryを使用してブラウザでXMLを処理する

A few quotations for your enjoyment

Caesar's home page

My Web feed

A　few　quotations　for　your　enjoyment

Caesar's　home　page

My　Web　feed