说的是使用ajax进行架构设计时候, 从server端返回展现层数据的几种方式

   xml,纯文本(responseText),json对象等等

在google上搜索 “Ajax 的 Java 对象序列化”即可
作者Philip McCarthy  


使用ajax框架后,展现数据的任务就由原来的jsp转移到了前端javascript身上,server端仅仅提供符合条件的数据(通过xml或text等方式)。
在client端,应该通过操纵DOM对象实现页面的更新,DOM就是html的树形表达结构(与 xml有类似之处);

实际上开发ajax的关键之处就在于如何 在javascript中方便的解析出所需要的信息,并且方便的在界面上展现出来。


可以参考
http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
上面的文章“AJAX开发简略”,里面介绍了关于DOM的操作细节。


另外应该考虑在javascript中应用 OO 思想,开发出类似MS的dataset的东西,用如下的方式访问:

<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="J.Doe">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="A.Baker">
<job>Sales</job>
<salary>70000</salary>
</employee>
<employee name="Big Cheese">
<job>CEO</job>
<salary>100000</salary>
</employee>
</employees>

解析后:

dataset.getCount()    //返回 3  表示3个employee 

   dataset.getAttribute(1,"name")    //返回 'J.Doe'
    dataset.getData(1,"job")    //返回'Programmer'
 dataset.getData(2,"salary")    //返回'70000'


此处的dataset只特定于本文格式的xml,应给能够应付大部分情况;
其余的复杂情况,可以改写dataset即可类似实现。

得到dataset后,就可以操纵DOM界面中的table等(getElementsByTagName.....)方法,完成界面更新

 下面就是依据xml文档创建table的function
function makeTable(xmldoc, url) {
 var table = document.createElement("table");
 table.setAttribute("border","1");
 table.setAttribute("width","600");
 table.setAttribute("class","tab-content");
 document.body.appendChild(table);
 var caption = "Employee Data from " + url;
 table.createCaption().appendChild(document.createTextNode(caption));
 var header = table.createTHead();
 var headerrow = header.insertRow(0);
 headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
 headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
 headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
 var employees = xmldoc.getElementsByTagName("employee");
 for(var i=0;i<employees.length;i++) {
  var e = employees[i];
  var name = e.getAttribute("name");
  var job = e.getElementsByTagName("job")[0].firstChild.data;
  var salary = e.getElementsByTagName("salary")[0].firstChild.data;
  var row = table.insertRow(i+1);
  row.insertCell(0).appendChild(document.createTextNode(name));
  row.insertCell(1).appendChild(document.createTextNode(job));
  row.insertCell(2).appendChild(document.createTextNode(salary));
 }
}