本文详解使用jQuery通过AJAX加载并解析XML文件的关键步骤。重点阐述动态生成XML时Content-Type必须设为text/xml,以及XML结构需封闭。通过jQuery的find和each方法遍历节点,提取文本与属性,并展示如何动态生成HTML列表。
Content-Type设置与XML结构规范
在解析XML数据时,Content-Type设置不当往往是导致失败的主要原因。
若服务器直接返回标准的XML文件,则可忽略此步骤。
对于动态生成的XML内容,必须显式设置Content-Type为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结构示例
代码如下:
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan</name>
<id>1</id>
<name>lisi</name>
<id>2</id>
正确的XML结构示例
CODE:
<?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>3,解析
jQuery AJAX解析与节点遍历实现
此处引用macnie的方法,
遍历student节点(基于上述XML,子节点为student)
代码如下:
$.ajax({
url:'ajax.asp',
type: 'GET',
dataType: 'xml',//这里可以不写,但千万别写text或者html!!!
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(); //取文本
alert(id_value);//这里就是ID的值了。
alert($(this).attr("email")); //这里能显示student下的email属性。
//最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
$('<li></li>')
.html(id_value)
.appendTo('ol');
});
}
});最后补充一条:保证服务器端是utf-8的编码