首先介绍个网站(http://www.w3school.com.cn) 上面的东西值得参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容.
http://tb.blog.csdn.net/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 >
< 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
% >
< %
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太棒了)