ajax.asp
<%
dim conn,rs
dim connstr
dim sqlcmd'创建数据库教程连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr
'用于从数据库中获取数据的sql语句
sqlcmd="select title,author,date,content from data order by date desc"
'创建数据集对象
set rs=server.createobject("adodb.recordset")'从数据库中获取数据
rs.open sqlcmd,conn,1,1%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>ajax guestbook</title>
<style type="text/css教程">
<!--
body { font-size:0.75em;text-align:center;}
dl { margin:0;}
dt { background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd { margin:3px;}
div { margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#postbox { margin-top:10px;}
dd.button { text-align:center;}
dd.button input { margin:0 20px;}
//-->
</style><script type="text/网页特效">
<!--
//将用户输入异步提交到服务器
function ajaxsubmit(){
//获取用户输入
var title=document.forms[0].title.value;
var author=document.forms[0].author.value;
var content=document.forms[0].content.value;
//创建xmlhttprequest对象
var xmlhttp;
try{
xmlhttp=new xmlhttprequest();
}catch(e){
xmlhttp=new activexobject("microsoft.xmlhttp");
}
//创建请求结果处理程序
xmlhttp.onreadystatechange=function(){
if (4==xmlhttp.readystate){
if (200==xmlhttp.status){
var date=xmlhttp.responsetext;
addtolist(date);
}else{
alert("error");
}
}
}
//打开连接，true表示异步提交
xmlhttp.open("post", "ajaxadd.asp", true);
//当方法为post时需要如下设置http头
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded');
//发送数据
xmlhttp.send("title="+escape(title)+"&author="+escape(author)+"&content="+escape(content));
}//将用户输入显示到页面
function addtolist(date){
//获取留言列表div容器
var msg=document.getelementbyid("msglist");
//创建dl标记及其子标记
var dl=document.createelement("dl");
var dt=document.createelement("dt");
var dd=document.createelement("dd");
var dd2=document.createelement("dd");
//将结点插入到相应的位置
msg.insertbefore(dl,msg.firstchild);
dl.appendchild(dt);
dl.appendchild(dd);
dl.appendchild(dd2);
//填充留言内容
dt.innerhtml="标题："+document.forms[0].title.value;
dd.innerhtml="作者："+document.forms[0].author.value+" 日期："+date;
dd2.innerhtml=document.forms[0].content.value;
//清空用户输入框
document.forms[0].title.value="";
document.forms[0].author.value="";
document.forms[0].content.value="";
}
//-->
</script>
</head><body>
<div id="msglist">
<%
'遍历记录集生成html代码，从而将数据显示于页面
while not rs.eof
%>
<dl>
<dt>标题：<%=rs("title")%></dt>
<dd>作者：<%=rs("author")%> 日期：<%=rs("date")%></dd>
<dd><%=rs("content")%></dd>
</dl>
<%
rs.movenext
wend
'关闭数据库连接及记录集，释放资源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</div>
<div id="postbox">
<form name="theform" method="post">
<dl>
<dt>发表您的留言</dt>
<dd>标题：<input type="text" maxlength="150" size="45" name="title"/></dd>
<dd>作者：<input type="text" maxlength="50" size="45" name="author"/></dd>
<dd>内容：<textarea rows="10" cols="45" name="content"></textarea></dd>
<dd class="button">
<input type="button" onclick="ajaxsubmit()" value="提交"/>
<input type="reset" value="重填"/>
</dd>
</dl>
</form>
</div>
</body>
</html>
保存由ajax发送过来的数据进行保存
<%
dim conn,rs
dim connstr
dim sqlcmd'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr'将提交的数据加入数据库
sqlcmd="insert into data(title,author,content) values('" & request.form("title") & "','" & request.form("author") & "','" & request.form("content") & "')"
conn.execute(sqlcmd)'返回服务器时间
response.write(date)
%>
显示留言记录，并且下面提供留方输入框
<%
dim conn,rs
dim connstr
dim sqlcmd'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr
'用于从数据库中获取数据的sql语句
sqlcmd="select title,author,date,content from data order by date desc"
'创建数据集对象
set rs=server.createobject("adodb.recordset")if request.form("title")<>"" then
'如果是页面提交数据则将提交的数据加入数据库
rs.open sqlcmd,conn,1,3
rs.addnew
rs("title")=request.form("title")
rs("author")=request.form("author")
rs("content")=request.form("content")
rs.update
else
'否则直接从数据库中获取数据
rs.open sqlcmd,conn,1,1
end if
%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>classic guestbook</title>
<style type="text/css">
<!--
body { font-size:0.75em;text-align:center;}
dl { margin:0;}
dt { background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd { margin:3px;}
div { margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#postbox { margin-top:10px;}
dd.button { text-align:center;}
dd.button input { margin:0 20px;}
//-->
</style>
</head><body>
<div id="msglist">
<%
'遍历记录集生成html代码，从而将数据显示于页面
while not rs.eof
%>
<dl>
<dt>标题：<%=rs("title")%></dt>
<dd>作者：<%=rs("author")%> 日期：<%=rs("date")%></dd>
<dd><%=rs("content")%></dd>
</dl>
<%
rs.movenext
wend
'关闭数据库连接及记录集，释放资源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</div>
<div id="postbox">
<form action="classic.asp" method="post">
<dl>
<dt>发表您的留言</dt>
<dd>标题：<input type="text" maxlength="150" size="45" name="title"/></dd>
<dd>作者：<input type="text" maxlength="50" size="45" name="author"/></dd>
<dd>内容：<textarea rows="10" cols="45" name="content"></textarea></dd>
<dd class="button">
<input type="submit" value="提交"/>
<input type="reset" value="重填"/>
</dd>
</dl>
</form>
</div>
</body>
</html>