【JavaWeb学习 | 第21篇】AJAX与JSON详解
在前面的文章中，我们学习了 Servlet + MVC、Filter、EL + JSTL，页面交互基本都是同步的：提交表单 → 页面整体刷新 → 显示结果。
这种方式用户体验较差（白屏、闪烁），尤其在列表查询、登录校验、实时提示等场景下很不友好。
AJAX（Asynchronous JavaScript and XML）的出现，彻底改变了这一点。它允许异步与服务器通信，在不刷新整个页面的情况下，局部更新数据，大幅提升用户体验。
而 JSON 是目前前后端数据交换最主流的格式，轻量、易解析、跨语言。
一、什么是AJAX？
AJAX 不是一种新技术，而是一种开发技术组合：
- Asynchronous（异步）
- JavaScript
- And
- XML（现在基本被 JSON 替代）
核心原理：通过 JavaScript（XMLHttpRequest 或现代 Fetch API）向服务器发送请求，服务器返回数据后，JavaScript 动态更新页面部分内容。
优点：
- 无页面刷新，体验流畅
- 减少服务器压力（只传必要数据）
- 支持局部更新（如搜索提示、点赞、评论等）
缺点：
- 不利于 SEO（搜索引擎抓取困难）
- 浏览器前进/后退按钮可能失效（需额外处理）
- 增加了前端代码复杂度
二、JSON（JavaScript Object Notation）
JSON 是一种轻量级数据交换格式，语法简单，人类和机器都易读。
基本语法：
{
"name": "张三",
"age": 25,
"hobbies": ["篮球", "编程"],
"address": {
"city": "北京",
"zip": "100000"
},
"married": false
}
在Java中常用处理库（推荐）：
- Gson（Google，出色，轻量）
- Jackson（功能强大，Spring 默认使用）
- Fastjson（阿里巴巴，速度快，但有安全历史问题，谨慎使用）
三、JavaWeb 中 AJAX + JSON 完整示例（用户异步校验用户名是否存在）
1. 前端页面（check.jsp）—— 使用 jQuery（学习阶段推荐，简单易懂）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>异步用户名校验</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2>注册</h2>
用户名：<input type="text" id="username" placeholder="请输入用户名">
<span id="msg" style="color:red;"></span><br><br>
<button onclick="checkUsername()">检查用户名</button>
<script>
function checkUsername() {
var username = $("#username").val();
if (!username) {
alert("用户名不能为空！");
return;
}
$.ajax({
url: "${pageContext.request.contextPath}/checkUsername", // 请求Servlet
type: "POST",
data: {"username": username},
dataType: "json", // 期望服务器返回JSON
success: function(result) { // 请求成功回调
if (result.code === 200) {
$("#msg").html("✅ " + result.msg).css("color", "green");
} else {
$("#msg").html("❌ " + result.msg).css("color", "red");
}
},
error: function() { // 请求失败回调
$("#msg").html("网络错误，请稍后重试").css("color", "red");
}
});
}
</script>
</body>
</html>
现代推荐写法（不依赖 jQuery）：
使用原生 Fetch API（浏览器内置）：
fetch('${pageContext.request.contextPath}/checkUsername', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'username=' + encodeURIComponent(username)
})
.then(response => response.json())
.then(result => {
// 处理 result
})
.catch(error => console.error('Error:', error));
2. 后端 Servlet（CheckUsernameServlet.java）
// com.example.web.CheckUsernameServlet.java
@WebServlet("/checkUsername")
public class CheckUsernameServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("application/json;charset=UTF-8");
String username = req.getParameter("username");
// 模拟业务：调用Service判断用户名是否存在
boolean exists = UserService.isUsernameExists(username); // 实际写业务逻辑
Map<String, Object> result = new HashMap<>();
if (exists) {
result.put("code", 500);
result.put("msg", "用户名已被注册！");
} else {
result.put("code", 200);
result.put("msg", "用户名可用！");
}
// 使用 Gson 转为 JSON 返回（推荐）
Gson gson = new Gson();
String json = gson.toJson(result);
resp.getWriter().write(json);
}
}
使用 Jackson 的写法（更常见于企业项目）：
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(result);
3. 返回的 JSON 示例
{"code":200,"msg":"用户名可用！"}
或
{"code":500,"msg":"用户名已被注册！"}
四、AJAX 核心参数说明（jQuery.ajax）
| 参数 | 含义说明 | 常用值 |
|---|---|---|
| url | 请求地址 | Servlet路径 |
| type | 请求方式 | GET / POST |
| data | 发送到服务器的数据 | 对象或字符串 |
| dataType | 预期服务器返回的数据类型 | json / text / html |
| success | 请求成功时的回调函数 | function(result){} |
| error | 请求失败时的回调函数 | function(){} |
| async | 是否异步（默认true） | true / false |
五、实际开发最佳实践（2026年视角）
- 优先使用 Fetch API 或 Axios（比 jQuery.ajax 更现代）
- 统一返回格式（推荐）：
{
"code": 200, // 业务状态码
"msg": "操作成功",
"data": { ... } // 真正的数据
}
- 前后端分离趋势：传统 JavaWeb（JSP）中 AJAX 仍常用；大型项目推荐 Spring Boot + Vue/React + RESTful JSON 接口。
- 安全注意：
- 服务器端一定要校验参数，防止注入
- 敏感操作使用 POST + Token/CSRF 防护
- JSON 中避免直接返回敏感信息
- Gson vs Jackson：学习阶段用 Gson 简单；企业项目推荐 Jackson（注解丰富、性能好）。
六、练习建议（必须动手！）
- 实现异步用户名唯一性校验（本篇示例）。
- 做一个商品搜索提示（输入关键字，AJAX返回匹配商品列表，用JSTL或JS动态渲染表格）。
- 实现无刷新分页（点击下一页，AJAX获取数据，局部更新表格）。
- 尝试用 Jackson 替换 Gson，并返回包含 List 的复杂 JSON。
- 进阶：前后端完全分离，用纯 HTML + JS 调用 Servlet 返回 JSON（不再用 JSP 渲染）。
系列文章导航（持续更新中）：
- 第19篇：Filter过滤器
- 第20篇：EL表达式与JSTL标签
- 第21篇：AJAX与JSON详解（本文）
- 第22篇：Listener监听器（应用监听、Session监听、在线人数统计等）
下一篇文章预告：我们将学习 Listener（监听器），它能监听 ServletContext、HttpSession、ServletRequest 的生命周期和属性变化，是实现“网站在线人数统计”、“Session超时处理”等功能的必备技术。
有任何疑问（比如想看完整注册+校验的代码、Jackson详细用法、或如何用Axios替代jQuery），欢迎在评论区留言，我会及时补充更多示例！
掌握了 AJAX + JSON 后，你的JavaWeb项目将从“静态刷新”升级为“动态交互”，用户体验迈上一个新台阶！继续加油，你已经越来越接近能独立开发中小型Web项目了！🚀
下一篇文章见～
