当前位置: 首页 > 图文教程 > 网络编程 > JSP > 一个jsp+AJAX评论系统

JSP
GET 方式提交的含有特殊字符的参数
java big5到gb2312的编码转换
java Lucene 中自定义排序的实现
hibernate中的增删改查实现代码
jsp 定制标签(Custom Tag)
jsp基础速成精华讲解
IE cache缓存 所带来的问题收藏
关于JSP的一点疑问小结
JSP 多条SQL语句同时执行的方法
jsp include文件时的一个乱码解决方法
在JSTL EL中处理java.util.Map,及嵌套List的情况
jsp 页面显示的一些用法
根据Hibernte的cfg文件生成sql文件
五种 JSP页面跳转方法详解
JSP 防范SQL注入攻击分析
JSP 连接MySQL配置与使用
java eclipse 启动参数
jsp 页面上图片分行输出小技巧
解决jsp开发中不支持EL问题
JSP 页面中使用FCKeditor控件(js用法)

JSP 中的 一个jsp+AJAX评论系统


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-11   浏览: 113 ::
收藏到网摘: n/a

这是一个简单的评论系统,使用了JDOM(这边使用Jdom-b9),实例使用JSP作为视图,结合使用AJAX(用到prototype-1.4),Servlet和JavaBean作为后台处理,使用xml文件存储数据。
1.应用目录结构如下:
data
|--comment.xml
js
|--prototype.js
|--ufo.js(UTF-8格式)
css
|--ufo.css
images
|--loading.gif
ufo.jsp(UTF-8格式)
WEB-INF
|-lib
|-jdom.jar
|-classes
...
|-web.xml
/*********************************************
*Author:Java619
*Time:2007-02-14
**********************************************/

2.后台JavaBean CommentBean.java
/** *//**
* <P>外星人是否存在评论系统</p>
* @author ceun
* 联系作者:<br>
* <a href="mailto:[email protected]">ceun</a><br>
* @version 1.0 2007-01-30 实现基本功能<br>
* CommentBean.java
* Created on Jan 30, 2007 9:39:19 AM
*/
package com.ceun.bean;
import java.io.FileWriter;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;
import org.jdom.CDATA;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.Text;
import org.jdom.input.SAXBuilder;
import org.jdom.output.XMLOutputter;
/** *//**
*<p> 封装对XML的操作</p>
* @author ceun
* 联系作者:<br>
* <a href="mailto:[email protected]">ceun</a><br>
* @version 1.0 2007-01-30 实现基本功能<br>
*/
public class CommentBean ...{
private String filepath;
private SAXBuilder builder = null;
private Document doc = null;
public CommentBean() ...{
}
/** *//**
* 初始化XML文件路径,加载文件
* */
public CommentBean(String path) ...{
this.filepath = path;
builder = new SAXBuilder();
try ...{
doc = builder.build(filepath);
} catch (JDOMException e) ...{
System.out.print("找不到指定的XML文件");
e.printStackTrace();
} catch (IOException e) ...{
System.out.print("找不到指定的文件");
e.printStackTrace();
}
}
/** *//**
* 添加评论
* @param nikename 评论者昵称
* @param comment 评论内容
* @param attitude 评论者的结论(yes-存在,no-不存在)
* */
public String addComment(String nikename, String comment, String attitude) ...{
Element root = doc.getRootElement();
Element el = new Element("comment");
Random rand = new Random();
int id = rand.nextInt(10000);
el.setAttribute("id", "comment_" + id);
el.setAttribute("attitude", attitude);
Element name = new Element("nikename");
CDATA cname = new CDATA(nikename);
name.addContent(cname);
Element data = new Element("data");
CDATA ctext = new CDATA(comment);
data.addContent(ctext);
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
Text tdate = new Text(format.format(date));
Element pubdate = new Element("pubdate");
pubdate.addContent(tdate);
el.addContent(name);
el.addContent(data);
el.addContent(pubdate);
root.addContent(el);
XMLOutputter outputter = new XMLOutputter(" ", true, "GB2312");
// 清除comment元素间的空格
outputter.setTrimAllWhite(true);
try ...{
outputter.output(doc, new FileWriter(filepath));
} catch (IOException e) ...{
System.out.println("指定路径有错");
e.printStackTrace();
}
return tdate.getText();
}
/** *//**
* 删除指定ID的评论
* @param commentId 评论ID
* @return 返回操作结果字符串(成功或失败)
* */
public String removeComment(String commentId) ...{
Element root = doc.getRootElement();
List comments = root.getChildren();
int size = comments.size();
Element dist = null;
for (int i = 0; i < size; i++) ...{
Element comment = (Element) comments.get(i);
String id = comment.getAttributeValue("id");
if (id.equals(commentId)) ...{
dist = comment;
break;
}
}
if (dist != null) ...{
root.removeContent(dist);
XMLOutputter outputter = new XMLOutputter(" ", true, "GB2312");
// 清除comment元素间的空格
outputter.setTrimAllWhite(true);
try ...{
outputter.output(doc, new FileWriter(filepath));
} catch (IOException e) ...{
System.out.println("重写文件有出错");
e.printStackTrace();
}
return "成功删除指定元素!";
} else
return "指定元素不存在!";
}
/** *//**
* 批量删除评论
* @param commentIdArgs 评论ID数组
* @return 返回操作结果字符串(成功或失败)
* */
public String removeComments(String[] commentIdArgs) ...{
Element root = doc.getRootElement();
List comments = root.getChildren();
int size = comments.size();
int len = commentIdArgs.length;
List<Element> dist = new ArrayList<Element>();
outer:for (int i = 0; i < size; i++) ...{
Element comment = (Element) comments.get(i);
String id = comment.getAttributeValue("id");
for (int j = 0; j < len; j++)
if (id.equals(commentIdArgs[j])) ...{
dist.add(comment);
continue outer;
}
}
int dist_size=dist.size();
if (dist_size != 0) ...{
for (int i = 0; i < dist_size; i++)
root.removeContent(dist.get(i));
XMLOutputter outputter = new XMLOutputter(" ", true, "GB2312");
// 清除comment元素间的空格
outputter.setTrimAllWhite(true);
try ...{
outputter.output(doc, new FileWriter(filepath));
} catch (IOException e) ...{
System.out.println("重写文件有出错");
e.printStackTrace();
}
return "成功删除指定的元素集合!";
} else
return "指定元素集合的不存在!";
}
/** *//**
* @return the filepath
*/
public String getFilepath() ...{
return filepath;
}
/** *//**
* @param filepath
* the filepath to set
*/
public void setFilepath(String filepath) ...{
this.filepath = filepath;
}
/** *//**
* @return the builder
*/
public SAXBuilder getBuilder() ...{
return builder;
}
/** *//**
* @param builder
* the builder to set
*/
public void setBuilder(SAXBuilder builder) ...{
this.builder = builder;
}
}
3.处理AJAX请求的Servlet AddCommentServlet.java
package com.ceun.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ceun.bean.CommentBean;
/** *//**
* <p>后台处理Servlet</p>
*2007-01-30
* * @author ceun
* 联系作者:<br>
* <a href="mailto:[email protected]">ceun</a><br>
* @version 1.0 2007-01-30 实现基本功能<br>
* */
public class AddCommentServlet extends HttpServlet ...{
/** *//**
* serialVersionUID long
*/
private static final long serialVersionUID = 1L;
/** *//**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException ...{
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
String nikename = request.getParameter("nn");
String comment = request.getParameter("rsn");
String attitude = request.getParameter("atti");
String filepath = request.getSession().getServletContext().getRealPath(
"/upload/tech/20091011/20091011155513_854d9fca60b4bd07f9bb215d59ef5561.xml");
CommentBean bean = new CommentBean(filepath);
String str = bean.addComment(nikename, comment, attitude);
out.println(str);
}
/** *//**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to
* post.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException ...{
doGet(request, response);
}
}

4.JSP视图 ufo.jsp
<%...@ page contentType="text/html;charset=UTF-8"%>
<%...
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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" xml:lang="zh_CN" lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>ufo</title>
<link rel="stylesheet" type="text/css" href="css/ufo.css"/>
<script src="<%=basePath%>js/prototype.js" type="text/javascript"></script>
<script src="<%=basePath%>js/ufo.js" type="text/javascript"></script>
</head>
<SCRIPT type="text/javascript">...
<!--
window.onload=function()...{
getComments("<%=basePath%>/upload/tech/20091011/20091011155513_854d9fca60b4bd07f9bb215d59ef5561.xml");
}
//-->
</SCRIPT>
<body>
<div id="cinfoDiv" style="display:none;">
<h2>
信息提示
</h2>
<p id="cinfomsg">
</p>
</div>
<table id="process-indicator"
style="display:none;z-index:100;width:300px;">
<tr>
<td>
<img src="/upload/tech/20091011/20091011155514_23ce1851341ec1fa9e0c259de10bf87c.gif" />
<p>
正在处理中...
</p>
</td>
</tr>
</table>
<center>
<div id="comment-lists">
</div>
<div id="comment">
<div style="display:none;top:100px;left:200px;" id="locateDiv1">
</div>
<div id="comment-bar">
你认为外星人存在吗?
</div>
<div id="comment-form">
<form onsubmit="return false;" name="cform">
昵称:
<input type="text" id="nn" name="nn" />
<input type="radio" id="exist" name="exist" value="yes" />
存在
<input type="radio" id="exist" name="exist" value="no" />
不存在
<br />
<textarea name="reason" style="width: 480px;height:200px;"
id="reason"></textarea>
<button id="btnsubmit" class="button"
onclick="addComment('<%=path%>/addCommentServlet');">
发表你的看法
</button>
<input type="reset" id="btnreset" class="button" />
</form>
</div>
</div>
</center>
</body>
</html>
5.前台脚本 ufo.js
var Browser = ...{};
Browser.isMozilla = (typeof document.implementation !=
"undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined");
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != -1);
Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != -1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
String.prototype.trim=function()...{return this.replace(/^s+|s+$/g,"");};
function addComment(url)...{
var nn=$F("nn");
var rsn=$F("reason");
var atti=false;
var rbgroup=document.cform.elements["exist"];
for(i=0;i<rbgroup.length;i++)...{
if(rbgroup[i].checked) ...{atti=rbgroup[i].value;break;};
}
var locateTop=$("locateDiv1").parentNode.offsetTop-50;
var locateLeft=$("locateDiv1").parentNode.offsetLeft+150;
var alertMsg="";
if(!atti)
alertMsg+="<br/>请表明你的态度!";
if(nn.trim()=="")
alertMsg+="<br/>昵称不能为空!"
if(rsn.trim()=="")
alertMsg+="<br/>请写下你的理由!";
var cinfomsg=$("cinfomsg");
if(alertMsg!="")...{
cinfomsg.className="failure";
cinfomsg.innerHTML=alertMsg;
showDialog($("cinfoDiv"),locateTop,locateLeft);
return;
}else...{
cinfomsg.className="success";
cinfomsg.innerHTML="正处理数据中...";
showDialog($("cinfoDiv"),locateTop,locateLeft);
}
var pars="nn="+nn+"&atti="+atti+"&rsn="+rsn;
var http=Ajax.getTransport();
var contentType = "application/x-www-form-urlencoded; charset=utf-8";
http.open("POST",url,true);
http.setRequestHeader("Content-Type", contentType);
http.onreadystatechange=function()...{
if (http.readyState == 4)...{
if (http.status==200)...{
afterAdd(http);
}
}
}
http.send(pars);
}
function afterAdd(request)...{
hideDialog();
var atti=false;
var rbgroup=document.cform.elements["exist"];
for(i=0;i<rbgroup.length;i++)...{
if(rbgroup[i].checked) ...{atti=rbgroup[i].value;break;};
}
var nn=$F("nn");
var rsn=$F("reason");
generateCommentList(atti,nn,request.responseText,rsn)
$("nn").value="";
$("reason").value="";
}
function generateCommentList(atti,nn,date,rsn)...{
var commentLists=$("comment-lists");
var commentlist=document.createElement("div");
commentlist.className="comment-list";
var observerInfo=document.createElement("div");
observerInfo.className="observer-info";
var attitude=(atti=="yes")?"认为存在":"认为不存在";
var info=document.createTextNode("评论者:"+nn+" 观点:"+attitude+" "+date);
observerInfo.appendChild(info);
var observerComment=document.createElement("div");
observerComment.className="observer-comment";
var reason=document.createTextNode(rsn);
observerComment.appendChild(reason);
commentlist.appendChild(observerInfo);
commentlist.appendChild(observerComment);
if(commentLists.hasChildNodes())...{
var tmp=commentLists.firstChild;
commentLists.insertBefore(commentlist,tmp);
}else
commentLists.appendChild(commentlist);
}
function getComments(url)...{
Element.show("process-indicator");
Element.makePositioned("process-indicator");
var top = document.body.scrollTop + 200;
var left = "";
if ($("process-indicator").style.width) ...{
left =window.document.body.scrollWidth/2-100;
} else ...{
left = parseInt(document.body.clientWidth / 2);
}
var style = ...{top:top + "px", left:left + "px"};
Element.setStyle("process-indicator", style);
//加个随机数,去除缓存影响
var pars="rd=rd_"+parseInt(Math.random()*10000);
var http=Ajax.getTransport();
var contentType = "application/x-www-form-urlencoded; charset=utf-8";
http.open("POST",url,true);
http.setRequestHeader("Content-Type", contentType);
http.onreadystatechange=function()...{
if (http.readyState == 4)...{
if (http.status==200)...{
afterGetComments(http);
}
}
}
http.send(pars);
}
function afterGetComments(request)...{
//提示框
Element.hide("process-indicator");
var xmldata=request.responseXML;
var comments=xmldata.getElementsByTagName("comment");
if(!comments)...{alert("暂无评论");return;}
var len=comments.length;
for(var i=0;i<len;i++)...{
var atti=comments[i].getAttribute("attitude");
var nn=comments[i].getElementsByTagName("nikename")[0].firstChild.nodeValue;
var rsn=comments[i].getElementsByTagName("data")[0].firstChild.nodeValue;
var date=comments[i].getElementsByTagName("pubdate")[0].firstChild.nodeValue;
generateCommentList(atti,nn,date,rsn)
}
}
//对话框模块
var lastDialog=null;
function showDialog(dialog,offsetTop,offsetLeft)...{
if (lastDialog) lastDialog.style.display="none";
dialog.style.top=offsetTop+"px";
dialog.style.left=offsetLeft+"px";
dialog.style.display="";
lastDialog=dialog;
document.onmousedown=toHideDialog
}
function toHideDialog(event)...{
if (!lastDialog) ...{document.onclick=null;return;}
var obj=null;
if(Browser.isIE) obj=window.event.srcElement;
else obj=event.target;
hideDialog();
}
function hideDialog()...{
if (lastDialog) lastDialog.style.display="none";
lastDialog=null
document.onmousedown=null;
}
6.CSS ufo.css
#comment{...}{
background-color: InactiveCaptionText;
width: 550px;
height:300px;
margin-top:10px;
}
#comment-bar{...}{
color:white;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background-color: ActiveCaption;
}
#comment-form{...}{
padding-left:20px;
}
.button{...}{
BORDER-RIGHT: #283043 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #9097a2 1px solid;
PADDING-LEFT: 1px; BACKGROUND: ActiveCaption;; PADDING-BOTTOM: 1px;
BORDER-LEFT: #9097a2 1px solid; COLOR: #fff;
PADDING-TOP: 1px; BORDER-BOTTOM: #283043 1px solid;
margin: 10px;
}
#comment-lists{...}{
background-color: InactiveCaptionText;
width: 550px;
margin-bottom:10px;
}
div.comment-list{...}{
text-align: left;
border:1px solid ActiveCaption;
margin: 5px;
}
div.observer-info{...}{
color:white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
text-align: left;
background-color: ActiveCaption;
font-size: 14px;
}
div.observer-comment{...}{
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
#process-indicator{...}{
margin:10px;padding-top:15px;padding-right:5px;padding-left:5px;
background-color:cyan;position:absolute;border:2px solid ActiveCaption;
}
.success {...}{
COLOR: Blue;
}
.failure {...}{
COLOR: #ff665b
}
#cinfoDiv {...}{
position:absolute;
top:10px;
width:200px;
height:120px;
z-index:1000;
background-color:#F0F8FF;
border:1px solid #009999
}
#cinfoDiv h2{...}{
background-color:#483D8B;
font-size:14px;
color:#fff;
text-align:center;
margin-top:0px;
}
#cinfoDiv p{...}{
margin:5px;
text-align:center;
vertical-align: top;
font-size:14px;
}
7.comment.xml

<?xml version="1.0" encoding="GB2312"?>
<comments>
<comment id="comment_4119" attitude="yes">
<nikename><![CDATA[薜荔女萝衣]]></nikename>
<data><![CDATA[这个问题要全面分析。
外星很简单,相对于地球之外而言。
人吗,就给这个生物一个限定性标准了,至少要像人啊。
存在本身就是一个问题。谁能证明存在是存在的呢?
谁又能全面地证明存在是不存在的呢?类似高尔吉亚的智者派的方法就不要再用了。
之后才要探讨是与否的问题。
]]></data>
<pubdate>2007-01-31 20:53:33</pubdate>
</comment>
<comment id="comment_5953" attitude="yes">
<nikename><![CDATA[ぁあ宇宙过客]]></nikename>
<data><![CDATA[肯定会存在,难道真么大一个宇宙就只有地球有生物?
]]></data>
<pubdate>2007-01-31 20:56:17</pubdate>
</comment>
<comment id="comment_2199" attitude="yes">
<nikename><![CDATA[匿名]]></nikename>
<data><![CDATA[存在。如果没有的话怎么会在恐龙的肚子中找到一个相似外星化石呢?]]></data>
<pubdate>2007-01-31 21:00:43</pubdate>
</comment>
<comment id="comment_8637" attitude="yes">
<nikename><![CDATA[互相帮助小组]]></nikename>
<data><![CDATA[有高等智慧生物吧,但不一定是人的形势啊!我坚信它们的存在。]]></data>
<pubdate>2007-01-31 21:03:21</pubdate>
</comment>
<comment id="comment_237" attitude="yes">
<nikename><![CDATA[秦国园林]]></nikename>
<data><![CDATA[我就是外星人,我乘坐的大型飞行器----地球,不知什么时侯回到我的家乡----宇宙的起点.
自从人类产生就和那失去了联系,你能告诉我航行的方向吗?船长先生.
]]></data>
<pubdate>2007-01-31 21:11:06</pubdate>
</comment>
</comments>