当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > ASP实例:ASP+AJAX制作无刷新新闻评论系统

AJAX技术
自己动手封装的 ajax
Ajax 对象 包含post和get两种异步传输方式
Ajax 超时检查脚本
AJAX 简介及入门实例
ajax 开发守则 10条说明
Ajax 返回字符串的过滤实现代码
Ajax 程序开发中常见问题
AJAX 验证框架13个
ajax 入门基础之 XMLHttpRequest对象总结
基于AJAX的分页类实现代码
如何在Asp.net中使用HtmlArea编辑器
使用 jQuery 简化 Ajax 开发
ASP.NET 与 Ajax 的实现方式
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程，详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据

No. « 7 8 9 10 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 152 ::
收藏到网摘: n/a

　　假设有一个页面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) {
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);
}

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应用程序终究会变成一件易常简单的事。