Ajax讀取資料到表格的實現代碼_AJAX相關

來源:互聯網
上載者:User
今天我們要講的是:使用Ajax無重新整理技術讀取服務端多條資料,並將返回的資料顯示到一個表格內.同時我還將展示,如何使用JavaScript指令碼和Dom介面,來為網頁建立一個表格 .將ajax請求的資料顯示到該表格內.
本次的ajax執行個體效果中請求的服務端網頁依然是:Web_ajax.Asp 該網頁使用了Asp輸出xml技術.如果你還不知道如何使用Asp輸出xml請返回:"ajax開始準備篇"
提醒:在每篇ajax教程的執行個體開始之前,你必須查看當天的Web_ajax.asp檔案中的資料結構.因為我們每次執行個體中要讀取的標籤和內容都不一樣.點擊:查看Web_ajax.Asp
複製代碼 代碼如下:

<%
'出自:http://Www.Web666.Net
'作者:康董
'如需轉載請務必保留以上資訊
'定義一個變數,來儲存xml資料
dim xml
xml = "<?xml version='1.0' encoding='gb2312'?><body>"
xml = xml&"<msg>一個簡單的Asp輸出xml的樣本,以後在我們的ajax教程執行個體中,我們都將使用該檔案進行資料的讀取操作</msg>"
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.Write xml
Response.End
%>

上次我們讀取的是msg標籤.今天我們要讀取xml中新增的read標籤.我們要實現的效果是:將read標籤下的Html,Css,Dom,JavaScript,Ajax這些常值內容.顯示到我們網頁中的表格內.
先看下面的代碼.和執行個體示範
複製代碼 代碼如下:

<html>
<head>
<title>ajax讀取資料到表格</title>
</head>
<body>
<input type="button" value="顯示資料" onclick="Post()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中建立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;
}
} //迴圈建立基於IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器,則建立基於FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}

//發送請求函數
function Post(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變數.
ajax.open("post","web_ajax.asp",true);//佈建要求方式,請求檔案,非同步請求
ajax.onreadystatechange = function(){//你也可以這裡指定一個已經寫好的函數名稱
if(ajax.readyState==4){//資料返回成功
if(ajax.status==200){//http請求狀態代碼返回ok
var xmlData = ajax.responseXML;//接收返回xml格式資料
var read = xmlData.getElementsByTagName("read");//擷取所有的read標籤
if(read.length!=0){
var t = document.createElement("table");//建立一個表格元素
t.setAttribute("border","1");
document.body.appendChild(t);//將表格添加到doby內
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;//為儲存格寫入常值內容
}
}
}
}
}
ajax.send(null);
}
</script>
</body>
</html>

今天我們不再講昨天重複過的內容.同樣在Post的函數內.多了幾行代碼.可以跟上一篇"ajax初始讀取資料篇"進行對比.
下面我們來講一下今天新增的代碼的作用.

if read.length!=0:即判斷read標籤是否被成功擷取.如果其legnth屬性不等於0,則代表read已經存在.可以對其進行解析
開始解析返回資料,但網頁中並沒有存在顯示資料的元素.所以我們建立一個表格:var t = document.createElement("table");.請參考:createElement
t.setAttribute("border","1");為表格添加一個邊框屬性.請參考:setAttribute
document.body.appendChild(t);將建立好的表格添加到網頁body元素內.請參考:appendChild
表格添加完成.開始遍曆read標籤內的所有子項目.也就是:html,css,dom,javascript,ajax這些內容.
開始一個迴圈,read[0].childNodes.length的意思是擷取read標籤內所有子項目的個數.在這裡會返回5. i=0;i<5條件ok! 每迴圈一次i變數會自動+1,表格會增加一行,並為該行增加一列.同時為這一列寫入read第i個子項目的常值內容.直到i=5,i不會再小於read子項目的個數.條件不滿足.迴圈停止.此時資料正好被顯示完畢!
為了讓每位讀者加深理解.我再陳述一遍該執行個體效果的實現流程:當你點擊了"顯示資料"按扭時,Post函數被啟用,函數內一個名字為ajax的變數被賦值XMLHTTPRequest對象的引用.然後便開啟了open方法.並使用send方法向服務端發出請求.無論是open還是send方法,都會引發readyState方法的狀態值發生變化.一旦readyState發生變化就會觸發onreadystatechange屬性. onreadystatechange屬性指定的程式將會執行.然後在程式內再次判斷readyState的狀態值是否等於4,如果是則證明整個發送請求與服務端返回資料已經成功.同時並判斷status是否等200,如果是則代表http請狀態代碼也已經ok!此時可以放心的百分之百的接收資料,於是我們使用responseXML屬性來接收返回的資料.該屬性只限制接收xml格式的資料.我始終認為將xml格式的資料做為請求與回傳的中介.是ajax最標準的使用方法!
今天的ajax執行個體教程--"ajax之讀取資料到表格"就告一段落.我想是不是應該留個問題讓各位讀者來解決一下?各位有沒有發現在執行個體示範中.你如果重複點擊"顯示資料"按扭.表格會被重複的建立.資料也會被重複的讀取.我希望各位讀者可以解決該問題.
下次我們來講:"ajax添加資料即時讀取篇"
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.