快捷導(dǎo)航

Ajax讀取數(shù)據(jù)到表格的實現(xiàn)代碼

更新時間：2010年10月25日 21:12:19 作者：

前兩篇我們講了 ajax開始的準備與及如何使用ajax技術(shù)進行簡單的數(shù)據(jù)讀?。?/div>

今天我們要講的是：使用Ajax無刷新技術(shù)讀取服務(wù)端多條數(shù)據(jù)，并將返回的數(shù)據(jù)顯示到一個表格內(nèi)．同時我還將展示，如何使用JavaScript腳本和Dom接口，來為網(wǎng)頁創(chuàng)建一個表格．將ajax請求的數(shù)據(jù)顯示到該表格內(nèi)．
本次的ajax實例效果中請求的服務(wù)端網(wǎng)頁依然是：Web_ajax.Asp　該網(wǎng)頁使用了Asp輸出xml技術(shù)．如果你還不知道如何使用Asp輸出xml請返回：＂ajax開始準備篇＂
提醒：在每篇ajax教程的實例開始之前，你必須查看當天的Web_ajax.asp文件中的數(shù)據(jù)結(jié)構(gòu)．因為我們每次實例中要讀取的標簽和內(nèi)容都不一樣．點擊：查看Web_ajax.Asp

復(fù)制代碼代碼如下:

 
<% 
'出自：http://Www.Web666.Net 
'作者：康董 
'如需轉(zhuǎn)載請務(wù)必保留以上信息 
'定義一個變量，來保存xml數(shù)據(jù) 
dim xml 
xml = "<?xml version='1.0' encoding='gb2312'?><body>" 
xml = xml&"<msg>一個簡單的Asp輸出xml的示例，以后在我們的ajax教程實例中，我們都將使用該文件進行數(shù)據(jù)的讀取操作</msg>" 
xml=xml&"</body>" 
Response.Clear 
Response.ContentType="text/xml" 
Response.CharSet="gb2312" 
Response.Write xml 
Response.End 
%> 

上次我們讀取的是msg標簽．今天我們要讀取xml中新增的read標簽．我們要實現(xiàn)的效果是：將read標簽下的Html，Css，Dom，JavaScript，Ajax這些文本內(nèi)容．顯示到我們網(wǎng)頁中的表格內(nèi)．
先看下面的代碼．和實例演示

復(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ā)送請求函數(shù) 
function Post(){ 
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量． 
ajax.open("post","web_ajax.asp",true);//設(shè)置請求方式，請求文件，異步請求 
ajax.onreadystatechange = function(){//你也可以這里指定一個已經(jīng)寫好的函數(shù)名稱 
if(ajax.readyState==4){//數(shù)據(jù)返回成功 
if(ajax.status==200){//http請求狀態(tài)碼返回ok 
var xmlData = ajax.responseXML;//接收返回xml格式數(shù)據(jù) 
var read = xmlData.getElementsByTagName("read");//獲取所有的read標簽 
if(read.length!=0){ 
var t = document.createElement("table");//創(chuàng)建一個表格元素 
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ù)篇＂進行對比．
下面我們來講一下今天新增的代碼的作用．

if read.length!=0：即判斷read標簽是否被成功獲?。绻鋖egnth屬性不等于0，則代表read已經(jīng)存在．可以對其進行解析
開始解析返回數(shù)據(jù)，但網(wǎng)頁中并沒有存在顯示數(shù)據(jù)的元素．所以我們創(chuàng)建一個表格：var t = document.createElement("table");．請參考：createElement
t.setAttribute("border","1");為表格添加一個邊框?qū)傩裕垍⒖迹簊etAttribute
document.body.appendChild(t);將創(chuàng)建好的表格添加到網(wǎng)頁body元素內(nèi)．請參考：appendChild
表格添加完成．開始遍歷read標簽內(nèi)的所有子元素．也就是：html,css,dom,javascript,ajax這些內(nèi)容．
開始一個循環(huán),read[0].childNodes.length的意思是獲取read標簽內(nèi)所有子元素的個數(shù)．在這里會返回5． i=0;i<5條件ok! 每循環(huán)一次i變量會自動+1，表格會增加一行，并為該行增加一列．同時為這一列寫入read第i個子元素的文本內(nèi)容．直到i=5,i不會再小于read子元素的個數(shù)．條件不滿足．循環(huán)停止．此時數(shù)據(jù)正好被顯示完畢！
為了讓每位讀者加深理解．我再陳述一遍該實例效果的實現(xiàn)流程：當你點擊了＂顯示數(shù)據(jù)＂按扭時，Post函數(shù)被啟用，函數(shù)內(nèi)一個名字為ajax的變量被賦值XMLHTTPRequest對象的引用．然后便打開了open方法．并使用send方法向服務(wù)端發(fā)出請求．無論是open還是send方法，都會引發(fā)readyState方法的狀態(tài)值發(fā)生變化．一旦readyState發(fā)生變化就會觸發(fā)onreadystatechange屬性． onreadystatechange屬性指定的程序?qū)?zhí)行．然后在程序內(nèi)再次判斷readyState的狀態(tài)值是否等于4，如果是則證明整個發(fā)送請求與服務(wù)端返回數(shù)據(jù)已經(jīng)成功．同時并判斷status是否等200，如果是則代表http請狀態(tài)碼也已經(jīng)ok!此時可以放心的百分之百的接收數(shù)據(jù)，于是我們使用responseXML屬性來接收返回的數(shù)據(jù)．該屬性只限制接收xml格式的數(shù)據(jù)．我始終認為將xml格式的數(shù)據(jù)做為請求與回傳的中介．是ajax最標準的使用方法！
今天的ajax實例教程--＂ajax之讀取數(shù)據(jù)到表格＂就告一段落．我想是不是應(yīng)該留個問題讓各位讀者來解決一下？各位有沒有發(fā)現(xiàn)在實例演示中．你如果重復(fù)點擊＂顯示數(shù)據(jù)＂按扭．表格會被重復(fù)的創(chuàng)建．數(shù)據(jù)也會被重復(fù)的讀取．我希望各位讀者可以解決該問題．
下次我們來講：＂ajax添加數(shù)據(jù)實時讀取篇＂

您可能感興趣的文章: