[目錄](méi)
- XML
- 什么是XML？
- XML語(yǔ)法
- 正確的XML格式范例
- 加載XML
- Content-Type設(shè)置
- 獲取XML
- 解析XML
- 禁用緩存
- 加載不上？
XML
什么是XML？
XML（eXtensible Markup Language）即可擴(kuò)展標(biāo)記語(yǔ)言。
XML語(yǔ)法
在XML中采用如下的語(yǔ)法
- 任何起始標(biāo)簽都必須有一個(gè)結(jié)束標(biāo)簽；
//以下代碼錯(cuò)誤，XML必須是封閉的，它沒(méi)有閉合
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan
可以采用另一種簡(jiǎn)化語(yǔ)法，即在一個(gè)標(biāo)簽中同時(shí)表示起始和結(jié)束標(biāo)簽。這種語(yǔ)法是：<tag/>。(ps:很像html中的單標(biāo)簽是不？^ ^)在XML解析器中會(huì)將其翻譯成<tag></tag>。
標(biāo)簽必須按照合理的順序進(jìn)行嵌套，因此結(jié)束標(biāo)簽必須按鏡像順序匹配起始標(biāo)簽。
//以下代碼錯(cuò)誤，因?yàn)樵跊](méi)有關(guān)閉所有內(nèi)部括號(hào)之前，不能關(guān)閉外面的括號(hào)
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan<i>sample</name>haha</i>
所有的屬性都要有值，并且需要在值的周?chē)由想p引號(hào)。
XML文檔只能有一個(gè)頂層元素。
//以下代碼錯(cuò)誤，因?yàn)樗卸鄠€(gè)頂層元素
<?xml version="1.0" encoding="UTF-8"?>
<name>zhangsan</name>
<id>1</id>
<name>wangwu</name>
<id>2</id>
- XML可以使用自己發(fā)明的標(biāo)簽。
因?yàn)閄ML中沒(méi)有預(yù)定義標(biāo)簽，所以XML允許創(chuàng)作者定義自己的標(biāo)簽和自己的文檔結(jié)構(gòu)。
正確的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設(shè)置
加載XML的時(shí)候，如果Content-Type本身就是一個(gè)XML文件則是不需要設(shè)置；如果是后臺(tái)程序動(dòng)態(tài)生成，那么就需要設(shè)置Content-Type為"text/xml"，否則jQuery就會(huì)以默認(rèn)的"text/html"方式處理，導(dǎo)致解析失敗。
以下是幾種常見(jiàn)語(yǔ)言中設(shè)置Content-Type的方式。
- header("Content-Type:text/xml"); //PHP
- response.ContentType="text/xml"; //ASP
- response.setContentType("text/xml"); //JSP
獲取XML
如果有了正確的XML結(jié)構(gòu)的文件，那么就可以通過(guò)jQuery的Ajax函數(shù)進(jìn)行讀取了，jQuery代碼如下：
$.ajax({
url:'ajax.xml',
type:'GET',
dataType:'xml',
timeout:1000, //設(shè)定超時(shí)
cache:false, //禁用緩存
error:function(xml){
alert("加載XML文檔出錯(cuò)");
},
success:function(xml){
//這里用于解析XML
}
})
這樣就可以讀取XML，當(dāng)然也可以用簡(jiǎn)單的$.get()方法和$.post()方法
$.get('ajax.xml',function(xml){
//這里用于解析XML
console.log(xml);
});
解析XML
解析XML文檔和解析DOM一樣，也可以用find()、children()等函數(shù)來(lái)解析和用each()方法來(lái)進(jìn)行遍歷，另外也可以用text()和attr()方法來(lái)獲取節(jié)點(diǎn)文本和屬性。例如在success回調(diào)里解析XML：
success:function(xml){
$(xml).find("student").each(function(i){ //查找所有student節(jié)點(diǎn)并遍歷
var age = $(this).children("age"); //取得子節(jié)點(diǎn)
var age_value = age.text(); //取節(jié)點(diǎn)文本
console.log(age_value); //id的值
console.log($(this).attr("email")); //顯示student的屬性
})
}
//下面這種寫(xiě)法也對(duì)哦
$.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"));
})
})
結(jié)果如圖所示：
通過(guò)上面的代碼，能成功獲取到相應(yīng)的數(shù)據(jù)，接下來(lái)就可以將解析出來(lái)的數(shù)據(jù)添加到已有的HTML文件中。
禁用緩存
這個(gè)問(wèn)題在書(shū)上看到，具體實(shí)踐中也沒(méi)有碰到過(guò)，所以就先記錄下來(lái)把。
我們?cè)陧?xiàng)目中經(jīng)常會(huì)遇到一個(gè)問(wèn)題，就是數(shù)據(jù)已經(jīng)更新了，但傳遞的還是以前的數(shù)據(jù)，要避免這種情況，就應(yīng)該禁用緩存。
- 如果是使用$.ajax的方法，只需要在cache屬性中設(shè)置false， 要注意false是布爾值不是字符串
- 如果是使用$.post的方法，默認(rèn)就是禁用緩存的。
- 如果是使用$.get的方法，可以通過(guò)設(shè)置時(shí)間戳來(lái)避免緩存：
$.get('ajax.xml?'+(+new Date).function(xml){
//...
});
//（+new Date）等價(jià)于 new Date().getTime()
注：之所以不用隨機(jī)數(shù)，是因?yàn)殡S機(jī)數(shù)大量使用會(huì)出現(xiàn)重復(fù)的概率挺大，而用時(shí)間戳就不會(huì)出現(xiàn)這種情況。
加載不上？
- 檢查一下Content-Type有沒(méi)有設(shè)置好？（看文中的 Content-Type設(shè)置 部分）
- 檢查一下XML結(jié)構(gòu)是否正確（看文中 XML語(yǔ)法 部分）
- 用ajax加載的時(shí)候一定要起服務(wù)，不能在本地環(huán)境下使用，否則會(huì)報(bào)錯(cuò)
解析xml的jq語(yǔ)法有沒(méi)有錯(cuò)誤，提示的是，如果子節(jié)點(diǎn)有很多個(gè)，要使用each遍歷，可以使用$(this)獲取當(dāng)前節(jié)點(diǎn)，也可以使用$(val)獲取當(dāng)前節(jié)點(diǎn)，為什么是$(val)，是因?yàn)閑ach里面的第二個(gè)參數(shù)val出來(lái)的是DOM元素，所以要進(jìn)行DOM元素和JQ元素的轉(zhuǎn)化。
還有就是如果數(shù)據(jù)不更新，是不是沒(méi)有禁用緩存。
（目前想到這些，還有在不定期更新哦~~~~~）
