Ajax message board

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.