使用 jQuery 在浏览器中处理 XML -3 Atom XML 的动态显示
|
- UID
- 1066743
|
使用 jQuery 在浏览器中处理 XML -3 Atom XML 的动态显示
Atom XML 的动态显示一旦您开始在 jQuery 中进行 XML 处理，您就能够处理更多有用的 XML 格式，包括 Web 提要格式，例如 RSS 和 Atom。在此部分我将使用 jQuery XML 工作台来显示来自一个 Web 页面上 Atom 提要的最新条目。 是 HTML 页面。
清单 6. （home.html）托管动态 XML 的 Web 页面1
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
| <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="home.js"></script>
<!-- Put the XML file or URL in the href attribute below: -->
<link href="atom1.xml" type="application/xml" rel="target_XML" />
</head>
<body>
<h1>Caesar's home page</h1>
<p>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.
</p>
<p>Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit.
</p>
<p>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.</p>
<h2>My <a href="feed.xml">Web feed</a></h2>
<div id="update-target"></div>
</body>
</html>
|
（atom1.xml）是引用的 Atom 文件。
清单 7. （atom1.xml）Atom 文件示例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
xml:lang="en"
xml:base="http://www.example.org">
<id>http://www.example.org/myfeed</id>
<title>My Simple Feed</title>
<updated>2005-07-15T12:00:00Z</updated>
<link href="/blog" />
<link rel="self" href="/myfeed" />
<author><name>Uche Ogbuji</name></author>
<entry>
<id>http://www.example.org/entries/1</id>
<title>A simple blog entry</title>
<link href="/blog/2005/07/1" />
<updated>2005-07-14T12:00:00Z</updated>
<summary>This is a simple blog entry</summary>
</entry>
<entry>
<id>http://www.example.org/entries/2</id>
<title />
<link href="/blog/2005/07/2" />
<updated>2005-07-15T12:00:00Z</updated>
<summary>This is simple blog entry without a title</summary>
</entry>
</feed>
|
是 home.js，包含了加载到工作台上的动态应用程序代码。
清单 8. （home.js）主页 Web 提要显示的应用程序代码1
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
32
33
34
35
36
37
38
39
40
41
| /*
home.js
*/
var ATOM_NS = 'http://www.w3.org/2005/Atom';
function xml_ready(result){
var xml = result.responseXML;
//Make sure the target area for inserting data is clear
$("#update-target").empty();
$(xml).find('*').ns_filter(ATOM_NS, 'entry').each(function(){
var title_elem = $(this).find('*').ns_filter(ATOM_NS, 'title').clone();
var link_text = $(this).find('[rel="alternate"]')
.ns_filter(ATOM_NS, 'link')
.attr('href');
var summary_elem = $(this).find('*').ns_filter(ATOM_NS, 'summary').clone();
//Deal with the case of a missing title
if (!title_elem.text()){
title_elem = '[No title]';
}
//Deal with the case where rel='alternate' is omitted
if (!link_text){
link_text = $(this).find('*')
.ns_filter(ATOM_NS, 'link')
.not('[rel]')
.attr('href');
}
//Update the target area with the entry information
$('<p></p>')
.append(
$('<a href="' + link_text + '"></a>')
.append(title_elem)
)
.append(' - ')
.append(summary_elem.clone())
.fadeIn('slow') //bonus animation
.appendTo('#update-target');
}); //close each(
}
|
同样，我对该文件进行了注释，但是有几点值得特别强调。Atom 有许多可以接受的元素变体，其中多数是可选的。这就意味着您必须对异常情况进行处理。我举两个常见的异常情况：在一个必须的链接上的可选 rel="alternate"；标题是可选的这一事实。正如您所看到的，jQuery 提供了处理这些情况的巨大灵活性，因此您甚至应该能够处理这种不规则的 XML 格式。在某些情况下，我直接从 XML 将结构复制到主文档（托管 HTML）。这需要非常小心，并且您会发现我使用了 clone() 方法，以确保我没有将某个文档的节点嫁接到另一个文档，否则 DOM 异常 WRONG_DOCUMENT_ERR 将会发出一个错误。另外，我使用了 jQuery 方法 fadeIn，以便添加的内容会慢慢从视线中消失。 是 home.html 的浏览器显示。
图 2. 动态添加 Web 提要内容的主页 |
|
|
|
|
|
