<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>评论系统</title>
<script src="main.js"></script>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pllist">正在加载评论……
<script> loadDom();setTimeout("loadDom()",10000);</script>
</div>
<div style="width:240px;font-size:12px;text-align:center">
<fieldset><legend>评论</legend>
呢称：<input name="user" type="text" style="width:180px"/><input name="newsid" value="1" type="hidden"/><br/>
内容：<textarea name="content" style="width:180px;height:80px"></textarea><br/>
<input name="submit" value="我要评论" type="button" />
</fieldset>
</div>
<div style="font-size:12px;" id="msg"></div>
</body>
</html>
JS代码页(核心部分) main.js
JS代码算是本系统的一个核心部分了，Ajax的体现基本全包含在这短短数十行的代码中，是连结前台与后台处理的一个桥梁，可谓是重中之重，为了更好的让大家理解整个功能，我们将分段介绍。
1、获得XmlHttp对象，创建并返回一个XmlHttp对象。
var xhr;
function getXHR() {
try {
xhr=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhr=false;
}
}
if(!xhr&&typeof XMLHttpRequest!="undefined") {
xhr=new XMLHttpRequest();
}
return xhr;
}
function openXHR(method,url,callback) {
getXHR();
xhr.open(method,url);
xhr.onreadystatechange=function() {
if(xhr.readyState!=4)return;
callback(xhr);
}
xhr.send(null);
}
function loadXML(method,url,callback) {
getXHR();
xhr.open(method,url);
xhr.setRequestHeader("Content-Type","text/xml");
xhr.setRequestHeader("Content-Type","GBK");
xhr.onreadystatechange=function() {
if(xhr.readyState!=4) return;
callback(xhr);
}
xhr.send(null);
}
具体的调用方法：
loadXML(method,url,callback)
method: http方法，例如：POST、GET、PUT及PROPFIND
url: 请求的URL地址，可以为绝对地址也可以为相对地址
callback:自定义的返回处理函数
2.获得评论列表
此段代码的主要功能是根据服务器处理返回的信息更新前台页面的内容，主要包括显示评论列表、评论列表分页、跳转页数三个功能。
显示评论列表：getList函数
function getList(xmlDom) {
var pllist=document.getElementById("pllist"); //获得页面pllist对象,此对象用来显示评论内容
var node=xmlDom.responseXML.getElementsByTagName("pllist");//获得pllist节点集合
var tot=xmlDom.responseXML.getElementsByTagName("pl")[0].getAttribute("tot");//获得pl节点tot属性值,这里指评论的总数量
var curpage=xmlDom.responseXML.getElementsByTagName("pl")[0].getAttribute("curpage");//获得pl节点curpage属性，这里指评论列表当前所在的页数,应用于翻页
if (tot!=0) { //判断当前评论数是否为空
var cont="";
var len=node.length;//获得pllist节点集合中节点的总数量
for(var i=0;i<len;i++) {
var u=node.childNodes(0).text;//获得节点第一个子节点的值,这里指呢称
var d=node.childNodes(1).text; //获得节点第二个子节点的值，这里指时间
var co=node.childNodes(2).text; //获得节点第三个子节点的值,这里指内容
var idnub=node.childNodes(3).text; //获得节点第四个子节点的值,这里指新闻ID
cont+="<div class="u">呢称："+u+"</div><div class="d">时间："+d+"</div><div class="idnub" style="cursor:hand">删除</div><div class="co">内容："+co+"</div>"; //将所获得的评论内容生成一个字符串
}
var cont1=pagecount(tot,curpage);//调用分页函数
cont+=cont1;
pllist.innerHTML=cont;//将内容呈现
} else {
pllist.innerHTML="暂无评论!";
}
}
评论列表分页：pagecount函数
function pagecount(tot,cur) {
var cont1="";
if (tot%5==0) { //默认每页五条，这个要求与服务器端保持一致
pages=parseInt(tot/5);
} else {
pages=parseInt(tot/5)+1;
}
for(var j=1;j<=pages;j++) {
if (j==cur) {
cont1+="<span>"+j+"</span> "
} else {
cont1+="<span style="cursor:hand;color:#0000ff" onmouseout="this.style.background=\"\"" onmousemove="this.style.background=\"#99cc66\"" onclick="gotopage("+j+")">"+j+"</span> "}
}
return cont1;
}
跳转页数：gotopage函数
function gotopage(page) {
loadXML("get","pl_list.asp?page="+page,getList);
}
function loadDom() { //定时更新评论列表,初始化10秒钟
loadXML("get","pl_list.asp",getList);
setTimeout("loadDom()",10000)
}
3.删除评论
function del(idnub) {
var msg=document.getElementById("msg");
msg.innerText="正在删除……";
loadXML("get","pl_del.asp?id="+idnub,getdel);
}
function getdel(xmlDom) { //删除后所触发的事件,更新页面
var msg=document.getElementById("msg");
msg.innerText="删除成功!";
loadXML("get","pl_list.asp",getList);
}
4.提交评论
function fb() { //处理提交
var msg=document.getElementById("msg");
var user=document.getElementById("user");
var content=document.getElementById("content")
var newsid=document.getElementById("newsid")
if (user.value=="") {
alert("呢称不可为空!");
return false;
}
if (content.value=="") {
alert("内容不可为空!");
return false;
}
msg.innerText="正在发表评论";
loadXML("get","pl_fb.asp?user="+user.value+"&content="+content.value+"&newsid="+newsid.value,getfb);
}
function getfb(xmlDom) { //评论提交后所触发的事件，更新评论列表
var msg=document.getElementById("msg");
msg.innerText=xmlDom.responseText;
loadXML("get","pl_list.asp",getList);
}
服务器处理程序
根据JS代码页的分段介绍，我们了解此系统的功能大致包括评论的显示处理、评论的删除处理、评论的提交处理三个功能，那么我们就根据这三个功能分别介绍。
评论的显示处理页面：pl_list.asp
此程序为asp生成xml文件，通过分页的方式将评论的内容以XML的形式呈现出来，我们可以单独运行代码：
<!--#include file="conn.asp"-->
<%
Response.ContentType = "text/XML"
Response.expires = 0
Response.expiresabsolute = Now() - 1
Response.addHeader "pragma", "no-cache"
Response.addHeader "cache-control", "private"
Response.CacheControl = "no-cache"
Response.write("<?xml version=""1.0"" encoding=""gb2312""?>")
currentpage=request("page")
if currentpage="" or int(currentpage)=0 then currentpage=1
set rs=server.createobject("adodb.recordset")
sql="select * from pl order by id desc"
rs.cursorlocation=3
rs.open sql,conn,1,1
if not rs.bof or not rs.eof then
rs.pagesize=5
rs.absolutepage=currentpage
rowcount=rs.pagesize
Response.write("<pl tot=""&rs.recordcount&"" curpage=""&tpage&"">")
do while not rs.eof and rowcount>0
Response.write("<pllist>")
Response.write("<user>"&rs("user")&"</user>")
Response.write("<dateandtime>"&rs("dateandtime")&"</dateandtime>")
Response.write("<content>"&rs("content")&"</content>")
Response.write("<id>"&rs("id")&"</id>")
Response.write("</pllist>")
rowcount=rowcount-1
rs.movenext
loop
else
Response.write("<pl tot=""&rs.recordcount&"" curpage=""&tpage&"">")
end if
rs.close
set rs=nothing
response.write("</pl>")
Conn.asp 数据库连结文件，在删除与提交处理中同样使用
<%
dim conn
dim connstr
dim db
db="main.mdb" "数据库文件位置
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&db&"")
set conn=server.createobject("ADODB.CONNECTION")
conn.open connstr
%>
评论的删除处理页面：pl_list.asp
<% Response.Charset="gb2312" %>
<% Session.CodePage=936 %>
<!--#include file="conn.asp"-->
<%
id=request("id")
if id="" then
response.write("参数错误!")
response.End()
end if
set rs=server.CreateObject("adodb.recordset")
sql="select * from pl where id="&id
rs.open sql,conn,1,3
rs.delete
rs.update
rs.close
set rs=nothing
response.write("删除成功!")
%>
评论的提交处理页面：pl_fb.asp
<% Response.Charset="gb2312" %>
<% Session.CodePage=936 %>
<!--#include file="conn.asp"-->
<%
user=request("user")
content=request("content")
newsid=request("newsid")
set rs=server.CreateObject("adodb.recordset")
sql="select * from pl"
rs.open sql,conn,1,3
rs.addnew
rs("user")=user
rs("content")=content
rs("newsid")=newsid
rs("dateandtime")=time()
rs.update
rs.close
set rs=nothing
response.write("添加成功!")
%>
CSS样式 main.css
一个好的页面呈现效果离不开一个好的样式，当然我这个属于最基本的，算是看得清楚罢了，大家如果有兴趣可以对样式文件作修改。
.u { /*呢称*/
font-size: 12px;
float:left;
height:25px;
line-height:20px;
width:120px;
}
.d { /*时间*/
font-size: 12px;
float:left;
height:25px;
line-height:20px;
width:120px;
}
.idnub { /*删除*/
text-align:center;
font-size: 12px;
height:25px;
line-height:25px;
width:30px;
}
.co {/*内容*/
font-size: 12px;
width:280px;
|