飘易博客(作者:Flymorn)
订阅《飘易博客》RSS,第一时间查看最新文章!
飘易首页 | 留言本 | 关于我 | 订阅Feed

飘易:ajax设计无刷新的评论系统

Author:飘易 Source:飘易
Categories:网站设计 PostTime:2010-6-14 0:05:04
正 文:
    我们在制作自己的网站时,一般会开放博客的评论系统,以供博主和访客互动,大家可以看到wordpress博客评论系统就是利用ajax技术实现的无刷新的模块。ajax实际并不复杂,我们多多少少都有接触,js前台+asp/php等后台服务器脚本之间的交互。

    飘易花了点时间,把飘易博客的评论系统也改成了ajax无刷新评论系统。主要有这样的一个 js 文件,例如我的命名为 com.js,以及对应的后台服务器脚本,如asp\php文件。

    剩下的就是利用ajax提交给后台服务器脚本处理了,返回相应的处理后的代码给js,回传显示就ok了,当然,下面的代码没有加入一些判断,比如是否为空,是否含非法关键字等的判断,你可以自行增加修改。

com.js代码:
//利用AJAX的无刷新评论
function subok(){
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
   try{ 
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = null;
alert("您的浏览器不支持XMLHTTP,无法完成此操作!");
}
}
}
xmlhttp.open("POST", "../addcom.asp", false);  
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312"); 
xmlhttp.send("c_id1="+document.getElementById('c_id1').value+"&c_name="+escape(document.getElementById('c_name').value)+"&c_email="+escape(document.getElementById('c_email').value)+"&c_site="+escape(document.getElementById('c_site').value)+"&c_content="+escape(document.getElementById('c_content').value));
if(xmlhttp.status==200){
strText = xmlhttp.responseText; 
document.getElementById("commtwait").innerHTML=strText;
document.getElementById("c_content").value="";
}
}


    几个注意点:1、js是对大小写敏感的。 2、后台服务器脚本要做好安全判断,js毕竟是客户端的东西,我们不可全部相信。 3、 js和asp后台之间的汉字编码问题,我们可以同时指定它们均为 gb2312 编码。4、提交的时候不要用 form 表单提交,直接使用 <input type="submit" name="s" value=" 提交 " onclick="subok()" /> 这样的 onclick 事件提交。

    大家可以测试一下飘易博客的 ajax 无刷新评论系统,你发布一个评论就可以看到效果了,同时兼容IE和firefox浏览器。
作者:飘易
来源:飘易
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
上一篇:百度关键词指数批量查询-新版可用!
下一篇:JS跨域:利用apache的代理模块完美实现方法
57条评论 “飘易:ajax设计无刷新的评论系统”
1 睡人
2010-6-14 0:11:14
我来做第一个test哦。
2010-6-14 9:59:17
行动挺快的嘛!我来测试一下!
2010-6-14 10:05:12
再次回来,其实我的博客早就实现了ajax的评论提交方式,但我想改的效果是,ajax提交后,评论能生成静态!我看zblog的评论在提交后是重新生成了一下该篇日志文件!不知道你的评论系统是怎么处理的呢?我看你前台提交后并未立即通过审核,那是不是你在后台审核的同时生成日志静态呢?望不吝回复!
4 watano
2010-6-14 13:02:37
test第二个。试试看列表是否即时刷新哦。
5 watano
2010-6-14 16:38:31
提交后评论列表能自动刷新吗(新评论自动添加到后面)
6 xya
2010-6-14 18:14:12
测试1测试1测试1测试1测试1测试1
7 xya
2010-6-14 18:14:19
测试2测试2测试2测试2测试2测试2
8 飘易
2010-6-14 18:18:41
回复:haibor
我的前台提交后的确没有立即通过审核,为了防止spam,当我在后台审核的同时再生成日志静态的。
9 你好 ,可以和贵站换连接吗
2010-6-14 18:23:18
你好 ,可以和贵站换连接吗
www.yublog.com.cn seo www.chengyubase.cn 梦游娃娃
www.antaxie.com 安踏  www.52anakng.cn 西安百度
www.sneac.org 招生考试信息网 www.cos30.cn
10 飘易
2010-6-14 18:25:49
回复:5 watano
由于我的评论需要审核,前台提交后,并没有立即审核,立即刷新列表也是容易做的,把评论放到一个容器,使用innerHTML替换即可。
11 飘易
2010-6-14 18:32:43
haibor:
如果你的评论无需审核,希望ajax提交后,评论能生成静态,也是容易实现的:就像zblog,提交后后台重新生成日志,前台用ajax刷新评论列表容器,显示出最新的评论。这样无论用户是否再次刷新该页,他都能看到最新的评论了。
2010-6-14 23:32:16
思路很明确了,多谢帮助!!
13 bestchao
2010-6-16 20:10:55
看看效果,不知是否可以借鉴。
2010-6-16 20:14:48
这个不错,要是你能帮忙解决一上Zblog回复后不重复的问题,就非常感激不尽了。
详细问题描述可以移步这里:http://www.17gogo.net/blog_growth/love_blog_diy.html
2010-6-18 21:39:34
原来飘易是高手哦,我来试试效果
16 无双
2010-6-21 11:28:47
看下效果,看下飘易的技术
2010-6-23 0:49:51
学习了。ajax我一直都很喜欢,不过我还是个菜鸟
18 loong
2010-6-26 8:32:31
我也来测试下 呵呵 顺便带走下代码
19 gg
2010-8-3 23:46:19
test,,,,,,
20 莫歌
2010-8-15 18:43:41
呵呵 来试一下效果是怎样的
21 dfas
2010-8-20 14:38:50
asdfasdfasdfasdf
22 看下效果
2010-8-24 11:11:56
呵呵,看游戏的了原来飘易是高手哦,我来试试效果
2010-8-25 9:01:26
不错呀,我测试一下呀
24 just try
2010-9-28 16:53:46
good……well……
25 测试
2010-10-10 15:51:19
测试而已,就是测试而已。。。
26 121212
2010-11-5 14:34:59
xmlhttp.open("POST", "../addcom.asp", false);  
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312"); 
xmlhttp.send("c_id1=" document.getElementById('c_id1').value "&c_name=" escape(document.getElementById('c_name').value) "&c_email=" escape(document.getElementById('c_email').value) "&c_site=" escape(document.getElementById('c_site').value) "&c_content=" escape(document.getElementById('c_content').value));
if(xmlhttp.status==200){
strText = xmlhttp.responseText; 
document.getElementById("commtwait").innerHTML=strText;
document.getElementById("c_content").value="";
}
27 ltz
2010-11-21 18:39:26
观摩,测试,ajax
28 哈哈
2011-1-10 0:02:31
就为了看一下效果,哈哈
29 das
2011-1-15 15:11:46
就为了看一下效果,哈哈
30 浪子
2011-3-14 0:28:41
无刷新??看看效果的说
31 levin
2011-3-20 18:18:19
真的是无刷新评论??
32 ray
2011-3-30 17:04:15
测试测试测试测试测试测试测试测试
33 adssa
2011-4-6 0:14:09
test测试两下三下
2011-4-24 0:37:49
正在学习xmlhttp 测试下
35 test
2011-6-16 17:32:33
学习一下,不错的博客
36 看下
2011-8-4 16:32:19
firefox浏览器。
2011-8-8 18:23:53
IE8测试评论发布~
38 tttttttttt
2011-8-22 18:22:38
试试看试试看试试看试试看
2011-9-8 22:45:24
冲着这个功能前来测试的~~
2011-9-23 11:54:32
不能对留言进行回复吗?
41 测试一下
2011-10-21 9:12:59
002tv.com优视网络电视
42 uoson
2011-10-23 23:15:26
再测试下这个ajax回复
43 uoson
2011-10-23 23:20:08
里面有个asp是什么用的呢
2011-11-17 2:39:46
测试一下...看看效果如何
45 试试
2011-12-3 12:22:44
试试看怎么样。。。。。。。。
46 test一下
2011-12-9 9:01:40
、、、、、、、、、、test一下
47 123
2012-3-29 14:08:51
1245678qwaffsh
48 特色汤的
2012-6-8 13:12:15
测试下,无刷新评论,要规定吗
49 opopo
2012-6-30 10:50:26
klkl
测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗
2013-3-28 16:15:54
试试,不错http://csidm.com
51 ghj
2013-7-5 14:22:05
astest测试下测试
2013-8-7 15:23:07
前来测试一下
前来测试一下
53 111
2013-9-4 10:50:50
不好意思 缺少分页效果  差评
54 测试下
2013-9-30 0:33:04
测试下测试下测试下测试下
55 ff
2014-1-13 0:57:33
前来测试一下
前来测试一下
56 我也来试试
2014-3-14 19:41:17
貌似很有用么
真的么?
57 test
2014-11-13 10:52:33
test123
test123
发表评论
名称(*必填)
邮件(选填)
网站(选填)

记住我,下次回复时不用重新输入个人信息
© 2007-2019 飘易博客 Www.Piaoyi.Org 原创文章版权由飘易所有