Asp+Ajax实现定时刷新,获取后台数据

新出一张图。

Don’t make me t

Jul 18

零度溫柔 , 10:38 , 网摘杂文 , 评论(2) , 引用(0) , 阅读(1671) , Via 本站原创

大 | 中 | 小

Now()

开始我们的主题 -> 本文内容转自于：西宁威势电子信息服务有限公司

这里我们用Access作为数据库,建个数据库名称为user.mdb和update.html,update.asp放同一目录,再建表,如下

ok,非常简单,为了演示吗呵呵~!!~!本文内容转自于：西宁威势电子信息服务有限公司

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</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>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 55 ms, 9 Queries.</span>";
//]]>
</script></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是没有问题的.本文