综合案例分析-----使用Ajax实现新闻点评及时更新（ajax在jQuery中的运用学习第十三和十四天）

一，需求分析

（1）使用XML文档保存新闻点评数据，在初始化页面点评和发表点评内容时，使用无刷新的方式调用该数据。

（2）使用无刷新的方式，获取页面中提交的数据，通过服务器文件，写入保存新闻点评数据的XML文档中。

（3）无论是获取数据，还是请求服务器响应，在页面中都有人性化的提示信息侦察进程的状态，即操作时显示，操作完成后隐藏。

二，功能实现

引入文件：

主体部分：

</div>

</div>

<div class="SubTitle">发表评论

正在发送数据请求。。。。。。

</span>

</div>

<span style="float:left">用户名：

</span>

</span>

</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("");

.....省略部分代码