解析AJAX中的一些關(guān)鍵技術(shù)_AJAX教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
推薦:實(shí)現(xiàn)基于Ajax的無(wú)限級(jí)菜單現(xiàn)在到處都有這方面的教程,我重點(diǎn)說(shuō)一下我自己搞的一個(gè)框架。 特點(diǎn): 支持Form的無(wú)閃提交(方法有點(diǎn)笨) 支持MVC框架,即支持傳統(tǒng)網(wǎng)頁(yè)架構(gòu) 多線程并發(fā)請(qǐng)求(要語(yǔ)言支持線程) 動(dòng)態(tài)加載文件,只加載有用的!處理了Ajax框架臃腫的JS文件問(wèn)題。 采用no tabl
ajax架構(gòu)中主要涉及的技術(shù):client: javascript解析xml, 操縱DOM修改html頁(yè)面,javascript是“OO”的語(yǔ)言。
server: servlet + dao, 實(shí)現(xiàn)service接口即可
下面是client中主要的代碼:
1。JS中封裝解析xml的代碼,以及實(shí)例應(yīng)用。
Quote
//類(lèi)的構(gòu)造,傳入xml文檔和需要處理的標(biāo)簽名稱(chēng)
function DataSet(xmldoc, tagLabel) {
this.rootObj = xmldoc.getElementsByTagName(tagLabel)
//3個(gè)方法
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類(lèi)
function updateByXML(xmlDoc) {
var employeeDS = new DataSet(xmlDoc,"employee"); //關(guān)心的標(biāo)簽名稱(chēng)
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格式,類(lèi)似如下
<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="Billgates">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="王濤">
<job>無(wú)業(yè)游民</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個(gè)方法
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類(lèi)
function updateByXML(xmlDoc) {
var employeeDS = new DataSet(xmlDoc,"employee"); //關(guān)心的標(biāo)簽名稱(chēng)
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格式,類(lèi)似如下
<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="Billgates">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="王濤">
<job>無(wú)業(yè)游民</job>
<salary>70000</salary>
</employee>
<employee name="Big 中華">
<job>哈爾濱CEO</job>
<salary>100000</salary>
</employee>
</employees>
Quote
function deleteOldTable() {
delRow = document.getElementsByTagName("table").length
//此句僅在本例中使用,因?yàn)楸纠幸呀?jīng)有一個(gè)table了,因此不能刪除,需要根據(jù)情況變化一下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的一個(gè)實(shí)例即可
function makeTable(m_ds) {
deleteOldTable() //先清除以前的結(jié)果
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("職業(yè)"));
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
//此句僅在本例中使用,因?yàn)楸纠幸呀?jīng)有一個(gè)table了,因此不能刪除,需要根據(jù)情況變化一下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的一個(gè)實(shí)例即可
function makeTable(m_ds) {
deleteOldTable() //先清除以前的結(jié)果
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("職業(yè)"));
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的應(yīng)用最近互聯(lián)網(wǎng)上比較火熱的話題當(dāng)然是關(guān)于WEB2.0的應(yīng)用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫(xiě)。它并不是一門(mén)新的語(yǔ)言或技術(shù),它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括 使用XHTML和
相關(guān)AJAX教程:
- Ajax中瀏覽器的緩存問(wèn)題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- Ajax實(shí)現(xiàn)靜態(tài)刷新頁(yè)面過(guò)程帶加載旋轉(zhuǎn)圖片
- 基于AJAX技術(shù)實(shí)現(xiàn)Struts校驗(yàn)框架
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- Ajax程序中,自己實(shí)現(xiàn)頁(yè)面前進(jìn)、后退、與標(biāo)簽功能(asp.net2.0)
- adapter和facade模式在Ajax中的應(yīng)用
- AJAX和傳統(tǒng)的ASP無(wú)刷新技術(shù)比較
- AJAX憂慮與啟發(fā)成也腳本,敗也腳本
- 解讀AJAX是否能夠取代桌面應(yīng)用程序
- AJAX教程之由省份選擇城市
- javascript Ajax獲取遠(yuǎn)程url的返回判斷
猜你也喜歡看這些
- 使用JavaScript和Ajax發(fā)出異步請(qǐng)求(1)
- ajax中文亂碼問(wèn)題解決方案
- 如何用ajax、asp編寫(xiě)的查詢(xún)程序
- 用AJAX編寫(xiě)用戶(hù)注冊(cè)實(shí)例及技術(shù)小結(jié)
- ajax跨域訪問(wèn)代理文件下載(asp、php、asp.net)
- AJAX技術(shù)開(kāi)發(fā)Back按鈕問(wèn)題的應(yīng)用程序
- 解析AJAX中的一些關(guān)鍵技術(shù)
- AJAX避免用戶(hù)重復(fù)提交請(qǐng)求實(shí)現(xiàn)方案
- 揭秘在AJAX程序中實(shí)現(xiàn)互斥
- 淺談Ajax的缺點(diǎn)
- 相關(guān)鏈接:
- 教程說(shuō)明:
AJAX教程-解析AJAX中的一些關(guān)鍵技術(shù)。