使用 jQuery 在浏览器中处理 XML -2 jQuery XML 工作台
|
- UID
- 1066743
|
使用 jQuery 在浏览器中处理 XML -2 jQuery XML 工作台
jQuery XML 工作台名称空间问题只是以下事实的症状：说到底，jQuery 是一个 HTML 工具。我发现，使用 jQuery 处理 XML 最实用的方式就是为 XML 文档创建一个 HTML 工作台，通过可靠地跨浏览器方法引用脚本，然后建立需要的暂时性解决方案，例如针对 XML 名称空间问题的解决方案。您可以用工作台模式准备并测试您基于浏览器的 XML 处理的模式和技术，您甚至还可以把工作台作为基于浏览器的应用程序本身的基础。
（quotes.html）是 HTML 使用工作台的简单例子。它能够动态地从 XML 文件加载引用。
清单 1 （quotes.html）. 使用 jQuery XML 工作台的 HTML 例子1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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="quotes.js"></script>
<!-- Put the XML file or URL in the href attribute below: -->
<link href="quotes1.xml" type="application/xml" rel="target_XML" />
</head>
<body>
<h1>A few quotations for your enjoyment</h1>
<div id="update-target"><ol></ol></div>
</body>
</html>
|
您需要 script 元素来自动加载 jQuery、工作台 JavaScript 以及您的应用程序特定脚本。您还需要一个 link 元素来确定 target_XML 使用的 XML 文件。如果您需要使用多个 XML 文件，扩展工作台设置非常容易。（workbench.js）是工作台脚本。
清单 2（workbench.js）. jQuery XML 工作台 JavaScript1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| /*
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）动态引用查看器的应用程序代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| /*
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 文件1
2
3
4
5
6
7
| <?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 文件，带有引用清单1
2
3
4
5
6
7
| <?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 工作台展示的引用 |
|
|
|
|
|
