jquery加Ajax读取xml及查找节点

读取XML如果用DOM的话,代码量多,更何况就算我们做出来了还有可能出现兼容问题.所以,在做这次的XML交互时我决定用jQuery代码量少,运行质量也高.

步骤入下:

首先建立一个XML文档,名字随便取就可以了.这里我就用test.xml给大家做示范了.

XML内容为:

<?xml version="1.0" encoding="utf-8" ?>
<stulist>
<man>
   <name>爱的色放</name>
   <age>36</age>
</man>
<man>
   <name>X特警</name>
   <age>24</age>
</man>
<man>
   <name>大头儿子小头爸爸</name>
   <age>12</age>
</man>
</stulist>

好了这样就算是一个比较完整的XML文档了.

下面就看我们要写的JS.

既然是jQuery最重要的就是要将jQuery库引入进来.

没有 jQuery的朋友可去jquery.com下载最新版本.这里就以我本机的路径为例.

<script language="javascript" type="text/javascript" src="../JavaScript/jquery-1.3.2.min.js"></script>

接下来就是读取XML文件了.前面我们已经说过了要用ajax所以这里代码就应该是这样:

    <script>
$(document).ready(function(){
    $.ajax({url:"test.xml",dataType:"xml",success:function(xml){
      $(xml).find("stulist>man").each(function(){
   document.getElementById("acc").innerHTML+="<br>姓名:"+$(this).find("name").text()+"<br/>年龄:"+$(this).find("age").text();
      });
    }});
    })

</script>

第一句就不用跟大家解释了,意思就是页面加载执行.我们也可以写在一个函数里.

$ajax()有很多参数,这里就只给大家介绍我写的这几个参数是什么意思.

参数1 url:要请求的文档路径.

参数2 dataType:请求的文档类型.有 XML HTML script json等等.

参数3 success:请求成功后的回调函数。也就是说,当你发送的请求成功之后你要做什么.

接下来我给大家解释一下这段代码

function(xml)   function相信大家都知道是干什么的,这里的xml指的是你请求文件完成后返回的所有数据.

$(xml).find("stulist>man").each这句的意思就是查找返回的xml里的stulist节点下的man标签.然后根据查找到的结果,每一个跟查找结果匹配的元素都执行下文的函数.

下边就更好理解了,然后在你查找到的结果里,继续查找你想要的元素,然后将你得到的值,一个个inner到需要显示的元素里.OK就这样,我们读取XML就成功了.

This entry was posted in javascript, 未分类 and tagged . Bookmark the permalink.

Leave a Reply