任务3：使用原生 JSON 格式构建响应数据
在前面的 Ajax 实现中，服务器响应的内容是一些简单的文本，对于更多应用而言
这是远远不够的。列如，电商网站中动态加载商品评论，电子邮件 Web 客户端动态加
载邮件列表等，这就需要用到一些结构化的数据表示方式，如前文提到的 JSON。
6.3.1 认识 JSON
JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。它是基于
JavaScript 的一个子集，采用完全独立于语言的文本格式。JSON 类似于实体类对象，通
常用来在客户端和服务器之间传递数据。在Ajax 出现之初，客户端脚本和服务器之间
传递数据使用的是 XML，但 XML 难于解析，代码量也比较大。JSON 出现后，以其轻
量级易于解析的优点，很快受到业界的广泛关注，现在大有将XML 取而代之的趋势。
JSON 的语法较简单，只需掌握如何使用 JSON 来定义对象和数组即可，其基本语
法如下。
1.定义 JSON 对象
语法
var JSON 对象 = {name:value,name:value…};
JSON 数据以名 /值对的格式书写，名和值用 ":"隔开，不同的名/ 值之间用 ","
隔开，整个表达式放在 "{ }" 中。其中，name 必须是字符串，由双引号 (" ") 括起来，
value 可以是 String、Namber、boolean、null、 对象、数组。列如：
var person = {"name":"张三"，"age":30,"spouse":null};
如果只有一个值，把它当成只有一个属性的对象即可，如{"name":"张三"}。
2. 定义 JSON 数组
语法
var JSON 数组 = [value,vlue…];JSON 数组的整个表达式放在 "[ ]" 中，元素之间用 "," 隔开。
字符串数组举例：["中国"，"美国"，"俄罗斯"]。
对象数组举例：[{"name":"张三","age":30},{"name":"李四","age":40]。
了解了 JSON 的基本语法后，下面介绍如何使用 jQuery 处理 JSON 数据。
6.3.2 定义使用 JSON 格式的数据
示例 4 展示了如何以 JSON 对象和 JSON 数组来定义数据，并以页面中常见的格式
展示它们。
示例4
JavaScript 关键代码：
$(document).ready(function){
//1. 定义 JSON 格式的 user 对象，并在 div 中输出
var user = {
"id" : 1,
"name" : "张三",
"pwd" : "000"
};
$("#objectDiv").append("ID："+user.id + "<br>")
.append("用户名 ："+user.name+"<br>")
.append("密码 ："+user.pwd+"<br>");
//2. 定义 JSON 格式的字符串数组，并在 ul 和 select 中输出
var ary = ["中"，"美","俄"];
var $ary = $("#arrayUI");//展示数据的 ul 元素
var $sel = $("#arrySel");//展示数据的 select 元素
$ary.each(function(){$ul.append("<li>"+this+"</li>");});
$sel.append("<option value = "'+(i+1)+"'>"+this+"</option>");
});
//3. 定义 JSON 格式的 user 对象数组，并使用 <table> 输出
var userArray = [{
"id" : 2,
"name" : "admin",
"pwd" : "123"
},{
"id" :3,
"name" : "詹姆斯"，
"pwd" : "11111"
},{
"id" :4,
"name" :"梅西" ,
"pwd" : "6666"
}];
//展示数据的 table 元素
var $table = $("<table border = '1'></table>").append(
"<tr><td>ID</td><td>用户名</td><td>密码</td></tr>")
.appendTo($("#objectArrayDiv"));
$(userArry).each(function()){
$table.append("<tr><td>+this.id+"</td><td>"
+this.name + "</td><td>"
+this.pwd + "</td><tr>");
});
});
HTML 关键代码：
<body>
一、JSON 格式的 user 对象：<div id="objectDiv"><div><br>
二、JSON 格式的字符串数组： <select id = "arraySel"></select>
<ul id="arrayUI"></ul>
三、JSON 格式的 user 对象数组：<div id = "objectArrayDiv"></div>
</body>程序运行结果如图 6.7 所示；
技能训练
上机练习 3 ——以常见页面元素展示 JSON 数据
需求说明
（1）使用 JSON 定义用户数组，用户信息包括用户 ID （userid）、姓名(username)、
住址(address)、手机（mobile）。
（2）将用户信息分别展示为表格和下拉列表形式，效果如图 6.8 所示。
图6.7 在页面中展示 JSON 格式数据
图 6.8 以常见页面元素展示 JSON 数据
6.3.3 在响应数据中使用 JSON 格式
了解了 JSON 数据格式及其使用方法，接下来就可以在 Ajax 的请求和响应中使用
JSON 来实现复杂格式数据的传递。
新闻发布的管理员从首页登录成功后，会导航至 "查询全部新闻" 功能，并在
查询成功后跳转至 /newspages/admin.jsp 页面展示，如图 6.9 所示。
图 6.9 管理员操作页面
现在以 Ajax 技术改造 /newspages/admin.jsp 页面的初始化功能，实现步骤如下。
（1）修改登录成功后的导航路径，直接指向 /newspages/admin.jsp, 代码如示例5
所示。
示例 5
……//省略其他代码
request.getSession().setAttribute("admin",uname);
//不再导航至/util/news?opr = list 查询新闻列表
//response.sendRedirect(contextpath+"/util/news?opr=list");
//直接跳转至 /newspages/admin.jsp,在 admin.jsp 页面中使用 Ajax 加载新闻数据
response.sendRedirect(contextPath + "/newspages/admin.jsp");（2）在 admin.jsp 页面删除原有的数据加载及输出代码，编写 JavaScript 脚本，通
过 Ajax 技术加载新闻数据并进行展示，代码如示例 6 所示。
示例 6
$(document).ready(function()){
$.ajax({
"url" :"../util/news",
"type" :"GET0",
"data" :"opr = list",
"data Type" :"json",
"success" :processNewsList
})
}
function processNewsList(data){ //展示新闻列表
var $newsList = $("#opt_area>ul").empty(); //获取新闻列表所在的父容器
for(var i = 0;i<data.length;){ //添加新闻列表
$newsList.append("<li>"+data[i].nitle+"<span>作者："
+data[i].nauthor+" "
+"<a href = '#'>修改</a> "
+"<a href = '#'onlick = 'return clickdel()'>删除</a>"
+"</span></li>");
if((++i)%5==0){
$newsList.append("<li class = 'space'></li>");
}
}
}
intNews();//执行新闻列表初始化工作
});
（3）修改 NewsServlet 中查询新闻列表的实现，以 JSON 格式输出查询结果，代码
如示例 7 所示。
示例 7
……省略其他代码
else if("list".equals(opr)){//编辑新闻时对新闻的查找
List<News> list = newsService.findAllNews();
//不再封装数据并跳转至JSP
//request.getSession().setAttribute("list",list);
//reponse.sendRedirect(contextPath+"/newspages/admin.jsp");
News news = null;
//拼装 JSON 数组格式的响应内容
StringBuffer newsJSON = new StringBuffer("[");
for(int i = 0;;){
news = list.get(i);
newsJSON.append("{\"nid":"news.getNid()+",");
newsJSON.append("\"ntitle\":\""
+news.getNititle().replace("\"","""")+"\",");
newsJSON.append("\"nauthor\":\""
+news.getNauthor().replace("\"",""")+"\"});
if((==i)==list.size()){
break:
}else{
newsJSON.append(",");
}
}
newsJSON.append("]");
out.print(news.JSON);//发送响应结果至客户端
}……//省略其他代码注意
为了避免内容中的双引号 （"）导致 JSON 解析错误，使用 String 的 replace
("\"",""")方法对其进行了转义处理。
程序运行结果如图 6.9 所示。
技能训练
上机练习 4——在 Ajax 中使用 JSON 生成管理员新闻页面
需求说明
按照示例 5 ~ 示例 7 的需求，使用 $.ajax()方法完成管理页面新闻列表的初始化
工作，使用 JSON 返回列表内容示。
提示
参考示例 5 ~示例7 的代码实现。
上机练习 5 ——在 Ajax 中使用 JSON 生成主题管理页面
需求说明
（1）在管理员页面单击"编辑主题" 链接时，以Ajax 方式获取主题列表并在管理
员页面展示，使用 JSON 返回列表内容，如图 6.10所示。
图 6.10 主题管理列表
（2）在管理员页面单击 "编辑新闻" 链接时，以 Ajax 方式获取新闻列表并在管理
员页面展示，使用 JSON 返回列表内容，如图 6.9 所示。
提示
（1）修改/newspages/console_element/left.html 中的超链接，禁用其直接跳转功能。
<a href="../newspages/news_add.jsp">添加新闻</a>
<a href="javascript:;">编辑新闻</a>
<a href="../newspages/topic_add.jsp">添加主题</a>
<a href="javascript:;">编辑主题</a>（2）参考示例 6 ，在管理员页面的 JavaScript 脚本中编写使用 Ajax 加载主题
列表的方法，并注册到超链接的单击事件。
function initTopics(){//使用 Ajax 技术获取主题列表数据
$.ajax({
……//省略部分代码
});
}
……//省略部分代码
var $leftLinks = $("#opt_list a"); //获取页面左侧功能连接
$leftLinks.eq(3).click(initTopics): //为 "编辑主题" 链接注册单击事件
$leftLinks.eq(1).click(initNews); //为 "编辑新闻" 链接注册单击事件
（3）参考示例 7 修改 TopicServlet 中查询主题列表功能的功能实现，以 JSON 数组
格式返回响应内容。
（4）因为以 Ajax 方式在管理员页面完成了主题列表的加载，故原 /newspages/
topic_list.jsp 不再使用，可以删除。