本文就是和大家分享一款由服务器端编程语言(专业超文本预处理器的缩写)结合创建交互式、快速动态网页应用的网页开发技术实现的无刷新留言板，先给大家看一下最后的效果图：

数据库连接代码如下：

？PHP $ conn=@ MySQL _ connect(' localhost '，' root '，' root ')或die ('MySql连接错误');mysql_select_db('demo '，$ conn)；MySQL _ query(' set name ' utf8 ' ')；index.php文件代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' link href=' BBS。' CSS '类型=' text/CSS ' rel='样式表标题无刷新显示回帖/title脚本src=' http : BBS。js ' type=' text/JavaScript '/script/head myh 1无刷新显示回帖/h1div id='thread '？phpinclude(' conn . PHP ')；$sql='从bbs_post '中选择*其中threadid`='1 '按id asc排序；$ query=MySQL _ query($ SQL)；while($ row=MySQL _ fetch _ array($ query)){？div class='post' id='post？PHP echo $ row[' id ']；div class='post_title '？PHP echo $ row[' title ']；[?PHP echo $ row[' username ']；div class=' post _ content 'pre？PHP echo $ row[' content ']；/pre/div /div？php}？/div table class=' reply ' tr TD col span=' 2 ' class=' title '回帖输入类型='隐藏'名称='threadid' id='threadid '值='1'/td/trtr td姓名：/TD tdinput type=' text ' name=' username ' id=' username '/TD/trtr TD标题：/TD tdinput type=' text ' name=' post _ title ' id=' post _ title '/TD/trtr TD内容：/TD tdtextarea name=' post _ content ' id=' post _ content '/textarea/TD/trtr TD col span=' 2 '输入类型=' button ' onclick=' Submit post()' value='提交/TD/tr/table/body/html bbspost.php文件代码如下

？phpinclude(' conn . PHP ')；$ title=$ _ POST[' title ']；//获取title $ content=$ _ POST[' content ']；//获取内容$ username=$ _ POST[' username ']；//获取username $ threadId=$ _ POST[' threadId ']；//获取threadid$sql='插入bbs_post(标题、内容、用户名、threadid ).值(' $title '，' $content '，' $username '，' $ Threadid ')'；MySQL _ query($ SQL)；//传回最后一次使用插入指令的ID $响应ID=MySQL _ insert _ ID()；echo $ responseId？bbs.js文件里面包括了大量创建交互式、快速动态网页应用的网页开发技术文件，代码如下

//先创建一个空的bbs.js文件，并修改其属性为utf-8，才能保存中文var xmlHttp//用于保存XMLHttpRequest对象的全局变量定义变量用户名；//用于保存姓名定义变量标题；//用于保存标题定义变量内容；//用于保存内容var threadid//用于保存主题编号//用于创建XMLHttpRequest对象函数createXmlHttp() { //根据窗户XMLHttpRequest .对象是否存在使用不同的创建方式如果(窗口. XMLHttpRequest){ xmlHttp=new XMLHttpRequest()；//FireFox、Opera等浏览器支持的创建方式} else { xmlHttp=新ActiveX对象(' Microsoft .XMLHTTP’)；//IE浏览器支持的创建方式}}//提交回帖到服务器函数submitPost() { //获取帖子中姓名、标题、内容、主题编号四部分信息用户名=文档。getelementbyid('用户名').价值；标题=文档。getelementbyid(' post _ title ').价值；内容=文档。getelementbyid(' post _ content ').价值；线程id=文档。getelementbyid('线程id ').价值；if(CheckFOrm()){ createXMlhttp()；//创建XMLHttpRequest对象xmlhttp。onreadystatechange=SubmitPostCallback；//设置回调函数xmlHttp.open('POST '，' bbspost.php '，true)；//发送邮政请求//设置邮政请求体类型xmlhttp。setrequestheader('内容类型'，'应用程序/x-www-form-URL编码')；xmlhttp。send(' username=' encodeURI(username)' title=' encodeURI(title)' content=' encodeURI(content)' threadid=' threadid)；//发送包含四个参数的请求体}}//检查表单是否内容已填写完毕函数CheckFOrm(){ if(username==' '){ alert('请填写姓名');返回false} else if (title=='') { alert('请填写标题');返回false} else if(内容=='') { alert('请填写内容');返回false}返回true}//获取查询选项的回调函数函数submit post callback(){ if(XMlhttp。ReadyState==4){ alert(XMlhttp。response text)；createNewPost(xmlhttp。response text)；}}//创建新的回帖函数createNewPost(postId) { //清空当前表单中各部分信息文件。getelementbyid(' post _ title ').值=' ';文件。getelementbyid(' post _ content ').值=' ';文件。getelementbyid('用户名').值=' ';var postDiv=createDiv('post '，' ')；//创建回帖的外层div postDiv.id=' post ' postId//给新差异赋编号值var post title div=create div(' post _ title '，title '[' username ']')；//创建标题div var post ntdiv=create div(' post _ content '，' pre ' content '/pre ')；//创建内容div PostDiv。追加子项(PostTitleDiv)；//在外层差异追加标题邮政部门。appendchild(帖子内容div)；//在外层差异追加内容文件。getelementbyid(' thread ').appendChild(PostDiv)；//将外层差异追加到主题差异中}//根据类名和文本创建新的divfunction createDiv(className，text){ var new div=document。创建元素(' div ')；新的DiV。类名=类名；newDiv.innerHTML=文本返回newDiv} bbs.css文件如下：

/* 页面基本样式*/body，td，input，text area { font-family : arial；font-size :12 px}/* 主题的样式*/#线程{ border:1px纯黑；宽度宽度：300像素边距-底部：10 px}/* 提示信息差异的样式*/# StatusDiv {边框：1 px实心# 999；背景# FFFFCC宽度宽度：100像素位置：绝对；前：50%；左侧：50%;余量：-50px 0-100px；宽度宽度：280px}/*帖子的样式*/div。帖子{边框-底部：1 px纯黑；padd :5 px }/*帖子标题的样式*/div。post _ title {边框-底部：1 px虚线# 0066CCfont-weight :加粗；}/* 帖子内容的样式*/div。post _ content { font-size :12 px；margin 33605 px }/*回帖表格基本样式*/table。回复{边框-折叠：折叠；宽度宽度：300px}/*回帖表格单元格样式*/table.reply td { border:1px纯黑；padd :3 px }/*回帖表格表头样式*/table。回复TD。标题{背景： # 003366；color: # FFFFFF}/*表单元素样式*/input，textarea { border:1px纯黑；}/* 文字区域样式*/文本区域{宽度：200 px高度：50 px}/* 预定义格式样式*/pre { margin :0；}以上就是本文的全部内容，希望对大家的学习有所帮助。