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

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

同時我還將展示，如何使用JavaScript指令碼和Dom介面，來為網頁建立一個表格．將ajax請求的資料顯示到該表格內．
本次的ajax執行個體效果中請求的服務端網頁依然是：Web_ajax.Asp　該網頁使用了Asp輸出xml技術．如果你還不知道如何使用Asp輸出xml請返回：＂ajax開始準備篇＂
提醒：在每篇ajax教程的執行個體開始之前，你必須查看當天的Web_ajax.asp檔案中的資料結構．因為我們每次執行個體中要讀取的標籤和內容都不一樣．點擊：查看Web_ajax.Asp
上次我們讀取的是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添加資料即時讀取篇＂
出自：http://Www.Web666.Net
作者：康董

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More