[目录]
- XML
- 什么是XML？
- XML语法
- 正确的XML格式范例
- 加载XML
- Content-Type设置
- 获取XML
- 解析XML
- 禁用缓存
- 加载不上？
XML
什么是XML？
XML（eXtensible Markup Language）即可扩展标记语言。
XML语法
在XML中采用如下的语法
- 任何起始标签都必须有一个结束标签；
//以下代码错误，XML必须是封闭的，它没有闭合
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan
-
可以采用另一种简化语法，即在一个标签中同时表示起始和结束标签。这种语法是：<tag/>。(ps:很像html中的单标签是不？^ ^)在XML解析器中会将其翻译成<tag></tag>。
-
标签必须按照合理的顺序进行嵌套，因此结束标签必须按镜像顺序匹配起始标签。
//以下代码错误，因为在没有关闭所有内部括号之前，不能关闭外面的括号
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan<i>sample</name>haha</i>
-
所有的属性都要有值，并且需要在值的周围加上双引号。
-
XML文档只能有一个顶层元素。
//以下代码错误，因为它有多个顶层元素
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan</name>
<id>1</id>
<name>wangwu</name>
<id>2</id>
- XML可以使用自己发明的标签。
因为XML中没有预定义标签，所以XML允许创作者定义自己的标签和自己的文档结构。
正确的XML格式范例
<?xml version="1.0" encoding="UTF-8"?>
<stulist>
<student email="123456@qq.com">
<name>xiaoming</name>
<age>20</age>
</student>
<student email="234567@qq.com">
<name>xiaogang</name>
<age>21</age>
</student>
</stulist>
加载XML
Content-Type设置
加载XML的时候，如果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/xml"); //JSP
获取XML
如果有了正确的XML结构的文件，那么就可以通过jQuery的Ajax函数进行读取了，jQuery代码如下：
$.ajax({
url:'ajax.xml',
type:'GET',
dataType:'xml',
timeout:1000, //设定超时
cache:false, //禁用缓存
error:function(xml){
alert("加载XML文档出错");
},
success:function(xml){
//这里用于解析XML
}
})
这样就可以读取XML，当然也可以用简单的$.get()方法和$.post()方法
$.get('ajax.xml',function(xml){
//这里用于解析XML
console.log(xml);
});
console1.png
解析XML
解析XML文档和解析DOM一样，也可以用find()、children()等函数来解析和用each()方法来进行遍历，另外也可以用text()和attr()方法来获取节点文本和属性。例如在success回调里解析XML：
success:function(xml){
$(xml).find("student").each(function(i){ //查找所有student节点并遍历
var age = $(this).children("age"); //取得子节点
var age_value = age.text(); //取节点文本
console.log(age_value); //id的值
console.log($(this).attr("email")); //显示student的属性
})
}
//下面这种写法也对哦
$.get("xml.xml",function(xml){
$(xml).find("student").each(function(i,val){
var age = $(val).children("age");
var age_value = age.html();
console.log(age_value);
console.log($(val).attr("email"));
})
})
结果如图所示：
console2.png
通过上面的代码，能成功获取到相应的数据，接下来就可以将解析出来的数据添加到已有的HTML文件中。
禁用缓存
这个问题在书上看到，具体实践中也没有碰到过，所以就先记录下来把。
我们在项目中经常会遇到一个问题，就是数据已经更新了，但传递的还是以前的数据，要避免这种情况，就应该禁用缓存。
- 如果是使用$.ajax的方法，只需要在cache属性中设置false， 要注意false是布尔值不是字符串
- 如果是使用$.post的方法，默认就是禁用缓存的。
- 如果是使用$.get的方法，可以通过设置时间戳来避免缓存：
$.get('ajax.xml?'+(+new Date).function(xml){
//...
});
//（+new Date）等价于 new Date().getTime()
注：之所以不用随机数，是因为随机数大量使用会出现重复的概率挺大，而用时间戳就不会出现这种情况。
加载不上？
- 检查一下Content-Type有没有设置好？（看文中的 Content-Type设置 部分）
- 检查一下XML结构是否正确（看文中 XML语法 部分）
- 用ajax加载的时候一定要起服务，不能在本地环境下使用，否则会报错
error.png
-
解析xml的jq语法有没有错误，提示的是，如果子节点有很多个，要使用each遍历，可以使用$(this)获取当前节点，也可以使用$(val)获取当前节点，为什么是$(val)，是因为each里面的第二个参数val出来的是DOM元素，所以要进行DOM元素和JQ元素的转化。
-
还有就是如果数据不更新，是不是没有禁用缓存。
（目前想到这些，还有在不定期更新哦~~~~~）
网友评论