一个使用Ajax技术的简单留言本源码

发布时间:2007年02月26日      浏览次数:1645 次
数据库设计:
数据库名称:guestbook.mdb
表名:data
字段:
id 自动编号 编号
title 文本 留言标题
author 文本 留言者
content 备注 留言内容
date 日期时间 留言时间
==================================================
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/javascript">
<!--
//将用户输入异步提交到服务器
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 ActiveXObject('Msxml2.XMLHTTP');
            }catch(e){
                  try{
                        xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
                  }catch(e){
                        try{
                              xmlhttp= new XMLHttpRequest();
                        }catch(e){}
                  }
            }
      //创建请求结果处理程序
      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>
==================================================================
ajaxAdd.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
'将提交的数据加入数据库
sqlCmd="insert into data(title,author,content) values('" & request.form("title") & "','" & request.form("author") & "','" & request.form("content") & "')"
conn.execute(sqlCmd)
'返回服务器时间
Response.write(Date)
%>
文章来源:桂林唯创网络
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!