Ajax讀取數據到表格的實現代碼
2024-09-01 08:29:15
供稿：網友
今天我們要講的是：使用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){
