在Web开发中，HTML5作为前端页面基础，结合Ajax技术可以实现无刷新请求Java后端接口，完成各类业务逻辑的调用，是前后端分离架构下的核心交互方式。
前端Ajax请求实现
HTML5页面中可以直接使用原生JavaScript的XMLHttpRequest对象或者Fetch API发送Ajax请求，也可以使用jQuery等库简化操作。以下是原生XMLHttpRequest发送POST请求调用后端用户查询接口的示例：
// 获取页面按钮元素，绑定点击事件
document.getElementById('queryBtn').addEventListener('click', function() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求方法和后端接口地址
xhr.open('POST', 'http://ipipp.com:8080/user/query', true);
// 设置请求头，指定发送的数据格式为JSON
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
// 监听请求状态变化
xhr.onreadystatechange = function() {
// 请求完成且响应成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析后端返回的JSON数据
var result = JSON.parse(xhr.responseText);
// 将结果展示到页面
document.getElementById('resultDiv').innerText = '查询结果：' + result.data;
}
};
// 构造请求参数
var params = {
userId: 1001,
userName: '测试用户'
};
// 发送请求，参数转为JSON字符串
xhr.send(JSON.stringify(params));
});
Java后端接口编写
Java后端通常使用Spring Boot框架快速搭建接口，通过@RestController注解定义接口类，接收前端请求并处理业务逻辑，最后返回JSON格式的响应。以下是用户查询接口的实现示例：
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/user")
public class UserController {
/**
* 用户查询接口，接收前端POST请求
* @param requestParam 前端传递的请求参数
* @return 接口响应结果
*/
@PostMapping("/query")
public Map<String, Object> queryUser(@RequestBody Map<String, Object> requestParam) {
Map<String, Object> result = new HashMap<>();
// 获取前端传递的参数
Integer userId = (Integer) requestParam.get("userId");
String userName = (String) requestParam.get("userName");
// 模拟业务逻辑处理，实际开发中会调用Service层方法操作数据库
String userData = "用户ID：" + userId + "，用户名称：" + userName + "，年龄：25";
// 构造响应数据
result.put("code", 200);
result.put("msg", "查询成功");
result.put("data", userData);
return result;
}
}
跨域问题处理
当前端页面和Java后端接口部署在不同域名或端口时，会出现跨域问题，导致请求被浏览器拦截。可以在Java后端添加全局跨域配置解决该问题：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
// 允许的前端域名，实际开发中替换为具体的前端地址
.allowedOrigins("http://ipipp.com")
// 允许的请求方法
.allowedMethods("GET", "POST", "PUT", "DELETE")
// 允许携带请求头
.allowedHeaders("*")
// 是否允许携带Cookie
.allowCredentials(true)
// 预检请求的有效期，单位秒
.maxAge(3600);
}
}
注意事项
- 前端发送请求时，参数格式需要和后端接收的格式匹配，JSON格式参数需要设置正确的
Content-Type请求头。 - 后端接口返回的数据建议统一格式，包含状态码、提示信息和业务数据，方便前端统一处理响应。
- 生产环境中跨域配置的
allowedOrigins不要设置为通配符*，需要指定具体的前端域名，避免安全风险。 - 如果接口需要传输敏感数据，建议使用HTTPS协议加密传输内容。