XMLHttpRequest、fetch API和表单AJAX拦截是三种前端调用Java后端的Ajax方式：前者原生兼容性高，后者基于Promise更现代，最后通过阻止表单默认提交实现无刷新交互。
一、使用XMLHttpRequest发送Ajax请求
XMLHttpRequest是原生JavaScript中实现异步HTTP通信的核心对象，可直接向Java后端发起GET或POST请求，获取JSON响应并触发业务逻辑处理。该方式不依赖第三方库，兼容性高，适用于基础接口调用场景。
1、在HTML页面中定义一个JavaScript函数，创建XMLHttpRequest实例。
2、调用open()方法指定请求方式（如POST）、Java后端接口URL（如"/api/user/login"）及是否异步。
3、设置请求头Content-Type为"application/json"，确保Java后端能正确解析请求体。
立即学习“Java免费学习笔记（深入）”；
4、调用send()方法传入JSON字符串格式的请求数据，例如JSON.stringify({username:"admin",password:"123"})。
5、监听onload事件，在status为200时解析responseText为JSON对象，并执行前端业务逻辑，如跳转页面或更新DOM。
二、使用fetch API发起现代Ajax请求
fetch是HTML5标准引入的基于Promise的网络请求接口，语法简洁且天然支持async/await，适合与Java后端RESTful接口配合完成业务逻辑调用。
1、在JavaScript中声明async函数，内部调用fetch()传入Java后端接口地址，例如fetch("/api/order/create")。
2、配置fetch第二个参数为包含method、headers和body的对象，其中body需为JSON.stringify()序列化的数据。
3、使用await等待fetch返回Response对象，再调用response.json()解析Java后端返回的JSON数据。
4、在then链或try-catch块中处理成功响应，例如提取data.orderId用于后续订单状态轮询。
5、捕获网络错误或HTTP非2xx状态，显示"服务暂不可用，请稍后重试"提示信息。
三、通过表单提交结合AJAX拦截实现业务调用
当HTML页面已存在传统form元素时，可通过阻止默认提交行为，改用Ajax将表单数据发送至Java后端，保持页面不刷新的同时完成业务逻辑触发。
1、为form标签添加id属性（如id="loginForm"），并在submit事件监听器中调用event.preventDefault()。
2、使用new FormData(document.getElementById("loginForm"))收集所有input、select字段值。
3、构造fetch请求，将FormData对象作为body直接传入，Java后端通过@RequestParam或@RequestBody接收。
4、检查响应中返回的code字段，若值为200则执行登录成功逻辑，如存储token到localStorage。
5、若Java后端返回error字段内容为"验证码错误"，则在对应输入框下方动态插入提示文本节点。
