Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼
更新時(shí)間：2010年08月12日 16:39:20 作者：
前兩篇我們講了＂ajax開始的準(zhǔn)備＂與及如何使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀?。裉煳覀円v的是：使用Ajax無刷新技術(shù)讀取服務(wù)端多條數(shù)據(jù)，并將返回的數(shù)據(jù)顯示到一個(gè)表格內(nèi)．
同時(shí)我還將展示，如何使用JavaScript腳本和Dom接口，來為網(wǎng)頁創(chuàng)建一個(gè)表格 ．將ajax請(qǐng)求的數(shù)據(jù)顯示到該表格內(nèi)．
本次的ajax實(shí)例效果中請(qǐng)求的服務(wù)端網(wǎng)頁依然是：Web_ajax.Asp 該網(wǎng)頁使用了Asp輸出xml技術(shù)．如果你還不知道如何使用Asp輸出xml請(qǐng)返回：＂ajax開始準(zhǔn)備篇＂
提醒：在每篇ajax教程的實(shí)例開始之前，你必須查看當(dāng)天的Web_ajax.asp文件中的數(shù)據(jù)結(jié)構(gòu)．因?yàn)槲覀兠看螌?shí)例中要讀取的標(biāo)簽和內(nèi)容都不一樣．點(diǎn)擊：查看Web_ajax.Asp
上次我們讀取的是msg標(biāo)簽．今天我們要讀取xml中新增的read標(biāo)簽．我們要實(shí)現(xiàn)的效果是：將read標(biāo)簽下的Html，Css，Dom，JavaScript，Ajax這些文本內(nèi)容．顯示到我們網(wǎng)頁中的表格內(nèi)．
先看下面的代碼．和實(shí)例演示
<html>
<head>
<title>ajax讀取數(shù)據(jù)到表格</title>
</head>
<body>
<input type="button" value="顯示數(shù)據(jù)" onclick="Post()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中創(chuàng)建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結(jié)束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//發(fā)送請(qǐng)求函數(shù)
function Post(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對(duì)象賦值給一個(gè)變量．
ajax.open("post","web_ajax.asp",true);//設(shè)置請(qǐng)求方式，請(qǐng)求文件，異步請(qǐng)求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState==4){//數(shù)據(jù)返回成功
if(ajax.status==200){//http請(qǐng)求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//接收返回xml格式數(shù)據(jù)
var read = xmlData.getElementsByTagName("read");//獲取所有的read標(biāo)簽
if(read.length!=0){
var t = document.createElement("table");//創(chuàng)建一個(gè)表格元素
t.setAttribute("border","1");
document.body.appendChild(t);//將表格添加到doby內(nèi)
for(var i=0;i<read[0].childNodes.length;i++){
var tr = t.insertRow(t.rows.length);//添加一行
var td = tr.insertCell(0);//添加一列
td.innerHTML = read[0].childNodes[i].firstChild.nodeValue;//為單元格寫入文本內(nèi)容
}
}
}
}
}
ajax.send(null);
}
</script>
</body>
</html>
今天我們不再講昨天重復(fù)過的內(nèi)容．同樣在Post的函數(shù)內(nèi)．多了幾行代碼．可以跟上一篇＂ajax初始讀取數(shù)據(jù)篇＂進(jìn)行對(duì)比．
下面我們來講一下今天新增的代碼的作用．
if read.length!=0：即判斷read標(biāo)簽是否被成功獲取．如果其legnth屬性不等于0，則代表read已經(jīng)存在．可以對(duì)其進(jìn)行解析
開始解析返回?cái)?shù)據(jù)，但網(wǎng)頁中并沒有存在顯示數(shù)據(jù)的元素．所以我們創(chuàng)建一個(gè)表格：var t = document.createElement("table");．請(qǐng)參考：createElement
t.setAttribute("border","1");為表格添加一個(gè)邊框?qū)傩裕?qǐng)參考：setAttribute
document.body.appendChild(t);將創(chuàng)建好的表格添加到網(wǎng)頁body元素內(nèi)．請(qǐng)參考：appendChild
表格添加完成．開始遍歷read標(biāo)簽內(nèi)的所有子元素．也就是：html,css,dom,javascript,ajax這些內(nèi)容．
開始一個(gè)循環(huán),read[0].childNodes.length的意思是獲取read標(biāo)簽內(nèi)所有子元素的個(gè)數(shù)．在這里會(huì)返回5． i=0;i<5條件ok! 每循環(huán)一次i變量會(huì)自動(dòng)+1，表格會(huì)增加一行，并為該行增加一列．同時(shí)為這一列寫入read第i個(gè)子元素的文本內(nèi)容．直到i=5,i不會(huì)再小于read子元素的個(gè)數(shù)．條件不滿足．循環(huán)停止．此時(shí)數(shù)據(jù)正好被顯示完畢！
為了讓每位讀者加深理解．我再陳述一遍該實(shí)例效果的實(shí)現(xiàn)流程：當(dāng)你點(diǎn)擊了＂顯示數(shù)據(jù)＂按扭時(shí)，Post函數(shù)被啟用，函數(shù)內(nèi)一個(gè)名字為ajax的變量被賦值XMLHTTPRequest對(duì)象的引用．然后便打開了open方法．并使用send方法向服務(wù)端發(fā)出請(qǐng)求．無論是open還是send方法，都會(huì)引發(fā)readyState方法的狀態(tài)值發(fā)生變化．一旦readyState發(fā)生變化就會(huì)觸發(fā)onreadystatechange屬性． onreadystatechange屬性指定的程序?qū)?huì)執(zhí)行．然后在程序內(nèi)再次判斷readyState的狀態(tài)值是否等于4，如果是則證明整個(gè)發(fā)送請(qǐng)求與服務(wù)端返回?cái)?shù)據(jù)已經(jīng)成功．同時(shí)并判斷status是否等200，如果是則代表http請(qǐng)狀態(tài)碼也已經(jīng)ok!此時(shí)可以放心的百分之百的接收數(shù)據(jù)，于是我們使用responseXML屬性來接收返回的數(shù)據(jù)．該屬性只限制接收xml格式的數(shù)據(jù)．我始終認(rèn)為將xml格式的數(shù)據(jù)做為請(qǐng)求與回傳的中介．是ajax最標(biāo)準(zhǔn)的使用方法！
今天的ajax實(shí)例教程--＂ajax之讀取數(shù)據(jù)到表格＂就告一段落．我想是不是應(yīng)該留個(gè)問題讓各位讀者來解決一下？各位有沒有發(fā)現(xiàn)在實(shí)例演示中．你如果重復(fù)點(diǎn)擊＂顯示數(shù)據(jù)＂按扭．表格會(huì)被重復(fù)的創(chuàng)建．?dāng)?shù)據(jù)也會(huì)被重復(fù)的讀取．我希望各位讀者可以解決該問題．
下次我們來講：＂ajax添加數(shù)據(jù)實(shí)時(shí)讀取篇＂
出自：http://Www.Web666.Net
作者：康董
本次的ajax實(shí)例效果中請(qǐng)求的服務(wù)端網(wǎng)頁依然是：Web_ajax.Asp 該網(wǎng)頁使用了Asp輸出xml技術(shù)．如果你還不知道如何使用Asp輸出xml請(qǐng)返回：＂ajax開始準(zhǔn)備篇＂
提醒：在每篇ajax教程的實(shí)例開始之前，你必須查看當(dāng)天的Web_ajax.asp文件中的數(shù)據(jù)結(jié)構(gòu)．因?yàn)槲覀兠看螌?shí)例中要讀取的標(biāo)簽和內(nèi)容都不一樣．點(diǎn)擊：查看Web_ajax.Asp
上次我們讀取的是msg標(biāo)簽．今天我們要讀取xml中新增的read標(biāo)簽．我們要實(shí)現(xiàn)的效果是：將read標(biāo)簽下的Html，Css，Dom，JavaScript，Ajax這些文本內(nèi)容．顯示到我們網(wǎng)頁中的表格內(nèi)．
先看下面的代碼．和實(shí)例演示
復(fù)制代碼 代碼如下:
<html>
<head>
<title>ajax讀取數(shù)據(jù)到表格</title>
</head>
<body>
<input type="button" value="顯示數(shù)據(jù)" onclick="Post()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中創(chuàng)建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結(jié)束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//發(fā)送請(qǐng)求函數(shù)
function Post(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對(duì)象賦值給一個(gè)變量．
ajax.open("post","web_ajax.asp",true);//設(shè)置請(qǐng)求方式，請(qǐng)求文件，異步請(qǐng)求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState==4){//數(shù)據(jù)返回成功
if(ajax.status==200){//http請(qǐng)求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//接收返回xml格式數(shù)據(jù)
var read = xmlData.getElementsByTagName("read");//獲取所有的read標(biāo)簽
if(read.length!=0){
var t = document.createElement("table");//創(chuàng)建一個(gè)表格元素
t.setAttribute("border","1");
document.body.appendChild(t);//將表格添加到doby內(nèi)
for(var i=0;i<read[0].childNodes.length;i++){
var tr = t.insertRow(t.rows.length);//添加一行
var td = tr.insertCell(0);//添加一列
td.innerHTML = read[0].childNodes[i].firstChild.nodeValue;//為單元格寫入文本內(nèi)容
}
}
}
}
}
ajax.send(null);
}
</script>
</body>
</html>
今天我們不再講昨天重復(fù)過的內(nèi)容．同樣在Post的函數(shù)內(nèi)．多了幾行代碼．可以跟上一篇＂ajax初始讀取數(shù)據(jù)篇＂進(jìn)行對(duì)比．
下面我們來講一下今天新增的代碼的作用．
if read.length!=0：即判斷read標(biāo)簽是否被成功獲取．如果其legnth屬性不等于0，則代表read已經(jīng)存在．可以對(duì)其進(jìn)行解析
開始解析返回?cái)?shù)據(jù)，但網(wǎng)頁中并沒有存在顯示數(shù)據(jù)的元素．所以我們創(chuàng)建一個(gè)表格：var t = document.createElement("table");．請(qǐng)參考：createElement
t.setAttribute("border","1");為表格添加一個(gè)邊框?qū)傩裕?qǐng)參考：setAttribute
document.body.appendChild(t);將創(chuàng)建好的表格添加到網(wǎng)頁body元素內(nèi)．請(qǐng)參考：appendChild
表格添加完成．開始遍歷read標(biāo)簽內(nèi)的所有子元素．也就是：html,css,dom,javascript,ajax這些內(nèi)容．
開始一個(gè)循環(huán),read[0].childNodes.length的意思是獲取read標(biāo)簽內(nèi)所有子元素的個(gè)數(shù)．在這里會(huì)返回5． i=0;i<5條件ok! 每循環(huán)一次i變量會(huì)自動(dòng)+1，表格會(huì)增加一行，并為該行增加一列．同時(shí)為這一列寫入read第i個(gè)子元素的文本內(nèi)容．直到i=5,i不會(huì)再小于read子元素的個(gè)數(shù)．條件不滿足．循環(huán)停止．此時(shí)數(shù)據(jù)正好被顯示完畢！
為了讓每位讀者加深理解．我再陳述一遍該實(shí)例效果的實(shí)現(xiàn)流程：當(dāng)你點(diǎn)擊了＂顯示數(shù)據(jù)＂按扭時(shí)，Post函數(shù)被啟用，函數(shù)內(nèi)一個(gè)名字為ajax的變量被賦值XMLHTTPRequest對(duì)象的引用．然后便打開了open方法．并使用send方法向服務(wù)端發(fā)出請(qǐng)求．無論是open還是send方法，都會(huì)引發(fā)readyState方法的狀態(tài)值發(fā)生變化．一旦readyState發(fā)生變化就會(huì)觸發(fā)onreadystatechange屬性． onreadystatechange屬性指定的程序?qū)?huì)執(zhí)行．然后在程序內(nèi)再次判斷readyState的狀態(tài)值是否等于4，如果是則證明整個(gè)發(fā)送請(qǐng)求與服務(wù)端返回?cái)?shù)據(jù)已經(jīng)成功．同時(shí)并判斷status是否等200，如果是則代表http請(qǐng)狀態(tài)碼也已經(jīng)ok!此時(shí)可以放心的百分之百的接收數(shù)據(jù)，于是我們使用responseXML屬性來接收返回的數(shù)據(jù)．該屬性只限制接收xml格式的數(shù)據(jù)．我始終認(rèn)為將xml格式的數(shù)據(jù)做為請(qǐng)求與回傳的中介．是ajax最標(biāo)準(zhǔn)的使用方法！
今天的ajax實(shí)例教程--＂ajax之讀取數(shù)據(jù)到表格＂就告一段落．我想是不是應(yīng)該留個(gè)問題讓各位讀者來解決一下？各位有沒有發(fā)現(xiàn)在實(shí)例演示中．你如果重復(fù)點(diǎn)擊＂顯示數(shù)據(jù)＂按扭．表格會(huì)被重復(fù)的創(chuàng)建．?dāng)?shù)據(jù)也會(huì)被重復(fù)的讀取．我希望各位讀者可以解決該問題．
下次我們來講：＂ajax添加數(shù)據(jù)實(shí)時(shí)讀取篇＂
出自：http://Www.Web666.Net
作者：康董
您可能感興趣的文章:
相關(guān)文章
活到老學(xué)到老學(xué)習(xí)AJAX跨域（三）
學(xué)習(xí)AJAX其實(shí)有個(gè)很重要的應(yīng)用，就是為了執(zhí)行另外幾個(gè)站點(diǎn)的ASP，返回結(jié)果。通過本文給大家介紹ajax跨域相關(guān)知識(shí)，需要的朋友參考下2016-02-02
表單上傳功能實(shí)現(xiàn) ajax文件異步上傳
這篇文章主要為大家詳細(xì)介紹了表單上傳功能和文件上傳功能實(shí)現(xiàn)，ajax文件異步上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
ajax請(qǐng)求成功后新開窗口window.open()被攔截解決方法
ajax 異步請(qǐng)求成功后需要新開窗口打開 url，使用的是 window.open() 方法，但是很可惜被瀏覽器給攔截了，怎么解決這個(gè)問題呢2014-09-09
快速解決ajax傳遞為空但顯示在頁面上為undefined的問題
今天小編就為大家分享一篇快速解決ajax傳遞為空但顯示在頁面上為undefined的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ajax請(qǐng)求返回的數(shù)據(jù)看不到回調(diào)函數(shù)沒有執(zhí)行也沒報(bào)錯(cuò)
ajax請(qǐng)求返回的數(shù)據(jù)看不到回調(diào)函數(shù)沒有執(zhí)行，哪里都沒有報(bào)錯(cuò)，有類似情況的朋友可以參考下本文2014-01-01
這篇文章主要為大家分享了Ajax創(chuàng)建簡單實(shí)例代碼，學(xué)習(xí)Ajax如何創(chuàng)建簡單實(shí)例，感興趣的小伙伴們可以參考一下2015-12-12
利用AJAX開源項(xiàng)目 在網(wǎng)頁里播放視頻實(shí)現(xiàn)方法
下載videobox 1.1.zip把它解壓到asp.net項(xiàng)目的目錄下，并用“Add New Item”新建一個(gè)Html文件用以播放視頻。2008-11-11
解決ajax回調(diào)函數(shù)返回的字符串亂碼問題
ajax回調(diào)函數(shù)，返回的字符串亂碼問題很是讓人痛恨，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-01-01
ajax局部刷新一個(gè)div下jsp內(nèi)容的方法
局部刷新某個(gè)div下的jsp可以通過setInterval或者是setTimeout來輕松實(shí)現(xiàn)，具體如下，有此需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
利用AJAX實(shí)現(xiàn)鼠標(biāo)懸浮獲取值的代碼
ajax實(shí)現(xiàn)將鼠標(biāo)放到圖標(biāo)上，下方會(huì)顯示和該圖有關(guān)的信息2009-12-12