XML和HTML都是标记语言,语法形式非常相似,同属于一个语言体系。对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便。
如果你用过Java、PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦。改用jQuery来读取、分析、操作XML后,给人意想不到的轻松感。下面我们来看看使用jQuery处理XML文件的几种形式方法。
使用JavaScript常规方法解析XML
var xmlDoc = request.responseXML;
try // Build Markers, if available
{
var markers = xmlDoc.getElementsByTagName("marker") ;
for ( var i = 0; i < markers.length ; i++ ) {
var point = {
markers[i].getAttribute("lat")),
markers[i].getAttribute("lng")
};
}
} catch(e) {}
使用jQuery解析XML
$(request.responseXML).find("marker").each(function() {
var marker = $(this);
var point = {
marker.attr("lat"),
marker.attr("lng")
};
});
使用$.parseXML()解析XML
如果你已经把XML内容读到了字符串里,你可以使用$.parseXML()方法分析它:
xml = $.parseXML( $('body > pre').text() );
$(xml).find("entry").each(function() {
var $this = $(this),
item = {
Address1: $this.find("Address1").text(),
Address2: $this.find("Address2").attr('name')
}
});
例子
一、xml文件结构:books.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<book id="1">
<name>深入浅出extjs</name>
<author>张三</author>
<price>88</price>
</book>
<book id="2">
<name>锋利的jQuery</name>
<author>李四</author>
<price>99</price>
</book>
<book id="3">
<name>深入浅出flex</name>
<author>王五</author>
<price>108</price>
</book>
<book id="4">
<name>java编程思想</name>
<author>钱七</author>
<price>128</price>
</book>
</root>
二、页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery解析xml</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.post('books.xml',function(data){
//查找所有的book节点
var s="";
$(data).find('book').each(function(i){
var id=$(this).attr('id');
var name=$(this).children('name').text();
var author=$(this).children('author').text();
var price=$(this).children('price').text();
s+=id+" "+name+" "+author+" "+price+"<br>";
});
$('#mydiv').html(s);
});
});
</script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
例子,上面的都是已经写好的xml文档,下面例子可以加载xml再解析
加载并解析XML
创建实例XML文档(Student.xml)
[html] view plain copy
<?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()方法来获取节点文本和属性。
很多情况下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