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

首先介绍个网站(http://www.w3school.com.cn) 上面的东西值得参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容.

http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=2042661

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 >
<!-- begin stylesheet -->
< 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 >
<!-- end stylesheet -->
< 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里脚本,做成类库,便于复用.以后有时间在更新啦~

by(非常好的工具,特别是Aptana,写js太棒了)