Ajax实现定时刷新,获取后台数据(实现技术ASP)

最新推荐文章于 2021-08-05 20:50:44 发布

wmnmtm

最新推荐文章于 2021-08-05 20:50:44 发布

阅读量750

点赞数

本文链接：https://blog.csdn.net/wmnmtm/article/details/82922202

版权

Ajax实现定时刷新,获取后台数据(实现技术ASP)
首先介绍个网站( http://www.w3school.com.cn) 上面的东西值得参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容.
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>
</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里脚本,做成类库,便于复用