Ajax基础必读:AJAX中的一些关键技术（解析xml的封装类，以及操纵DOM对象）

ajax架构中主要涉及的技术：
client: javascript解析xml， 操纵DOM修改html页面，javascript是“OO”的语言。
server:  servlet + dao， 实现service接口即可

下面是client中主要的代码：
1。JS中封装解析xml的代码，以及实例应用。

//类的构造，传入xml文档和需要处理的标签名称
function DataSet(xmldoc, tagLabel) {
 this.rootObj = xmldoc.getElementsByTagName(tagLabel)
 
//3个方法
 this.getCount = getCount
 this.getData = getData
 this.getAttribute = getAttribute
}

function getCount(){
 return this.rootObj.length
}
function getData(index, tagName){
 if (index >= this.count) return "index overflow"
 var node = this.rootObj[index]
 var str = node.getElementsByTagName(tagName)[0].firstChild.data
 return str
}

function getAttribute(index, tagName) {
 if (index >= this.count) return "index overflow"
 var node = this.rootObj[index]
 var str = node.getAttribute(tagName)
 return str
}
//如何使用DataSet类
function updateByXML(xmlDoc) { 
 
      var employeeDS = new DataSet(xmlDoc,"employee");  //关心的标签名称 
      var count = employeeDS.getCount()
      for(i=0;i<count;i++) {
      var name = employeeDS.getAttribute(i,"name")
      var job = employeeDS.getData(i,"job")
      var salary = employeeDS.getData(i,"salary")  
      alert(name + "," + job + "," + salary)
 }
 //使用的xml格式，类似如下
<?xml version="1.0" encoding="gb2312"?>
<employees>
     <employee name="Billgates">
          <job>Programmer</job>
          <salary>32768</salary>
     </employee>
     <employee name="王涛">
          <job>无业游民</job>
          <salary>70000</salary>
     </employee>
     <employee name="Big 中华">
          <job>哈尔滨CEO</job>
          <salary>100000</salary>
     </employee>
</employees>


2。操纵DOM，创建table，显示获得的数据

function deleteOldTable() {
 delRow = document.getElementsByTagName("table").length
 //此句仅在本例中使用，因为本例中已经有一个table了，因此不能删除，需要根据情况变化一下2005.11.17
 if(delRow == 1) return
 
 var node = document.getElementsByTagName("table")[delRow-1]; //表格
 var c = node.childNodes.length
 for(i=0;i<c;i++)
 node.removeChild(node.childNodes[0]); //删除全部单元行
}

//传入DataSet的一个实例即可
function makeTable(m_ds) {

 deleteOldTable()     //先清除以前的结果

 var table = document.createElement("table");
 table.setAttribute("border","1");
 table.setAttribute("width","100%");

 document.body.appendChild(table);
 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("工资"));

 for(var i=0;i<m_ds.getCount();i++) {  
  var name = m_ds.getAttribute(i,"name")
  var job = m_ds.getData(i,"job")
  var salary = m_ds.getData(i,"salary")
  
  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));
 }
}