解析AJAX中的一些關鍵技術_AJAX教程
教程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>
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>
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));
}
}
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教程:
- 相關鏈接:
- 教程說明:
AJAX教程-解析AJAX中的一些關鍵技術
。