jQuery教程(16)-ajax操作之加载XML文档

文章标签: jquery,jquery-ajax
2015-1-14 20:41:37     29 人阅读    

加载XML文档
            XML是缩写词Ajax中的一部分,但我们至今还没有谈到加载XML文档。加载XML文档很简单,而且与JSON技术也相当接近。首先,需要将希望显示的数据包含在一个名为d.xml的XML文 件中:

<?xml version=M1.0M encoding=MUTF-8M?>
<entries>
<entry term="DEFAME" part="v.t.">
<definition>
To lie about another. To tell the truth about another.
</definition>
</entry>
<entry term="DEFENCELESS" part="adj.">
<definition>
Unable to attack.
</definition>
</entry>
<entry term=MDELUSIONM part="n.">
<definition>
The father of a most respectable family, comprising Enthusiasm, Affection, Self-denial, Faith, Hope,
Charity and many other goodly sons and daughters.
</definition>
<quote author="Mumfrey Mappel">
<line>All hail, Delusion! Were it not for thee</line>
<line>The world turned topsy-turvy we should see;
</line>
<line>For Vice, respectable with cleanly fancies,
</line>
<line>Would fly abandoned Virtue's gross advances.
</line>
</quote>
</entry>
</entries>

            当然,通过XML来表示这些数据的形式有很多种,而其中一些能够非常近似地模仿我们已 经确定的HTML结构或者前面使用的JSON。不过,这里我们示范了 XML的一些更方便阅读的特 性,例如使用属性term和part,而不是标签。
            下面以我们熟悉的方式开始编写函数,参见代码清单6-8。
            代码清单6-8

//未完成的代码
$(document).ready(function() {
$('#letter-d a').click(function(event) { event.preventDefault();
$.get('d.xml', function(data) {
});
});
});

            这次,帮助我们完成任务的是$.get()函数。通常,这个函数只是取得由URL指定的文件, 然后将纯文本格式的数据提供给回调函数。但是,在根据服务器提供的MIME类型知道响应的是 XML的情况下,提供给回调函数的将是XML DOM树。
好在,我们已经领略过了 jQuery强大的DOM遍历能力。遍历XML文档的方式同HTML文档一 样,也可以使用常规的.find()、.filter()及其他遍历方法,参见代码清单6-9。
代码清单6-9

$(document).ready(function() {
$('#letter-d a').click(function(event) { event.preventDefault();
$.get('d.xml', function(data) { $('#dictionary').empty();
$(data).find('entry').each(function() { var $entry = $(this); var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term'); html += '</h3>';
html += '<div class="part">' + $entry.attr('part'); html += '</div>';
html += '<div class="definition">'; html += $entry.find('definition').text(); var $quote = $entry.find('quote'); if ($quote.length) {
html += '<div class="quote">'; $quote.find('line').each(function() { html += '<div class="quote-line">'; html += $(this).text() + '</div>';
});
if ($quote.attr('author')) {
html += '<div class="quote-author">';
html += $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>'; html += '</div>';
$('#dictionary').append($(html));
});
});
});
});

            这样,当单击D链接时,也可以得到预期的效果,如图6-5所示。
             这是我们已知的DOM遍历方法的新用途,而且,jQuery对CSS选择符支持的灵活性由此也可 见一斑。CSS的选择符语法一般适合美化HTML页面,位于标准.css文件中的选择符,如div和body 等标签名都是为了在HTML中找到内容。然而,jQuery可以使用任意XML标签名,如这里的entry 和difinition,就和使用标准HTML标签一样方便。


               jQuery内部先进的选择符引擎,对于在更复杂的情况下查找XML文档中的元素同样很有帮 助。例如,假设我们想把显示的内容限定为那些带有引用进而带有作者属性的词条。那么,通过将entry修改为entry:has(quote)就可以把词条限定为必须包含嵌套的引用兀素。然后,还可 以通过entry:has(quote[author])进一步限定词条中的引用兀素必须包含author属性。

图6-5

ajax操作之加载XML文档


这样,代码清单6-9中带有初始选择符的代码行应该写成:

$(data).find('entry:has(quote[author])').each(function() {


由图6-6可以看出,新的选择符表达式对返回的词条进行了适当的限制。\\\

 

 

ajax操作之加载XML文档


图 6-6


原文地址:http://www.itmmd.com/201501/492.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(17)-ajax操作之向服务器传递数据 执行GET请求   上一篇
下一篇  jQuery教程(15)-ajax操作之执行脚本

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!