Java中Ajax如何实现跨域请求与数据交互？

在Java中实现AJAX的基本原理

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，其核心是通过JavaScript在后台与服务器进行异步数据交换，而无需刷新整个页面，在Java后端环境中，AJAX的实现通常涉及前端JavaScript代码与后端Java服务的交互，以下是实现AJAX的详细步骤和关键点。

前端：使用JavaScript发起AJAX请求

前端是AJAX的发起端,主要通过XMLHttpRequest对象或更现代的fetch API与后端通信，以XMLHttpRequest为例，其基本使用流程如下：

1. 创建XMLHttpRequest对象

   var xhr = new XMLHttpRequest();

2. 配置请求参数
   使用open()方法指定请求方式（GET/POST）、URL及是否异步。

   xhr.open("GET", "http://localhost:8080/api/data", true);

3. 设置回调函数
   当请求状态改变时，通过onreadystatechange事件处理响应数据：

   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4 && xhr.status === 200) {
           var response = JSON.parse(xhr.responseText);
           console.log("服务器返回数据:", response);
       }
   };

4. 发送请求

   

   xhr.send();

若使用fetch API，代码更简洁：

fetch("http://localhost:8080/api/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("请求失败:", error));

后端：Java服务处理AJAX请求

后端Java服务需提供接口供前端调用,常见实现方式包括Servlet、Spring Boot等。

使用Servlet实现

以传统的Servlet为例,需配置web.xml或使用注解@WebServlet：

@WebServlet("/api/data")
public class DataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        // 设置响应内容类型为JSON
        resp.setContentType("application/json;charset=UTF-8");
        // 模拟业务逻辑处理
        String result = "{\"name\":\"Java AJAX示例\",\"status\":\"success\"}";
        // 输出响应数据
        resp.getWriter().write(result);
    }
}

使用Spring Boot实现

Spring Boot通过@RestController注解简化了RESTful接口的开发：

@RestController
@RequestMapping("/api")
public class DataController {
    @GetMapping("/data")
    public ResponseEntity<Map<String, Object>> getData() {
        Map<String, Object> result = new HashMap<>();
        result.put("name", "Spring Boot AJAX示例");
        result.put("status", "success");
        return ResponseEntity.ok(result);
    }
}

数据交互：JSON格式的处理

AJAX推荐使用JSON格式传输数据,因其轻量且易于解析，前端可通过JSON.stringify()将对象转为JSON字符串，后端Java需使用JSON库（如Jackson、Gson）处理数据。

后端返回JSON示例（Jackson）

@RestController
public class DataController {
    @GetMapping("/user")
    public User getUser() {
        User user = new User("张三", 25);
        return user; // Spring Boot自动序列化为JSON
    }
}
// User类
public class User {
    private String name;
    private int age;
    // 构造方法、getter/setter省略
}

前端解析JSON

fetch("/api/user")
    .then(response => response.json())
    .then(user => {
        document.getElementById("name").innerText = user.name;
        document.getElementById("age").innerText = user.age;
    });

跨域问题及解决方案

当前后端域名或端口不同时,浏览器会因同源策略阻止AJAX请求，解决跨域的常用方法：

1. 后端设置CORS响应头（Servlet示例）

   resp.setHeader("Access-Control-Allow-Origin", "*");
   resp.setHeader("Access-Control-Allow-Methods", "GET, POST");

2. Spring Boot全局配置CORS

   @Configuration
   public class CorsConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins("*")
                   .allowedMethods("GET", "POST");
       }
   }

在Java中实现AJAX需前后端协作：前端通过XMLHttpRequest或fetch发起异步请求，后端通过Servlet或Spring Boot提供接口并返回JSON数据，同时处理跨域问题，这种模式实现了页面的动态更新，提升了用户体验，是现代Web开发的核心技术之一。