解析AJAX中的一些关键技术_AJAX教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:实现基于Ajax的无限级菜单
现在到处都有这方面的教程,我重点说一下我自己搞的一个框架。 特点: 支持Form的无闪提交(方法有点笨) 支持MVC框架,即支持传统网页架构 多线程并发请求(要语言支持线程) 动态加载文件,只加载有用的!处理了Ajax框架臃肿的JS文件问题。 采用no tabl

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

下面是client中主要的代码:
1。JS中封装解析xml的代码,以及实例应用。
Quote
//类的构造,传入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,显示获得的数据
Quote
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));
}
}
 

分享:详谈WEB 2.0中AJAX的应用
最近互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括 使用XHTML和

来源:模板无忧//所属分类:AJAX教程/更新时间:2010-05-27
相关AJAX教程