Today, I just got an asp ajax message board. I 've been learning php for a long time, but I haven't done asp yet. I'll take a look at it today. the following is a brief introduction of the design philosophy of the message board. Because it is very simple, we mainly focus on the ajax return value and data storage, so I will not talk much about asp,
Next let's take a look at the files used.
Addajax. asp
<%
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 obtain 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 ")
'Retrieve data from the database
Rs. open sqlCmd, conn, 1, 1
%>
Because it is relatively lazy, I wrote the connection or ajax on a page. If you need it, you can download it and modify it yourself.
<! 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">
<! --
// Asynchronously submit user input to the server
Function ajaxSubmit (){
// Obtain user input
Var title = document. forms [0]. title. value;
Var author = document. forms [0]. author. value;
Var content = document. forms [0]. content. value;
// Create an XMLHttpRequest object
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 the connection. true indicates asynchronous submission.
Xmlhttp. open ("post", "ajaxAdd. asp", true );
// Set the http header as follows when the method is post
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 the page
Function addToList (date ){
// Retrieve the message list div container
Var msg = document. getElementById ("msgList ");
// Create the dl tag and its sub-tag
Var dl = document. createElement ("dl ");
Var dt = document. createElement ("dt ");
Var dd = document. createElement ("dd ");
Var dd2 = document. createElement ("dd ");
// Insert the node to the corresponding position
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 + "& nbsp; date:" + date;
Dd2.innerHTML = document. forms [0]. content. value;
// Clear the user input box
Document. forms [0]. title. value = "";
Document. forms [0]. author. value = "";
Document. forms [0]. content. value = "";
}
// -->
</Script>
</Head>
<Body>
<Div id = "msgList">
<%
'Generate Html code by traversing the record set to display data on the page
While not rs. eof
%>
<Dl>
<Dt> title: <% = rs ("title") %> </dt>
<Dd> author: <% = rs ("author") %> & nbsp; date: <% = rs ("date") %> </dd>
<Dd> <% = rs ("content") %> </dd>
</Dl>
<%
Rs. movenext
Wend
'Close database connection and record set and release 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 = "150" size = "45" name = "title"/> </dd>
<Dd> author: <input type = "text" maxlength = "50" size = "45" name = "author"/> </dd>
<Dd> content: <textarea rows = "10" cols = "45" name = "content"> </textarea> </dd>
<Dd class = "button">
<Input type = "button" onclick = "ajaxSubmit ()" value = "submit"/>
<Input type = "reset" value = "Refill"/>
</Dd>
</Dl>
</Form>
</Div>
</Body>
</Html>
Continue later.