JQuery加载并解析XML

红太狼 2021-09-12 08:44 360阅读 0赞

**1、简述**

XML（eXtensible Markup Language）即可扩展标记语言，与HTML一样，都是属于SGML标准通用语言。

**2、 Content-Type**

很多情况下XML文件不能正常解析都是由于Content-Type没有设置好。如果Content-Type本身就是一个XML文件则不需要设置；如果是由后台程序动态生成的，那么就需要设置Content-Type为“text/xml”，否则JQuery会以默认的“text/html”方式处理，导致解析失败。以下是几种常见语言中设置Content-Type的方式。

header("Content-Type:text/xml");     //PHP
    response.ContentType = "text/xml";   //ASP
    response.setContentType("text/xm");  //JSP

**3、创建实例XML文档（Student.xml）**

<?xml version="1.0" encoding="utf-8" ?>
    <stulist>
      <student email="peter@163.com">
        <name>peter</name>
        <id>1</id>
      </student>
    
      <student email="ken@163.com">
        <name>ken</name>
        <id>2</id>
      </student>
    </stulist>

**4、获取XML**

$(document).ready(function() {
        $.ajax({
            url: '/xml/Student.xml',
            type: 'GET',
            dataType: 'xml',
            timeout: 1000,  //设定超时
            cache: false,   //禁用缓存
            error: function(xml) {
                alert("加载XML文档出错!");
            },
            success: GetStudentComplete   //设置成功后回调函数
        });
    });

通过JQuery的Ajax函数进行读取。

**5、 解释XML**

//获取XML成功后回调函数
    function GetStudentComplete(xml) {
        $(xml).find("student").each(function(i) {     //查找所有student节点并遍历
            var id = $(this).children("id");          //获得子节点
            var id_vaule = id.text();                 //获取节点文本
            var email_vaule = $(this).attr("email");  //获取节点的属性
            alert(id_vaule);
            alert(email_vaule);
        });
    }

解析XML文档与解析DOM一样，也可以用find()、children()等函数来解析和用each()方法来进行遍历，另外也可以用text()和attr()方法来获取节点文本和属性。