Jquery读取xml数据【转】

通过JQuery框架为空白HTML文档加载

在开始之前我们需要做如下准备工作：

1.创建一个名为DEMO.html空白html文件；（推荐使用Editplus 3创建）

2.熟悉JQuery框架的基本语法；（不熟悉没关系，后面我会注释得很详细）

3.创建一个名为data.xml的XML文件用来存储数据，XML的结构下面会涉及到，你也可以下载我打包好的文件查看；

4.一个loading.gif图片，这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中。

从XML文件读取的数据。我们将会主要用到JQuery自带函数 $.get 。

正式开始：/www.huyang8.com

Step 1:首先让我们看看这个data.xml的简单结构，我这里演示的数据是"Saturn为您推荐的几本书"，故为书籍信息，那么xml就包括书籍的名称，缩略图和书籍描述信息；

<?xml version="1.0" encoding="utf-8" ?>   
<books>   
   <book title="藏地密码" imageurl="images/Tibet_Code.jpg">   
       <description>   
  这里是概况(www.huyang8.com)
       </description>   
   </book>   

<book title="剑桥雅思6" imageurl="images/ielts.jpg">   
        <description>   
   这里是概况(www.huyang8.com)     
    </description>   
    </book>   
   
    <book title="Professional ASP.NET" imageurl="images/asp.jpg">   
        <description>   
             这里是概况(www.huyang8.com)           
         </description>   
    </book>  
</books>

其次，让我们看看加载在空白HTML文档里面的JavaScript代码：

$(document).ready(function()  
......{  
$.get('myData.xml', function(d)......{   
       $('body').append('<h1> Saturn给你推荐几本书： </h1>');   
       $('body').append('<dl />');   
  
$(d).find('book').each(function()......{   
   
           var $book = $(this);     
            var title = $book.attr("title");   
            var description = $book.find('description').text();   
            var imageurl = $book.attr('imageurl');   
   
            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>'; 
            html += '<dd> <span class="loadingPic" alt="Loading" />';   
            html += '<p class="title">' + title + '</p>';   
            html += '<p> ' + description + '</p>' ;   
            html += '</dd>';   
  
            $('dl').append($(html));
              
            $('.loadingPic').fadeOut(2000);   
        });   
    });   
);

Step 2:这里，我只讲下JavaScript代码原理与运行流程，不过分讨论语法，如果你对语法有任何疑问，请给我留言或者查看JQuery相关文档。

• 行1：当HTML文档准备完毕之后（即html和JavaScript都下载完毕），会自动触发JQuery的 $(document).ready方法及里面的过程。显然，这里首先执行的是$.get方法。
• 行3：$.get 的第一个参数是XML文件的相对路径（注意路径要填写正确，这里我们把XML和网页文件放在同一文件夹）。第二个参数是一个Callback函数，即回调函数。就是说通过get方法来请求这个XML文件的内容，然后通过这个callback回调函数来操作里面的数据。而callback的参数d表示从XML回调过来的所有数据，有了这个参数d，我们就好进行下面的内容了。
• 行4：通过JavaScript在文档的BODY中动态添加一个标签<h1>，这个是页面的总标题，无关紧要；
• 行5：同样在BODY中动态添加一个标签<dl>,用来作为包含循环下面的内容容器。（行20会用到）
• 行7：这一行很重要，因为我们已经说过，回调函数的参数d表示从XML回调的所有数据，现在我们就需要对这些数据进行处理（筛选）和格式化；请注意：这里通过搜寻book标签（tag），然后循环执行each后面的函数，直到xml里面数据的条目完全循环完毕；（有点像PHP里面的foreach函数的功能）
• 行9：$(this)实际上就创建一个对象，目的是将d的当前一条书籍信息对象实例化，方便进行操作，这就是$book；
• 行10--行12：分别获取当前对象$book的书籍名称，描述和缩略图；（注意取属性值和取节点值的语法不同）
• 行14-行18：格式化书籍信息，以便输出；
• 行20：将格式化后的信息以HTML输出方式输出到文档中。
• 行22：为了告诉用户我们当前的信息正在从XML中读取，2000毫秒（2秒）后，图片逐渐消失。

Step 3:至此，大功告成。欢迎大家给我留言，共同讨论JQuery的开发和你所碰到的问题，请不吝赐教。另外，请将下载后的文件夹放在WEB环境下运行（IIS或虚拟主机），请不要直接点开运行。

下面介绍一下正确用jQuery的AJAX加载XML并解析
1,Content-Type
很多时候无法解析就是Content-Type的问题。(呵呵,我第一次做ajax的时候,就遇到这个问题.)
一定要将其设置为text/xml，否则默认就是text/html也就是普通的文本了。
常见语言的Content-Type设置

header("Content-Type:text/xml"); //php
response.ContentType="text/xml" //asp
response.setHeader("ContentType","text/xml"); //jsp (我上次这没写,结果返回 是一个 "" )

2，xml结构。
XML一定要封闭的，很重要！ (这个我一般不会范,我还是算比较细心的.)
例：
错误的XML

<?xml version="1.0" encoding="UTF-8"?> 
        <name>zhangsan</name> 
        <id>1</id> 
        <name>lisi</name> 
        <id>2</id>

正确的

<?xml version="1.0" encoding="UTF-8"?>
<stulist> 
        <student mailto:1@1.com" target=_blank>1@1.com">   
                <name>zhangsan</name> 
                <id>1</id> 
        </student> 
        <student mailto:2@2.com" target=_blank>2@2.com"> 
               <name>lisi</name> 
                <id>2</id> 
        </student>
</stulist>

3,解析
遍历student（这里还是用上面那个XML，子节点是student)

$.ajax(...{ 
    url:'ajax.jsp', 
    type: 'GET', 
    dataType: 'xml', 
    timeout: 1000,
error: function(xml)...{ 
        alert('Error loading XML document'+xml); 
    },
success: function(xml)...{
$(xml).find("student").each(function(i)...{ 
            var id=$(this).children("id"); //取对象 
            var id_value=$(this).children("id").text(); //取文本 或者 $("id" , xml).text(); 
            alert(id_value);//这里就是ID的值了。
            alert($(this).attr("email")); //这里能显示student下的email属性。 
            $('<li></li>').html(id_value).appendTo('ol'); 
 

});
    }
});

 

本文转载自：http://www.cnblogs.com/lovemdb/articles/1502658.htmls