在上一篇《Ajax裸奔》中,我們定義了如此一個(gè)xml文件:
news.xml:
<data>
焦點(diǎn)|工行小額賬戶明年收費(fèi) 不足300元要?dú)w并<br />
財(cái)經(jīng)|"神六"飛行開銷僅為美航天飛機(jī)4.5% 花9億<br />
財(cái)經(jīng)|2005能源富豪榜揭榜 超市要撤致癌保鮮膜<br />
證券|神六催生高價(jià)股 MBO公司股改 高管一夜暴富<br />
證券|保險(xiǎn)公司告基金利益輸送 科龍管理班子亮相 <br />
科技|神六飛船成功著陸 載人飛行取得圓滿成功<br />
關(guān)注|索尼中國不裁員 夏普與南京熊貓分道揚(yáng)鑣 <br />
熱點(diǎn)|北電任命新總裁兼CEO 索愛發(fā)布第三季財(cái)報(bào)<br />
數(shù)碼|300萬像素手機(jī)推薦 最有降價(jià)潛力手機(jī)導(dǎo)購<br />
測評|近期五大DC跳水王 怪模怪樣個(gè)性手機(jī)推薦<br />
探索|亞歷山大古城的文化歷史 勝利者改寫歷史 <br />
</data>
這確確實(shí)實(shí)是一個(gè)合法的xml文件,但是不是一個(gè)漂亮的xml文件。xml語言的一個(gè)巨大的優(yōu)勢是自說明性。上面這個(gè)xml語言只說明了一件事:我有一堆數(shù)據(jù)(data標(biāo)記),大家拿去用阿。可是怎么用呢,只能靠約定了。
一個(gè)漂亮一點(diǎn)的xml應(yīng)該像這樣:
news2.xml:
<newsList>
<title type="焦點(diǎn)">工行小額賬戶明年收費(fèi) 不足300元要?dú)w并</title>
<title type="財(cái)經(jīng)">"神六"飛行開銷僅為美航天飛機(jī)4.5% 花9億</title>
<title type="財(cái)經(jīng)">2005能源富豪榜揭榜 超市要撤致癌保鮮膜</title>
<title type="證券">神六催生高價(jià)股 MBO公司股改 高管一夜暴富</title>
<title type="證券">保險(xiǎn)公司告基金利益輸送 科龍管理班子亮相</title>
<title type="科技">神六飛船成功著陸 載人飛行取得圓滿成功</title>
<title type="關(guān)注">索尼中國不裁員 夏普與南京熊貓分道揚(yáng)鑣</title>
<title type="熱點(diǎn)">北電任命新總裁兼CEO 索愛發(fā)布第三季財(cái)報(bào)</title>
<title type="數(shù)碼">300萬像素手機(jī)推薦 最有降價(jià)潛力手機(jī)導(dǎo)購</title>
<title type="測評">近期五大DC跳水王 怪模怪樣個(gè)性手機(jī)推薦</title>
<title type="探索">亞歷山大古城的文化歷史 勝利者改寫歷史 </title>
</newsList>
這個(gè)xml非常好的說明了所有的事情:xml的內(nèi)容是新聞標(biāo)題,每個(gè)標(biāo)題的分類是什么,標(biāo)題內(nèi)容是什么,一目了然,甚至一個(gè)不懂中文的程序員也可以從xml標(biāo)記和層次中了解到這些信息,不需要多余的猜測和約定。
第一種方式,我通常稱之為AJaH(Asynchronous Javascript and Hyper-text),第二種,我才稱為真正的Ajax。
開發(fā)Ajax應(yīng)用中,我們經(jīng)常要面臨的一個(gè)選擇就是,用上面AJaH的方式還是下面Ajax的方式來組織數(shù)據(jù)。這并不是可以簡單的一刀切的問題,很大程度上取決于開發(fā)者對各方面優(yōu)劣的取舍。我在這里只把兩者的優(yōu)劣大概的列一下。
1 Ajax比較好聽,有個(gè)球隊(duì)叫阿賈克斯的就是這么拼的,AjaH就不知道要怎么念才好聽了:)
2 AjaH解析起來更容易更快。按照約定包裝好的數(shù)據(jù)只需要最少的加工就可以使用了,按照規(guī)范形式包裝的數(shù)據(jù)需要相對復(fù)雜的解析過程
3 Ajax更加通用。用Ajax我們很容易就可以吧同一個(gè)CGI(廣義的cgi)生成的xml數(shù)據(jù)使用在任何不同的場合,而不需要后臺服務(wù)程序做出任何修改,用AjaH的話就很可能需要為相同的數(shù)據(jù)做出不同的版本。
4 AjaX更不容易出錯,需要的時(shí)候我們可以建立DTD或者xmlschema來自動校驗(yàn)xml數(shù)據(jù)的正確性,二AjaH的正確性則需要手工驗(yàn)證來保障。
5 Ajax更容易維護(hù)和修改。AjaH的數(shù)據(jù)中往往整合了html/css美工效果和上下文相關(guān)的javascript代碼,混合編碼造成了代碼維護(hù)的代價(jià)比較高。
作為對比,我們試試解析新的news2.xml文件來生成頁面:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<meta name="Author" content="emu" />
<meta name="Keywords" content="ajax" />
<title> 更好的Ajax例子 </title>
<script type="text/JavaScript">
<!--
var newsXML;
function init(){
newsXML = window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));
newsXML.onreadystatechange= handleXML;
newsXML.open("GET","news2.xml",true);
newsXML.send(null);
}
function handleXML(){
if(newsXML.readyState==4){
var titleList = newsXML.responseXML.getElementsByTagName("title");
var st = "";
for(var i=0;i<titleList.length;i++){
x = titleList[i];
st += x.getAttribute("type")+"|"+(x.text?x.text:x.textContent)+"<br />";
}
document.body.innerHTML=st;
}
}
//-->
</script>
</head>
<body onload="init()">
</body>
</html>
其實(shí)做起來也很容易,對不對?把這個(gè)頁面和前面的news2.xml放到同一個(gè)目錄下發(fā)布即可運(yùn)行。
本文全部原碼下載