JSP+jquery+xml实现点评无刷新更新
文件列表：
CommentData.html
AddData.jsp
Comment.xml
一、CommentData代码
<html>
<head>
<title>新闻点评功能</title>
<script language="javascript" type = "text/javascript"
src="Jscript/jquery-1.7.1.js"></script>
<style type="text/css">
body{font-size:13px}
a{text-decoration:none}
.divFrame{
width:572px;
border:solid 1px #666;
background-color:#fafcff
}
.divFrame .divTitle
{
padding:5px;
background-color:#eee
}
.divFrame .divTitle span
{
padding:2px;
padding-top:5px;
font-family:黑体;
font-size:14px
}
.divFrame .divContent
{
padding:8px
}
.divFrame .divContent .clShow .ShowBottom
{
text-align:right;
font-size:12px;
color:#555
}
.divFrame .divSubmit
{
padding:20px
}
.divFrame .divSubmit .SubContent .SubBtn
{
padding-top:10px;
padding-bottom:12px;
font-size:12px;
color:#555;
font-weight:bold
}
.clsTip
{
position:absolute;
width:160px;
text-align:center;
font-size:13px;
border:solid 1px #cc3300;
padding:2px;
margin-bottom:5px;
background-color:#ffe0a3
}
#txtContent{
height:100px;
width:530px;
}
#txtName{
height:20px;
width:100px;
}
</style>
<script type="text/javascript">
$(function(){
$("#divMsg").ajaxStart(function(){
$(this).show();
})
$("#divMsg").ajaxStop(function(){
$(this).html("数据处理已完成。").hide();
})
LoadData();
$("#Button1").click(function(){
var strName = encodeURI($("#txtName").val());
var strContent = encodeURI($("#txtContent").val());
$.ajax(
{
type:"GET",
url:"AddData.jsp",
dataType:"html",
data:{name:strName,content:strContent},
success:function(msg){
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
function LoadData(){
$.ajax(
{
type:"GET",
url:"CommentData.xml",
dataType:"xml",
cache:false,
success:function(data){
$(".divContent").empty();
var strHTML = "";
if($(data).find("Data").length == 0){
strHTML = "<div style='text-align:center'>目前还没有找到点评数据</div>"
}
$(data).find("Data").each(function(){
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>Forum网友 <a href =''>"+
$strUser.find("name").text()+"</a></div>";
strHTML += "<div class='ShowContent'>"+
$strUser.find("content").text()+"</div>";
strHTML +="<div class='ShowBottom'>发送时间 "+
$strUser.find("date").text()+"</div>";
strHTML += "</div>";
})
$(".divContent").html(strHTML);
//alert(strHTML);
}
})
}
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>最新点评</span>
</div>
<div class="divContent">
</div>
<div class="divSubmit">
<div class="SubTitle">发表评论
<span id="divMsg" class="clsTip">
正在发送数据请求...
</span>
</div>
<div class="SubContent">
<textarea id="txtContent" rows="6" class="txt"></textarea>
<div class="SubBtn">
<span style="float:left">用户名：
<input id="txtName" type="text" class="txt"/>
</span>
<span style="float:right">
<input id="Button1" type="button" value="发表" class="btn"/>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
二、AddData.jsp
<%@ page language="java" import="java.io.*,java.net.*,javax.xml.transform.stream.*,
org.w3c.dom.*,javax.xml.transform.*,javax.xml.parsers.*,javax.xml.transform.dom.*,java.util.Date"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String oldName = request.getParameter("name");
String strName = URLDecoder.decode(oldName,"UTF-8");
String oldContent = request.getParameter("content");
String strContent = URLDecoder.decode(oldContent,"UTF-8");
Date now = new Date();
String strDate = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
String filename = "CommentData.xml";
String filePath =request.getSession().getServletContext().getRealPath(filename);
//打开指定文件
Document document = null;
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
document = builder.parse(new File(filePath));
document.normalize();
Node xmlN = document.getDocumentElement();//获取根节点
Element xmlE = document.createElement("Data");//加入一个节点元素
Element xmlEn = document.createElement("name");//创建子节点name
xmlEn.setTextContent(strName);
xmlE.appendChild(xmlEn);
Element xmlEc = document.createElement("content");//创建子节点content
xmlEc.setTextContent(strContent);
xmlE.appendChild(xmlEc);
Element xmlEd = document.createElement("date");//创建子节点date
xmlEd.setTextContent(strDate);
xmlE.appendChild(xmlEd);
xmlN.appendChild(xmlE);//讲节点加入根节点
TransformerFactory tFactory = TransformerFactory.newInstance();
Transformer transformer = tFactory.newTransformer();
DOMSource source = new DOMSource(document);
StreamResult result = new StreamResult(new File(filePath));
transformer.transform(source, result);
PrintWriter pw = response.getWriter();
pw.print("您的点评已成功发表！");
pw.flush();
pw.close();
%>
三、CommentData.xml
<?xml version="1.0" encoding="UTF-8"?>
<Comment></Comment>
