7.2.1 在 Ajax 请求中返回 HTML 格式内容
在前面介绍的 Ajax 实现中，复杂结构的响应数据由服务器通过 JSON 格式发送，
客户端接收后再经过 JavaScript 提取数据并构建 HTML 文档结构进行展示。
除此之外，服务器端还可以直接产生 HTML 格式的响应结果，客户端则可以将
响应结果直接套用在现有页面中。下面任以加载管理员页面的新闻列表为列展示此种
实现方式，供大家了解。了解两种响应格式的区别请扫描二维码。
加载 HTML 内容
首先修改管理员页面通过 Ajax 获取新闻列表的 JavaScript 脚本，如示例 4 所示。
示例4
$(document).ready(function()){
function initNews(){//使用 Ajax 技术获取新闻列表数据
$.ajax({
"url" :"../util/news",
"type" :"GET",
"data" :"opr = listHtml",
"dataType" :"html",
"success" :"processNewsList",
});
}
function processNewsList(data){//展示新闻列表
$("#opt_area>ul").html(data);
}
……//省略其他代码
});注意
在回调方法 procssNewsList() 中，没有对响应结果 data 做任何处理，而是将
其直接设置成列表的内容。
调整 NewsServlet 中的相关功能实现，以 HTML 元素的格式构建响应内容，如示例
5 所示。
示例 5
……//省略其他代码
else if("listHtml".equals(opr)){//编辑新闻时对新闻的查找
List<News> list = newsService.findAllNews();
News news = null;
StringBuffer newsList = new StringBuffer("");
for(int i =0;i<list.size();){
news = list.get(i);
newsList.append("<li>"+news.getNtitle()+"<span>"作者:"
+news.getNauthor() + " "
+"<a href = '#'>修改</a> "
+"<a href = '#' onclick = 'return clicdel()'>删除</a>"
+"</span></li>";
if((++i)%5 == 0){
newsList.append("<li class = 'space'></li>");
}
}
out.print(newsList);//输出结果到客户端
}……//省略其他代码NewsServlet 中按照页面展示需要，直接生成列表 <li> 的内容，客户端可以直接使用。
或者为了避免在 NewsServlet 中编写大量构建 HTML 内容的代码，还可以将查询结果发
送至专门的展示页面生成 HTML 内容，如示例 6 所示。
示例 6
NewsServlet 中的关键代码：
……//省略其他代码
else if("listHtml".equals(opr)){//编辑新闻时对新闻的查找
List<News> list = newsService.findAllNews();
request.setAttribute("list",list);
request.getRequestDispatcher("/newspages/shownews.jsp")
.forward(request,reponse);
} ……//省略其他代码
/newspages/showNews.jsp 中的全部代码如下所示。
<%@ page language = "java" pageEncoding = "utf-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core"%>
<li>${news.ntitle}<span>作者：${news.nauthor}
<a href = '#'>修改 </a>
<a href = '#' onclick='return clickdel()'>删除</a></span></li>
<c:if test = "${i.count%5 == 0}">
<li class = 'space'></li>
</c:if>
</c:forEach>注意
showNews.jsp 中仅包括客户端展示数据所需的 <li> 元素，没有其他页面结
构， showNews.jsp 产生的 HTML 内容将作为响应发送回客户端，直接嵌入页面中
使用。
技能训练
上机练习 3 ——在 Ajax 中直接返回 HTML 内容生成主题管理页面
需求说明
（1）在管理员页面单击 "编辑主题" 链接时，以 Ajax 方式获取主题列表并在管理
员页面展示，直接使用 <li> 元素返回列表内容。
（2）在 TopicServlet 或者 JSP 页面中生成 HTML 内容。
提升
参考示例 4 ~示例 6 的代码实现。
7.2.2 .load() 方法
对于通过 Ajax 请求直接加载 HTML 内容到当前页面的使用场景，jQuery 也提供了
一个 .load() 方法作为简易实现。该方法通过发送 Ajax 请求从服务器加载数据，并把响
应的数据直接添加到指定的元素中，其具体语法如下。
语法
$(selector).load(url[,data][,complete]);该方法参数的详细说明如表 7-4 所示。
| 参数 | 类型 | 说明 |
|---|---|---|
| url | String | 必选，规定将请求发送到哪个 URL |
| data | PlainObject 或 String | 可选，规定连同请求发送到服务器的数据 |
| complete | Function(String responseText, String textStatus,jqXHR jqxhr) |
可选，对每个匹配的元素设置完内容后都会触发该函数 参数 responseText: 可选，表示服务器返回的结果数据 参数 textStatus: 可选，描述请求状态的字符串 参数 jqxhr: 可选， jqXHR 是 XMLHttpRequest 的超集 |
该方法默认使用 GET 方法发送请求。除非提供的 data 参数是一个对象，则使用
POST 方法发送。
该方法是最简单的从服务器获取数据的 Ajax 方法，它几乎与 $.get(url,data,success)
方法等价。不同的是它不是全局函数，而是针对与选择器匹配的元素执行，并且它拥
有匿名的回调函数，当请求成功后，.load() 方法自动将返回的数据设置为匹配元素的
HTML 内容。列如，在上一节案例的基础上，使用 .load() 方法实现直接为管理员页面
加载服务器生成的新闻列表，如示例 7 所示。
示例 7
$(document).ready(function()){
function initNews(){//使用 Ajax 技术获取新闻列表数据
$("#opt_area>ul").load("../util/news","opr = listHtml");
}
initNews();//执行新闻列表初始化工作
……//省略其他部分代码
});以上代码实现了异步发送 GET 请求到服务器端，并且当服务器端成功返回列表数
据时，自动将 HTML 格式的结果隐式地添加到调用 load() 方法的 jQuery 对象中。黑体
部分的代码等价于。
$.get("../util/news","opr =listHtml",function(data)){
$("#opt_area>ul").html(data);
});只是扩展
.load() 方法还可以仅加载远程文档的某个部分，通过 url 参数的特殊语法
可以实现。url 参数中可以通过空格链接决定加载内容的 jQuery 选择器，如以下
代码：
$("#result").load("article.html#target");jQuery 会取回 article.html 的内容，然后解析返回的文档，查找 id 为 target 的
元素。该元素连同其内容会被插入 id 为 result 的元素，所取回文档的其他部分则
被丢弃。
以上介绍的 $.get()、$.post()、$.getJSON()、.load() 等常用 Ajax 方法都是基
于 $.ajax() 方法封装的，相比于 $.ajax() 方法更加简洁、方便。通常情况下，对
于一般的 Ajax 功能需求使用以上 Ajax 方法即可满足，如果需要更多的灵活性，
则可以使用 $.ajax() 方法指定更多参数。
技能训练
上机练习4——使用 .load() 方法为管理员页面加载服务器生成的主题列表
需求说明
在管理员页面单击 "编辑主题" 链接时，以 .load() 方法获取服务器生成的主题列表，
并在管理员页面展示。