来源:
网页教学网
作者:
若水
2008-04-25/11:19
假设有一个页面index.ASP,上半部分为评论列表显示区域,下面为评论提交区域。那么这样一个页面我们如何显示评论内容和提交评论呢?
传统:上半部分评论列表直接
通过![](http://upload.qudong.com/uploads/allimg/080425/1121530.jpg)
数据库查询语句读取并显示,每当提交新的评论时,先传递给处理页面,处理页面处理完毕后再返回index.asp这个页面,当然index.asp是重新加载获得新的评论。
Ajax::首先列表页面的内容是一个单独的XML文件(pl_list.asp),然后index..asp中的上半部分评论通过XmlHttpRequest请求pl_list.asp页面,并通过返回的结果传递到需要更新区域。提交评论同样如此,每次提交采用XmlHttpRequest请求提交处理程序,然后重新更新评论列表显示区域。
此新闻评论系统共分为五个部分,分别为数据库、前台页面、JS代码、服务器处理、CSS样式。
数据库的
设计![](http://upload.qudong.com/uploads/allimg/080425/1121530.jpg)
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函数
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[i].childNodes(0).text;//获得节点第一个子节点的值,这里指呢称
var d=node[i].childNodes(1).text; //获得节点第二个子节点的值,这里指时间
var co=node[i].childNodes(2).text; //获得节点第三个子节点的值,这里指内容
var idnub=node[i].childNodes(3).text; //获得节点第四个子节点的值,这里指新闻ID
cont+='<div class="u">呢称:'+u+'</div><div class="d">时间:'+d+'</div><div class="idnub" onclick="del('+idnub+')" style="cursor:hand" onmouseout="this.style.background=\'\'" onmousemove="this.style.background=\'#99cc66\'">删除</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);#p#分页标题#e#
}
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;
}
这是我第一次尝试在asp中使用ajax,习惯于donet中的拖拖拉拉,突然用最原始的方式写代码还真有点不习惯,特别是缺少了那种所见即所得的效果,每一步的实现都得在不断的调试中完成,的确是一件很累的事情。当然随着Ajax式的程序开发愈来愈受欢迎,现在市面的框架、工具也越来越多,相信有那么一天,开发Ajax应用程序终究会变成一件易常简单的事。 #p#分页标题#e#