Php+ajax make no refresh message board _php instance

This article is to share a PHP with Ajax implementation of the No Refresh message board, first of all to see the final effect of the picture:

The database connection code is as follows:

<?php
$conn = @mysql_connect ("localhost", "root", "root") or Die ("MySQL connection error");
mysql_select_db ("demo", $conn);
mysql_query ("Set names ' UTF8 '");
? >

The index.php file code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The bbspost.php file code is as follows

<?php
include ("conn.php");
$title = $_post["title"]; Get title
$content = $_post["Content"];//get content
$username = $_post["username"];//Get username
$ ThreadId = $_post["ThreadId"]; Gets the ThreadID


$sql = "INSERT into Bbs_post (Title,content,username,threadid)".
 VALUES (' $title ', ' $content ', ' $username ', ' $threadId ');
 mysql_query ($sql);
 Returns the ID of the last use INSERT instruction
$responseId =mysql_insert_id ();
echo $responseId;
? >

Bbs.js file contains a large number of Ajax files, the code is as follows

To save Chinese, create an empty bbs.js file and modify its properties to Utf-8.      var xmlHttp;      The global variable var username that is used to save the XMLHttpRequest object;       Used to save name VAR title;      Used to save the title var content;      Used to save content var ThreadID; Used to save the subject number//for creating the XMLHttpRequest Object function Createxmlhttp () {//according to window. Whether the XMLHttpRequest object exists using a different creation method if (window.     XMLHttpRequest) {xmlHttp = new XMLHttpRequest (); Firefox, Opera and other browsers support the creation of the way} else {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");//ie browser-supported creation method}//Submit replies to Server Fu
 Nction Submitpost () {//Get the name, title, content, subject number four part information username = document.getElementById ("username") in the post. Value;
 title = document.getElementById ("Post_title"). Value;
 Content = document.getElementById ("Post_content"). Value;
 ThreadID = document.getElementById ("ThreadID"). Value;         if (Checkform ()) {createxmlhttp (); Create XMLHttpRequest Object xmlhttp.onreadystatechange = Submitpostcallback;   Sets the callback function Xmlhttp.open ("POST", "bbspost.php", true); Send POST request//Set POST request body type Xmlhttp.setrequestheader ("Content-type", "ApplIcation/x-www-form-urlencoded "); Xmlhttp.send ("username=" + encodeURI (username) + "&title=" + encodeURI (title) + "&content=" + encodeur    I (content) + "&threadid=" + ThreadID);
  Send a four-parameter request body}//Check if the form has been filled out function checkform () {if (username = = "") {alert ("Please fill in name");
 return false;
  else if (title = = "") {alert ("Please fill in the title");
 return false;
  else if (content = = "") {alert ("Please fill in");
 return false;
return true;
  //Gets the callback function for the query option functions Submitpostcallback () {if (xmlhttp.readystate = 4) {alert (xmlhttp.responsetext);
 Createnewpost (Xmlhttp.responsetext);
 }//Create a new reply function Createnewpost (PostID) {//Empty the information document.getElementById ("Post_title") in the current form. Value = "";
 document.getElementById ("Post_content"). Value = "";

 document.getElementById ("username"). Value = ""; var postdiv = Creatediv ("Post", "");   Create a reply to the outer div postdiv.id = "post" + PostID; Assign ID value to new div var posttitlediv = creatediv ("Post_title", title + "[" + Username + "]"); Create title div var postcontentdiv = creatediv ("Post_content", "<pre>" + content + "</pre>");       Create Content Div Postdiv.appendchild (posttitlediv);      The outer div appends the title postdiv.appendchild (POSTCONTENTDIV);  Append content document.getElementById ("thread") to the outer Div. appendchild (postdiv); Append the outer div to the subject div}//create a new div function creatediv (className, text) {var newdiv = document.createelement based on className and text (
 "Div");
 Newdiv.classname = ClassName;
 newdiv.innerhtml = text;
return newdiv; 

 }

The

bbs.css file is as follows:

 * * Page Basic style * * body, TD, input, textarea {font-family:arial;
font-size:12px;
 /* Theme Style * * #thread {border:1px solid black;
 width:300px;
margin-bottom:10px;
 }/* Hint Info div style * * * #statusDiv {border:1px solid #999;
 Background: #FFFFCC;
 width:100px;
 Position:absolute;
 top:50%;
 left:50%;
 margin:-50px 0 0-100px;
width:280px;
 }/* The style of the post * * Div.post {border-bottom:1px solid black;
padding:5px;
 }/* Post title Style * * Div.post_title {border-bottom:1px dotted #0066CC;
Font-weight:bold;
 }/* Post content style * * Div.post_content {font-size:12px;
margin:5px;
 }/* Reply form basic style * * Table.reply {border-collapse:collapse;
width:300px;
 }/* Reply table cell style * * table.reply td {BORDER:1PX solid black;
padding:3px;
 }/* Reply table header style * * table.reply td.title {background: #003366;
Color: #FFFFFF;

/* FORM element style */input, textarea {border:1px solid black;}
 /* Text Area style * * TextArea {width:200px;
height:50px; 
/* Predefined Format style * * Pre {margin:0} 

The above is the entire content of this article, I hope to help you learn.