Ajax實現定時重新整理,擷取後台資料(實現技術ASP)

最後更新：2018-07-17 來源：互聯網

上載者：User

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

參考比如XML DOM,HTML Dom,javascript.在開發Ajax應用的時候,隨時可以找到你需要的內容.
Now(),開始我們的主題:

這裡我們用Access作為資料庫,建個資料庫名稱為user.mdb和update.html,update.asp放同一目錄,再建表

update.html頁面,不用解釋太多,裡面有注釋

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Untitled Document 網絡大本營 http://www.qqview.com</title>

<style type="text/css">
table.news_table ...{
border: 1px;
border-style: dotted;
border-color: #00CC99;
border-top: 0;
font-size: 14px;
background: #FFFFFF;
color: #669999;
}
table.news_table thead tr ...{
color: #FFFFFF;
background: #0099CC;
border-bottom: 2px solid #FF0000;
padding: 2px 10px;
}
table.news_table tbody tr ...{
padding: 2px 10px;
}
</style>

<script type="text/javascript" language="javascript">
var timeout = null; //setInterval函數控制代碼
var xmlHttp = false; //
//初始化XMLHttpRequest對象
function createXmlHttp()...{
    xmlHttp = false;
    if (window.ActiveXObject) ...{
        try ...{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}
        catch (e) ...{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
    }else if (window.XMLHttpRequest) ...{xmlHttp = new XMLHttpRequest();}
}
//非同步呼叫update.asp頁面擷取結果timestamp為了不讓瀏覽器緩衝結果
function sendRequest()...{
    createXmlHttp();
    var url = "update.asp?timestamp=" + new Date().getTime();
    if (!xmlHttp) ...{
        alert("XMLHttpRequest is not Create!");
    }
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = function()...{//回呼函數開始
        var tag = document.getElementById("container");
        tag.innerHTML = "";
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) ...{
        tag.innerHTML = xmlHttp.responseText;
        }
    }//回呼函數結束
xmlHttp.send(null);
}
//開始自動重新整理
function update()...{
timeout = window.setInterval("sendRequest()", 4000);//設定4秒調用一次update.asp頁面
}
//停止自動重新整理
function Stopupdate()...{
if (timeout != null) ...{
window.clearInterval(timeout);
}
}
</script>
</head>
<body onLoad="sendRequest();">
<input type="button" value="Start Fresh" onClick="update();"/>
<input type="button" value="Stop Fresh" onClick="Stopupdate();"/>
<div id="container"></div>
</body>
</html>

update.asp頁面,伺服器返回資料,被update.html的XMLHttpRequest對象非同步呼叫,代碼如下

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
dim conn,rs,sql
set conn=server.CreateObject("ADODB.Connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("user.mdb")
set rs=server.CreateObject("ADODB.RecordSet")
sql="select top 10 * from news order by Ttime desc"
rs.open sql,conn,1,3
%>
<table class="news_table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Id</td><td>Title</td><td>Ower</td><td>Time</td><td>Content</td>
</tr>
</thead>
<tbody>
<%'---擷取結構填充表格---
if rs.bof and rs.eof then
response.Write("no record")
else
while not rs.eof
response.Write("<tr>")
response.Write("<td>"&rs("id")&"</td>")
response.Write("<td>"&rs("title")&"</td>")
response.Write("<td>"&rs("ower")&"</td>")
response.Write("<td>"&rs("Ttime")&"</td>")
response.Write("<td>"&rs("content")&"</td>")
response.Write("</tr>")
rs.movenext
wend
end if
'---擷取結構填充表格-
%>
</tbody>
</table>
<%
'為了每次調用這個面可以看到更新的結果集,特意在每次調用本頁時添加一條記錄
rs.addNew
rs("title")=now()&"--title"
rs("ower")=request.QueryString("timestamp")
rs("content")="--content"&now()
rs.update
'釋放資源
rs.close
set rs=nothing
conn.close
set conn=nothing
%>

開啟ie測試:(FireFox下也成功運行了),注意觀察Time列,我們在update.html設定的更新頻率是4秒,反應到update.asp頁面查詢也是4秒,證明這個test是沒有問題的.

一個簡單的定時重新整理頁面就這樣完成了,不過在這裡我們可以把updaet.html裡指令碼,做成類庫,便於複用.

本文章原先以中文撰寫並發佈於 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