Ajax还是Ajah，这是个问题

Ajax还是Ajah，这是个问题

在上一篇《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放到同一个目录下发布即可运行。

本文全部原码下载