Ajax.asp
<%
Dim conn,rs
Dim connstr
Dim sqlcmd
' Create a Database Tutorial connection object and open
Set Conn=server.createobject ("Adodb.connection")
Connstr= "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" & Server.MapPath ("Guestbook.mdb")
Conn.Open ConnStr
' SQL statement used to get data from the database
Sqlcmd= "Select Title,author,date,content from Data order by date Desc"
' Create a DataSet object
Set Rs=server.createobject ("Adodb.recordset")
' Get the data from the database
Rs.Open sqlcmd,conn,1,1
%>
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>ajax guestbook</title>
<style type= "Text/css Tutorial" >
<!--
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/web Effects" >
<!--
Asynchronously commits user input to the server
function Ajaxsubmit () {
Get user input
var Title=document.forms[0].title.value;
var Author=document.forms[0].author.value;
var Content=document.forms[0].content.value;
Creating XMLHttpRequest Objects
var xmlhttp;
try{
Xmlhttp=new XMLHttpRequest ();
}catch (e) {
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
Create a request result handler
Xmlhttp.onreadystatechange=function () {
if (4==xmlhttp.readystate) {
if (200==xmlhttp.status) {
var Date=xmlhttp.responsetext;
Addtolist (date);
}else{
Alert ("Error");
}
}
}
Open connection, True indicates asynchronous commit
Xmlhttp.open ("Post", "ajaxadd.asp", true);
When the method is post, you need to set the HTTP headers as follows
Xmlhttp.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Send data
Xmlhttp.send ("title=" +escape (title) + "&author=" +escape (author) + "&content=" +escape (content));
}
Display user input to a page
function Addtolist (date) {
Get message list div container
var Msg=document.getelementbyid ("Msglist");
Create a DL tag and its child tags
var dl=document.createelement ("DL");
var dt=document.createelement ("DT");
var dd=document.createelement ("DD");
var dd2=document.createelement ("DD");
Insert a node into the appropriate location
Msg.insertbefore (Dl,msg.firstchild);
Dl.appendchild (DT);
Dl.appendchild (DD);
Dl.appendchild (DD2);
Fill in the message content
Dt.innerhtml= "title:" +document.forms[0].title.value;
Dd.innerhtml= "Author:" +document.forms[0].author.value+ " Date:" +date;
Dd2.innerhtml=document.forms[0].content.value;
Empty user input Box
Document.forms[0].title.value= "";
Document.forms[0].author.value= "";
Document.forms[0].content.value= "";
}
-->
</script>
<body>
<div id= "Msglist" >
<%
' Traverse the recordset to generate HTML code to display the data on the page
While not rs.eof
%>
<dl>
<dt> title: <%=rs ("title")%></dt>
<dd> Author: <%=rs ("author")%> Date: <%=rs ("date")%></dd>
<dd><%=rs ("content")%></dd>
</dl>
<%
Rs.movenext
Wend
' Close the database connection and recordset, releasing resources
Rs.close
Conn.close
Set rs=nothing
Set conn=nothing
%>
</div>
<div id= "Postbox" >
<form name= "theform" method= "POST" >
<dl>
<dt> Post your message </dt>
<dd> title: <input type= "text" maxlength= "size=" name= "title"/></dd>
<dd> Author: <input type= "text" maxlength= "size=" name= "Author"/></dd>
<dd> content: <textarea rows= "cols=" name= "content" ></textarea></dd>
<dd class= "button" >
<input type= "button" onclick= "Ajaxsubmit ()" value= "Submit"/>
<input type= "reset" value= "refill"/>
</dd>
</dl>
</form>
</div>
</body>
Save the data sent over by Ajax
<%
Dim conn,rs
Dim connstr
Dim sqlcmd
' Create a database connection object and open
Set Conn=server.createobject ("Adodb.connection")
Connstr= "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" & Server.MapPath ("Guestbook.mdb")
Conn.Open ConnStr
' Add the submitted data to the database
sqlcmd= "INSERT into data (title,author,content) VALUES ('" & Request.Form ("title") & "', '" & Request.Form (" Author ") &" ', ' "& Request.Form (" Content ") &" ') "
Conn.execute (sqlcmd)
' Back to server time
Response.Write (date)
%>
Displays a message record and provides a left-side input box below
<%
Dim conn,rs
Dim connstr
Dim sqlcmd
' Create a database connection object and open
Set Conn=server.createobject ("Adodb.connection")
Connstr= "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" & Server.MapPath ("Guestbook.mdb")
Conn.Open ConnStr
' SQL statement used to get data from the database
Sqlcmd= "Select Title,author,date,content from Data order by date Desc"
' Create a DataSet object
Set Rs=server.createobject ("Adodb.recordset")
If Request.Form ("title") <> "then
' If the page submits data, the submitted data is added to the database
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
' Otherwise get the data directly from the database
Rs.Open sqlcmd,conn,1,1
End If
%>
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<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>
<body>
<div id= "Msglist" >
<%
' Traverse the recordset to generate HTML code to display the data on the page
While not rs.eof
%>
<dl>
<dt> title: <%=rs ("title")%></dt>
<dd> Author: <%=rs ("author")%> Date: <%=rs ("date")%></dd>
<dd><%=rs ("content")%></dd>
</dl>
<%
Rs.movenext
Wend
' Close the database connection and recordset, releasing resources
Rs.close
Conn.close
Set rs=nothing
Set conn=nothing
%>
</div>
<div id= "Postbox" >
<form action= "classic.asp" method= "POST" >
<dl>
<dt> Post your message </dt>
<dd> title: <input type= "text" maxlength= "size=" name= "title"/></dd>
<dd> Author: <input type= "text" maxlength= "size=" name= "Author"/></dd>
<dd> content: <textarea rows= "cols=" name= "content" ></textarea></dd>
<dd class= "button" >
<input type= "Submit" value= "submitted"/>
<input type= "reset" value= "refill"/>
</dd>
</dl>
</form>
</div>
</body>