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

最新推荐文章于 2021-08-05 18:21:39 发布

一把编程的菜刀

最新推荐文章于 2021-08-05 18:21:39 发布

阅读量6.5k

点赞数

文章标签： ajax asp xmlhttprequest function table vbscript

参考比如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里脚本,做成类库,便于复用.

一把编程的菜刀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ajax实现定时刷新,获取后台数据(实现技术ASP)

参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容. Now(),开始我们的主题:这里我们用Access作为数据库,建个数据库名称为user.mdb和update.html,update.asp放同一目录,再建表 update.html页面,不用解释太多,里面有注释http://www.w3.org/TR/html4/
复制链接

扫一扫