ASP+AJAX实现无刷新新闻评论系统
时间:2008-12-09
来源:互联网
假设有一个页面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的时候我们采用了一个默认值。
代码:index.htm
评论系统
评论
呢称:
内容:
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.resp****eXML.getElementsByTagName("pllist");//获得pllist节点集合
var tot=xmlDom.resp****eXML.getElementsByTagName("pl")[0].getAttribute("tot");//获得pl节点tot属性值,这里指评论的总数量
var curpage=xmlDom.resp****eXML.getElementsByTagName("pl")[0].getAttribute("curpage");//获得pl节点curpage属性,这里指评论列表当前所在的页数,应用于翻页
if (tot!=0) { //判断当前评论数是否为空
var cont="";
var len=node.length;//获得pllist节点集合中节点的总数量
for(var i=0;i
传统:上半部分评论列表直接通过数据库查询语句读取并显示,每当提交新的评论时,先传递给处理页面,处理页面处理完毕后再返回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的时候我们采用了一个默认值。
代码:index.htm
评论系统
正在加载评论……
评论
呢称:
内容:
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.resp****eXML.getElementsByTagName("pllist");//获得pllist节点集合
var tot=xmlDom.resp****eXML.getElementsByTagName("pl")[0].getAttribute("tot");//获得pl节点tot属性值,这里指评论的总数量
var curpage=xmlDom.resp****eXML.getElementsByTagName("pl")[0].getAttribute("curpage");//获得pl节点curpage属性,这里指评论列表当前所在的页数,应用于翻页
if (tot!=0) { //判断当前评论数是否为空
var cont="";
var len=node.length;//获得pllist节点集合中节点的总数量
for(var i=0;i
作者: 蓝水宝盒 发布时间: 2008-12-09
不错,支持下。
作者: a168 发布时间: 2008-12-20
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28