当前位置：首页 > news >正文

【JavaWeb学习 | 第21篇】AJAX与JSON详解

news 2026/6/5 22:48:23

【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")publicclassCheckUsernameServletextendsHttpServlet{@OverrideprotectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{resp.setContentType("application/json;charset=UTF-8");Stringusername=req.getParameter("username");// 模拟业务：调用Service判断用户名是否存在booleanexists=UserService.isUsernameExists(username);// 实际写业务逻辑Map<String,Object>result=newHashMap<>();if(exists){result.put("code",500);result.put("msg","用户名已被注册！");}else{result.put("code",200);result.put("msg","用户名可用！");}// 使用 Gson 转为 JSON 返回（推荐）Gsongson=newGson();Stringjson=gson.toJson(result);resp.getWriter().write(json);}}

使用 Jackson 的写法（更常见于企业项目）：

ObjectMappermapper=newObjectMapper();Stringjson=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（注解丰富、性能好）。