Content-Type
如果XML是由程序动态生成需要指定Content-Type

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

如果是XML文件应该符合XML标准,即XML是封闭的,并且只有一个顶层元素

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

Jquery获取XML可以使用$.ajax(),$.get(),$.post()方法来获取

$.get('ajax.xml',function(xml){
//解析XML
});


使用Jquery解析XML文档与解析DOM一样,可以使用find(),children()等函数来解析和使用each()方法来遍历节点,也可以使用text()和attr()方法获取节点文本和属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery加载并解析XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("button").click(function(){
            $.ajax({
                url:'ajax.xml',
                type: 'GET',
                dataType: 'xml',
                timeout: 1000,
                cache:false,
                error: function(xml){
                    alert('加载XML文档出错');
                },
                success: function(xml){

                    //建立一个代码片段
                    var frag=$("<ul/>");

                    //遍历所有student节点
                    $(xml).find("student").each(function(i){
                        //获取id节点
                        var id=$(this).children("id"), 
                        //获取节点文本
                            id_value=id.text(), 
                        //获取student下的email属性。
                            email=$(this).attr("email");

                        //构造HTML字符串,通过append方法添加进之前建立代码片段
                        frag.append("<li>"+id_value+"-"+email+"</li>");
                    });

                    //最后得到的frag添加进HTML文档中
                    frag.appendTo("#load");
                }
            });

        });
    });
</script>
</head>
<body>
<button>加载</button>
<div id="load"></div>
</body>
</html>

禁用缓存
在实际应用中,有时候数据更新了,但传递的还是以前的数据,如果是使用$.post()方法默认是禁用缓存的,如果使用$.get()方式,加上时间戳即可避免缓存

$.get('ajax.xml?'+(+new Date),function(xml){
//解析XML
});
//+new Date等价new Date().getTime()

如果使用$.ajax()方法设置cache:false即可

  • Tags:

发表评论/留言

为了您的身体健康、潇洒、美丽、帅气,请不要灌水。

/ 快捷键:Ctrl+Enter