Java学习第四十八部分——Web开发（十六）-CSDN博客

<!DOCTYPE html>
<html>
<head>
    <title>Java AJAX 示例</title>
    <script>
        function loadData() {
            // 1. 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 2. 定义回调函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 6. 处理响应数据（JSON格式）
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerHTML =
                        "用户: " + data.name + "<br>邮箱: " + data.email;
                }
            };

            // 3. 初始化请求
            xhr.open("GET", "UserServlet", true); // true表示异步

            // 4. 发送请求
            xhr.send();
        }
    </script>
</head>
<body>
    <h2>AJAX 示例</h2>
    <button onclick="loadData()">加载用户数据</button>
    <div id="result"></div>
</body>
</html>

2. 后端Servlet (UserServlet.java)

import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import org.json.JSONObject; // 需要json库（如org.json）

@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // 设置响应类型为JSON
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        // 创建模拟数据
        JSONObject json = new JSONObject();
        json.put("name", "张三");
        json.put("email", "zhangsan@example.com");

        // 5. 返回JSON数据
        response.getWriter().write(json.toString());
    }
}

3.关键点说明

AJAX流程：
- 前端触发事件 → 创建XMLHttpRequest → 发送请求 → 后端处理 → 返回数据 → 前端更新DOM
响应状态：
- readyState：0(未初始化) → 1(连接建立) → 2(请求接收) → 3(处理中) → 4(完成)
- status：HTTP状态码（200=成功）
数据格式选择：
- JSON（推荐）：轻量、易解析
- XML：较复杂，但结构严谨
跨域问题：
- 若前端与后端不同源，需在Servlet添加CORS头：
response.setHeader("Access-Control-Allow-Origin", "*");