首页新闻手机家电数码电脑财经大模型直播

ASP实例:ASP+AJAX制作无刷新新闻评论系统

来源：网页教学网作者：若水 2008-04-25/11:19

软件频道

编程学院

Asp/Asp.Net

asp实例

正文

假设有一个页面index.ASP，上半部分为评论列表显示区域，下面为评论提交区域。那么这样一个页面我们如何显示评论内容和提交评论呢?
传统：上半部分评论列表直接通过

数据库查询语句读取并显示，每当提交新的评论时，先传递给处理页面，处理页面处理完毕后再返回index.asp这个页面，当然index.asp是重新加载获得新的评论。
Ajax:：首先列表页面的内容是一个单独的XML文件(pl_list.asp)，然后index..asp中的上半部分评论通过XmlHttpRequest请求pl_list.asp页面，并通过返回的结果传递到需要更新区域。提交评论同样如此，每次提交采用XmlHttpRequest请求提交处理程序，然后重新更新评论列表显示区域。
此新闻评论系统共分为五个部分，分别为数据库、前台页面、JS代码、服务器处理、CSS样式。
数据库的设计

PL表：
字段名类型长度
id 自动编号
user 文本 20
dateandtime 日期/时间
content 备注
newid 数字

前台页面：(index.htm)
前台页面共包括两部分，上半部分为页面评论列表显示，下半部分为提交评论。由于我们这里只是模拟一个新闻评论系统，并没有真正的新闻页面，那么在传递新闻ID的时候我们采用了一个默认值<input name="newsid" value="1" type="hidden"/>。
代码：index.htm

<%@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="我要评论" onclick="fb();" 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) {#p#分页标题#e#
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函数

评论列表分页：pagecount函数

跳转页数：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.提交评论

<%
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 %>

<%
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 %>

<%
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;
}

这是我第一次尝试在asp中使用ajax,习惯于donet中的拖拖拉拉，突然用最原始的方式写代码还真有点不习惯，特别是缺少了那种所见即所得的效果，每一步的实现都得在不断的调试中完成,的确是一件很累的事情。当然随着Ajax式的程序开发愈来愈受欢迎，现在市面的框架、工具也越来越多，相信有那么一天，开发Ajax应用程序终究会变成一件易常简单的事。 #p#分页标题#e#

{{cmoun}}人已赞

评论 {{userinfo.comments}}