溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Ajax中怎么讀取數據到表格，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
代碼如下:
<%
'出自：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中怎么讀取數據到表格的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
