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

【JavaWeb学习 | 第21篇】AJAX与JSON详解在前面的文章中我们学习了Servlet MVC、Filter、EL JSTL页面交互基本都是同步的提交表单 → 页面整体刷新 → 显示结果。这种方式用户体验较差白屏、闪烁尤其在列表查询、登录校验、实时提示等场景下很不友好。AJAXAsynchronous JavaScript and XML的出现彻底改变了这一点。它允许异步与服务器通信在不刷新整个页面的情况下局部更新数据大幅提升用户体验。而JSON是目前前后端数据交换最主流的格式轻量、易解析、跨语言。一、什么是AJAXAJAX 不是一种新技术而是一种开发技术组合Asynchronous异步JavaScriptAndXML现在基本被 JSON 替代核心原理通过 JavaScriptXMLHttpRequest 或现代 Fetch API向服务器发送请求服务器返回数据后JavaScript 动态更新页面部分内容。优点无页面刷新体验流畅减少服务器压力只传必要数据支持局部更新如搜索提示、点赞、评论等缺点不利于 SEO搜索引擎抓取困难浏览器前进/后退按钮可能失效需额外处理增加了前端代码复杂度二、JSONJavaScript Object NotationJSON 是一种轻量级数据交换格式语法简单人类和机器都易读。基本语法{name:张三,age:25,hobbies:[篮球,编程],address:{city:北京,zip:100000},married:false}在Java中常用处理库推荐GsonGoogle出色轻量Jackson功能强大Spring 默认使用Fastjson阿里巴巴速度快但有安全历史问题谨慎使用三、JavaWeb 中 AJAX JSON 完整示例用户异步校验用户名是否存在1. 前端页面check.jsp—— 使用 jQuery学习阶段推荐简单易懂% page contentTypetext/html;charsetUTF-8 languagejava % html head title异步用户名校验/title script srchttps://code.jquery.com/jquery-3.7.1.min.js/script /head body h2注册/h2 用户名input typetext idusername placeholder请输入用户名 span idmsg stylecolor:red;/spanbrbr button onclickcheckUsername()检查用户名/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:usernameencodeURIComponent(username)}).then(responseresponse.json()).then(result{// 处理 result}).catch(errorconsole.error(Error:,error));2. 后端 ServletCheckUsernameServlet.java// com.example.web.CheckUsernameServlet.javaWebServlet(/checkUsername)publicclassCheckUsernameServletextendsHttpServlet{OverrideprotectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{resp.setContentType(application/json;charsetUTF-8);Stringusernamereq.getParameter(username);// 模拟业务调用Service判断用户名是否存在booleanexistsUserService.isUsernameExists(username);// 实际写业务逻辑MapString,ObjectresultnewHashMap();if(exists){result.put(code,500);result.put(msg,用户名已被注册);}else{result.put(code,200);result.put(msg,用户名可用);}// 使用 Gson 转为 JSON 返回推荐GsongsonnewGson();Stringjsongson.toJson(result);resp.getWriter().write(json);}}使用 Jackson 的写法更常见于企业项目ObjectMappermappernewObjectMapper();Stringjsonmapper.writeValueAsString(result);3. 返回的 JSON 示例{code:200,msg:用户名可用}或{code:500,msg:用户名已被注册}四、AJAX 核心参数说明jQuery.ajax参数含义说明常用值url请求地址Servlet路径type请求方式GET / POSTdata发送到服务器的数据对象或字符串dataType预期服务器返回的数据类型json / text / htmlsuccess请求成功时的回调函数function(result){}error请求失败时的回调函数function(){}async是否异步默认truetrue / false五、实际开发最佳实践2026年视角优先使用 Fetch API 或 Axios比 jQuery.ajax 更现代统一返回格式推荐{code:200,// 业务状态码msg:操作成功,data:{...}// 真正的数据}前后端分离趋势传统 JavaWebJSP中 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项目了下一篇文章见