首页 | 源码下载 | 网站模板 | 网页特效 | 广告代码 | 网页素材 | 字体下载 | 书库 | 站长工具
会员投稿 投稿指南 RSS订阅

栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>ajax教程>资讯:ASP+AJAX实现无刷新新闻评论系统

ASP+AJAX实现无刷新新闻评论系统

www.jz123.cn  2008-11-14   来源:   中国建站    编辑整理    我要投递新闻

假设有一个页面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

<[email=%@LANGUAGE=]%@LANGUAGE="VBSCRIPT[/email]" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" c />
<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"/>
内容：<textarea name="content" style="width:180px;height:80px"></textarea>
<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[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);
}

上一页12 下一页

上一篇：关于在AJAX中GET回的ResponseText中文乱码的最简解决办法 下一篇：Ajax获取xml信息

相关文章列表

评论总数：2 条 [ 查看全部 ] 网友评论