一,需求分析
(1)使用XML文档保存新闻点评数据,在初始化页面点评和发表点评内容时,使用无刷新的方式调用该数据。
(2)使用无刷新的方式,获取页面中提交的数据,通过服务器文件,写入保存新闻点评数据的XML文档中。
(3)无论是获取数据,还是请求服务器响应,在页面中都有人性化的提示信息侦察进程的状态,即操作时显示,操作完成后隐藏。
二,功能实现
引入文件:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<link type="text/css" href="Css/css_Ajax.css" rel="Stylesheet" />
<script type="text/javascript" src="Jscript/js_Ajax.js"></script>
主体部分:
<div class="divFrame">
<div class="divTitle">
<span>最新点评</span>
</div>
<div class="divContnt">
</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>
css_Ajax.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 .clsShow .ShowBttom{
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-szie:13px;
border:solid 1px #cc3300;
padding:2px;
margin-bottom:5px;
backgrou-color:#ffe0a3;
}
.....省略部分代码
js_Ajax.js文件代码:
///<reference path="jquery-1.8.2.min.js"/>
$(function() {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("数据处理已完成").hide();
})
//初始化点评数据
LoadData ();
$("#Button1").click(function() { //点击“发表”按钮事件
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
//获取加码后的发表内容
var strContent = encodeURI($("#txtContent").val());
$.ajax({
type:"GET",
url:"CommentData.xml", //请求XML格式数据
dataType:"html",
data:{name:strName,content:strContent},
success:function(msg) {
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
/*
动态加载XML格式的点评数据
*/
function LoadData() {
$.ajax({
type:"GET",
url:"CommentData.xml", //请求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'>荣拓网友
<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); //显示处理后的数据
}
}
})
服务器端文件:
<%@ Page Language="#C" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.IO"%>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码点评用户名称
string strContent = System.Web.HttpUtility.UrlDecode(Request["content"]); //解码点评提交内容
string strFileName = "CommentData.xml";
//定义xml文档变量
XmlDocument xmlDoc = new XmlDocument();
//打开指定的XML文档
XmlDoc.Load(Server.MapPath(strFileName));
//查找根节点元素
XmlNode xmlN = xmlDoc.SelectSingleNode("Comment");
//加入一个节点元素
XmlElement xmlE = xmlDoc.CreateElement("Data");
//创建一个子节点
XmlElement xmlEn = xmlDoc.CreateElement("name");
//设置节点文本
xmlEn,InnerText = strName;
//添加到节点中
xmlE.AppendChild(xmlEn);
//创建一个节点
XmlElement xmlEc = xmlDoc.CreateElement("content");
//设置节点文本
xmlEc.InnerText = strContent;
//添加到节点中
xmlE.AppendChild(xmlEc);
//创建一个子节点
XmlElement xmlEd = xmlDoc.CreateElement("date");
//获取时间的时分秒
string strSendTime = DateTime.Now.Hour + ":" + DateTime.Now.Minute + ":" + DateTime.Now.Second;
xmlEd.InnerText = strSendTime;
//添加到节点中
xmlE.AppendChild(xmlEd);
//将节点加入根节点中
xmlN.AppendChild(xmlE);
//保存创建好的XML文件
xmlDoc.Save(Sever.MapPath(strFileName));
Response.Write("您的点评已成功发表!");
%>
代码分析:
为了即时侦察出客户端各种Ajax请求进展状态,使用全局事件ajaxStart与ajaxStop绑定客户端页面中ID号为“divMsg”的元,在请求触发和停止时,显示不同的内容和状态,其代码如下:
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("数据处理已完成").hide();
})
用于页面在初始化与提交点评内容后,都要加载XML格式的点评数据,为了避免重复,我们自定义一个JS函数LoadData,其功能就是使用$.ajax()方法,请求加载XML格式的点评数据,其代码如下:
/*动态加载XML格式的点评数据*/
function LoadData() {
$.ajax({
type:"GET",
url:"CommentData.xml", //请求XML格式数据
dataType:"xml",
success:function(data){
//请求数据成功后执行的代码
..............
}
})
}
在自定义读取XML点评数据的函数在,当请求成功后返回数据时,执行一个回调函数,在该函数中,先清空显示加载数据的页面元素,然后,遍历返回的数据,在遍历过程中,通过find()方法定位各指定名称的元素内容,并以叠加的方式保存在字符变量strHTML中,最后,通过元素的html()方法将数据显示页面中,其实现代码如下:
.....省略部分代码
$(".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'>荣拓网友
<a href=''>"; + $strUser.find("name").text()+"</a></div>";
strHTML += "<div class="ShowContent">" +
$strUser.find("content").text() + "</div>";
strHTML += "<div class="ShowBottom">发送时间 " +
$strUser.find("data").text() + "</div>";
strHTML += "</div>"
})
$(".divContent").html(strHTML); //显示处理后的数据
.....省略部分代码
当用户单击“提交”按钮时,先以加码的方式获取页面中“内容”和“用户名”的值,并将该值作为请求服务器的参数,执行一个$.ajax()方法,向服务器页面AddData.aspx发出请求,其实现代码如下所示:
.....省略部分代码
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
$.ajax({
type:"GET",
url:"AddData.aspx", //请求增加数据动态页
dataType:"html",
data:{name:strName,content:strContent},
success:function(msg){
//请求数据成功后执行代码
......
}
})
........省略部分代码
在单击“提交”按钮,传递参数请求服务器并响应成功后,执行一个请求成功的回调函数,在该函数中,先弹出一个窗口,显示服务器传回的值,然后,重新执行自定义的函数LoadData,即再次加载点评数据。最后,清空文本框“内容”和“用户名”中的值,其实现代码如下所示:
.....省略部分代码
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
.....省略部分代码