一个jsp+AJAX评论系统

更新时间：2007年05月19日 00:00:00 作者：

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">...

</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="images/loading.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>

您可能感兴趣的文章:

一个jsp+AJAX评论系统

JSP避免Form重复提交的三种方案
避免重复提交form的三种方法实现代码。
2009-04-04
jsp中实现上传图片即时显示效果功能
上传图片时即时显示图片效果，这在项目开发中时很常见的一项功能，接下来介绍此功能的实现过程，有需要的朋友可以参考下
2013-01-01
jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select
后台传递过来的json格式的list数据如何绑定到下拉菜单，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
JSP struts2 url传参中文乱码解决办法
这篇文章主要介绍了JSP struts2 url传参中文乱码解决办法的相关资料,需要的朋友可以参考下
2017-04-04
jsp读取数据库实现分页技术简析
这篇文章介绍的是用javabean和jsp页面来实现数据的分页显示，例子中所使用的数据库是Mysql,需要的朋友可以了解下
2012-11-11
jsp测试函数的运行速度方法
JavaScript运行时间过长是因为函数内包含了过多的循环。这篇文章主要介绍了jsp测试函数的运行速度，需要的朋友可以参考下。
2016-10-10
jsp的常用指令有哪些(编译指令/动作指令整理)
jsp的常用指令有哪些？Jsp包含三个编译指令和七个动作指令，具体祥看下文，希望对你面试有所帮助
2013-05-05
J2SE1.5 注释语法
J2SE1.5 注释语法...
2006-10-10
十三、JSP动作
十三、JSP动作...
2006-10-10
浅谈Servlet转发到JSP页面的路径问题(必看)
下面小编就为大家带来一篇浅谈Servlet转发到JSP页面的路径问题(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07