一個(gè)jsp+AJAX評論系統(tǒng)
更新時(shí)間：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">...
<!--
window.onload=function()...{
getComments("<%=basePath%>data/comment.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="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">
你認(rèn)為外星人存在嗎?
</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');">
發(fā)表你的看法
</button>
<input type="reset" id="btnreset" class="button" />
</form>
</div>
</div>
</center>
</body>
</html>
5.前臺(tái)腳本 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/>請表明你的態(tài)度!";
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="正處理數(shù)據(jù)中...";
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")?"認(rèn)為存在":"認(rèn)為不存在";
var info=document.createTextNode("評論者:"+nn+" 觀點(diǎn):"+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);
//加個(gè)隨機(jī)數(shù),去除緩存影響
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[這個(gè)問題要全面分析。
外星很簡單，相對于地球之外而言。
人嗎，就給這個(gè)生物一個(gè)限定性標(biāo)準(zhǔn)了，至少要像人啊。
存在本身就是一個(gè)問題。誰能證明存在是存在的呢？
誰又能全面地證明存在是不存在的呢？類似高爾吉亞的智者派的方法就不要再用了。
之后才要探討是與否的問題。
]]></data>
<pubdate>2007-01-31 20:53:33</pubdate>
</comment>
<comment id="comment_5953" attitude="yes">
<nikename><![CDATA[ぁあ宇宙過客]]></nikename>
<data><![CDATA[肯定會(huì)存在，難道真么大一個(gè)宇宙就只有地球有生物？
]]></data>
<pubdate>2007-01-31 20:56:17</pubdate>
</comment>
<comment id="comment_2199" attitude="yes">
<nikename><![CDATA[匿名]]></nikename>
<data><![CDATA[存在。如果沒有的話怎么會(huì)在恐龍的肚子中找到一個(gè)相似外星化石呢？]]></data>
<pubdate>2007-01-31 21:00:43</pubdate>
</comment>
<comment id="comment_8637" attitude="yes">
<nikename><![CDATA[互相幫助小組]]></nikename>
<data><![CDATA[有高等智慧生物吧，但不一定是人的形勢?。∥覉?jiān)信它們的存在。]]></data>
<pubdate>2007-01-31 21:03:21</pubdate>
</comment>
<comment id="comment_237" attitude="yes">
<nikename><![CDATA[秦國園林]]></nikename>
<data><![CDATA[我就是外星人,我乘坐的大型飛行器----地球,不知什么時(shí)侯回到我的家鄉(xiāng)----宇宙的起點(diǎn).
自從人類產(chǎn)生就和那失去了聯(lián)系,你能告訴我航行的方向嗎?船長先生.
]]></data>
<pubdate>2007-01-31 21:11:06</pubdate>
</comment>
</comments>
相關(guān)文章
JSP開發(fā)入門(三)--JSP與JavaBean...2006-10-10
jsp+servlet實(shí)現(xiàn)文件上傳與下載功能
這篇文章主要為大家詳細(xì)介紹了jsp+servlet實(shí)現(xiàn)文件上傳與下載功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了JSP實(shí)現(xiàn)屏蔽瀏覽器緩存的方法,實(shí)例分析了兩種屏蔽瀏覽器緩存的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Spring mvc實(shí)現(xiàn)Restful返回json格式數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了Spring mvc實(shí)現(xiàn)Restful返回json格式數(shù)據(jù)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
獲取web服務(wù)器下的文件路徑、獲取本地路徑、獲取相對路徑等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了Linux 下java jps命令使用解析詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
jsp基礎(chǔ)學(xué)習(xí)資料...2006-10-10
JSP動(dòng)態(tài)生成驗(yàn)證碼存儲(chǔ)在session作用范圍內(nèi)
下面的代碼實(shí)現(xiàn)的功能：寫一個(gè)JSP頁，動(dòng)態(tài)生成一個(gè)驗(yàn)證碼，存儲(chǔ)在session作用范圍內(nèi)，并以圖像形式返回給客戶端顯示2014-09-09
JavaServlet的文件上傳和下載實(shí)現(xiàn)方法
下面小編就為大家分享一篇JavaServlet的文件上傳和下載實(shí)現(xiàn)方法具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
一個(gè)開發(fā)人員眼中的JSP技術(shù)(下)
一個(gè)開發(fā)人員眼中的JSP技術(shù)(下)...2006-10-10