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