在上一篇《Ajax裸奔》中,我们定义了如此一个xml文件:
news.xml:
<?xml version="1.0" encoding="gb2312"?>
<data>
焦点|工行小额账户明年收费 不足300元要归并<br />
财经|"神六"飞行开销仅为美航天飞机4.5% 花9亿<br />
财经|2005能源富豪榜揭榜 超市要撤致癌保鲜膜<br />
证券|神六催生高价股 MBO公司股改 高管一夜暴富<br />
证券|保险公司告基金利益输送 科龙管理班子亮相 <br />
科技|神六飞船成功着陆 载人飞行取得圆满成功<br />
关注|索尼中国不裁员 夏普与南京熊猫分道扬镳 <br />
热点|北电任命新总裁兼CEO 索爱发布第三季财报<br />
数码|300万像素手机推荐 最有降价潜力手机导购<br />
测评|近期五大DC跳水王 怪模怪样个性手机推荐<br />
探索|亚历山大古城的文化历史 胜利者改写历史 <br />
</data>
这确确实实是一个合法的xml文件,但是不是一个漂亮的xml文件。xml语言的一个巨大的优势是自说明性。上面这个xml语言只说明了一件事:我有一堆数据(data标记),大家拿去用阿。可是怎么用呢,只能靠约定了。
一个漂亮一点的xml应该像这样:
news2.xml:
<?xml version="1.0" encoding="gb2312"?>
<newsList>
<title type="焦点">工行小额账户明年收费 不足300元要归并</title>
<title type="财经">"神六"飞行开销仅为美航天飞机4.5% 花9亿</title>
<title type="财经">2005能源富豪榜揭榜 超市要撤致癌保鲜膜</title>
<title type="证券">神六催生高价股 MBO公司股改 高管一夜暴富</title>
<title type="证券">保险公司告基金利益输送 科龙管理班子亮相</title>
<title type="科技">神六飞船成功着陆 载人飞行取得圆满成功</title>
<title type="关注">索尼中国不裁员 夏普与南京熊猫分道扬镳</title>
<title type="热点">北电任命新总裁兼CEO 索爱发布第三季财报</title>
<title type="数码">300万像素手机推荐 最有降价潜力手机导购</title>
<title type="测评">近期五大DC跳水王 怪模怪样个性手机推荐</title>
<title type="探索">亚历山大古城的文化历史 胜利者改写历史 </title>
</newsList>
这个xml非常好的说明了所有的事情:xml的内容是新闻标题,每个标题的分类是什么,标题内容是什么,一目了然,甚至一个不懂中文的程序员也可以从xml标记和层次中了解到这些信息,不需要多余的猜测和约定。
第一种方式,我通常称之为AJaH(Asynchronous Javascript and Hyper-text),第二种,我才称为真正的Ajax。
开发Ajax应用中,我们经常要面临的一个选择就是,用上面AJaH的方式还是下面Ajax的方式来组织数据。这并不是可以简单的一刀切的问题,很大程度上取决于开发者对各方面优劣的取舍。我在这里只把两者的优劣大概的列一下。
1 Ajax比较好听,有个球队叫阿贾克斯的就是这么拼的,AjaH就不知道要怎么念才好听了:)
2 AjaH解析起来更容易更快。按照约定包装好的数据只需要最少的加工就可以使用了,按照规范形式包装的数据需要相对复杂的解析过程
3 Ajax更加通用。用Ajax我们很容易就可以吧同一个CGI(广义的cgi)生成的xml数据使用在任何不同的场合,而不需要后台服务程序做出任何修改,用AjaH的话就很可能需要为相同的数据做出不同的版本。
4 AjaX更不容易出错,需要的时候我们可以建立DTD或者xmlschema来自动校验xml数据的正确性,二AjaH的正确性则需要手工验证来保障。
5 Ajax更容易维护和修改。AjaH的数据中往往整合了html/css美工效果和上下文相关的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放到同一个目录下发布即可运行。
本文全部原码下载