Ajax还是Ajah，这是个问题-技术开发专区

Ajax还是Ajah，这是个问题

作者：emu 编辑：王竹岩 2006-05-31 17:29

【IT168 技术文档】

　　在上一篇《Ajax裸奔》中，我们定义了如此一个xml文件：

　　news.xml:

<?xml version="1.0" encoding="gb2312"?>
<data>
 焦点|工行小额账户明年收费 不足300元要归并&lt;br /&gt;
 财经|&quot;神六&quot;飞行开销仅为美航天飞机4.5% 花9亿&lt;br /&gt;
 财经|2005能源富豪榜揭榜 超市要撤致癌保鲜膜&lt;br /&gt;
 证券|神六催生高价股 MBO公司股改 高管一夜暴富&lt;br /&gt;
 证券|保险公司告基金利益输送 科龙管理班子亮相 &lt;br /&gt;
 科技|神六飞船成功着陆 载人飞行取得圆满成功&lt;br /&gt;
 关注|索尼中国不裁员 夏普与南京熊猫分道扬镳 &lt;br /&gt;
 热点|北电任命新总裁兼CEO 索爱发布第三季财报&lt;br /&gt;
 数码|300万像素手机推荐 最有降价潜力手机导购&lt;br /&gt;
 测评|近期五大DC跳水王 怪模怪样个性手机推荐&lt;br /&gt;
 探索|亚历山大古城的文化历史 胜利者改写历史 &lt;br /&gt;
</data>

　　这确确实实是一个合法的xml文件，但是不是一个漂亮的xml文件。xml语言的一个巨大的优势是自说明性。上面这个xml语言只说明了一件事：我有一堆数据（data标记），大家拿去用阿。可是怎么用呢，只能靠约定了。

　　一个漂亮一点的xml应该像这样：

　　news2.xml:

<?xml version="1.0" encoding="gb2312"?>
<newsList>
 <title type="焦点">工行小额账户明年收费 不足300元要归并</title>
 <title type="财经">&quot;神六&quot;飞行开销仅为美航天飞机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放到同一个目录下发布即可运行。

关注我们