Ajax——异步前后端交互提升OA系统性能体验

本文介绍了Ajax中的基础使用，包括XMLHttpRequest的状态变化、并使用BMI 场景的示例进行介绍，以及结合 DAO 和 Servlet 处理OA系统复杂业务逻辑和JSON数据的处理等等。

本文目录

- - [一、Ajax 基础](#一、Ajax 基础)
  - - html页面
  - [二、 XMLHttpRequest](#二、 XMLHttpRequest)
  - - XMLHttpRequest的状态变化
    - 同步和异步
  - [三、计算 BMI 场景](#三、计算 BMI 场景)
  - [四、如何使用 DAO 和 Servlet 处理复杂业务逻辑](#四、如何使用 DAO 和 Servlet 处理复杂业务逻辑)
  - - [根据 id 查询的 Dao 对象](#根据 id 查询的 Dao 对象)
    - [创建 Servlet](#创建 Servlet)
    - 创建请求的页面
  - [五、 JSON 数据处理](#五、 JSON 数据处理)
  - - [接收 json 数据](#接收 json 数据)

一、Ajax 基础

html页面

搭建包含用于触发 Ajax 请求元素，如按钮、输入框和显示响应结果区域的 HTML 页面。使用OA用于查询员工绩效的页面为例。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工绩效查询</title>
</head>
<body>
    <input type="text" id="employeeId" placeholder="输入员工 ID">
    <button onclick="getPerformance()">查询绩效</button>
    <div id="performanceResult"></div>
    <script>
        function getPerformance() {
            // 请求逻辑
        }
    </script>
</body>
</html>

二、 XMLHttpRequest

XMLHttpRequest的状态变化

状态码含义 ：XMLHttpRequest 对象有 5 种状态，0 表示未初始化，1 表示已打开，2 表示已发送，3 表示正在接收，4 表示已完成。可根据状态变化处理不同阶段的逻辑。

javascript 复制代码

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            document.getElementById('performanceResult').innerHTML = xhr.responseText;
        } else {
            document.getElementById('performanceResult').innerHTML = '请求出错';
        }
    }
};

同步和异步

同步：请求发出后，浏览器会等待服务器响应，期间页面会被阻塞，用户无法进行其他操作。例如传统的表单提交。
异步：请求发出后，浏览器不会等待服务器响应，用户可以继续操作页面。使用 Ajax 实现异步请求，可提升用户体验。

三、计算 BMI 场景

原理：通过 Ajax 向服务器发送身高、体重数据，服务器计算 BMI 后返回结果。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BMI 计算</title>
</head>
<body>
    <input type="text" id="height" placeholder="身高（cm）">
    <input type="text" id="weight" placeholder="体重（kg）">
    <button onclick="calculateBMI()">计算 BMI</button>
    <div id="bmiResult"></div>
    <script>
        function calculateBMI() {
            const height = document.getElementById('height').value;
            const weight = document.getElementById('weight').value;
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('bmiResult').innerHTML = xhr.responseText;
                }
            };
            xhr.open('GET', `bmiServlet?height=${height}&weight=${weight}`, true);
            xhr.send();
        }
    </script>
</body>
</html>

后端代码Servlet

java 复制代码

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/bmiServlet")
public class BMIServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        double height = Double.parseDouble(request.getParameter("height")) / 100;
        double weight = Double.parseDouble(request.getParameter("weight"));
        double bmi = weight / (height * height);
        response.getWriter().write("您的 BMI 是：" + bmi);
    }
}

四、如何使用 DAO 和 Servlet 处理复杂业务逻辑

搭建包含数据库连接、DAO 对象和 Servlet 的开发环境，用于处理复杂业务逻辑。下面以员工信息管理为例。

根据 id 查询的 Dao 对象

封装数据库查询操作，根据员工 ID 查询员工信息。

java 复制代码

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class EmployeeDao {
    public String getEmployeeInfo(int employeeId) {
        String info = null;
        try (Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/oa_system", "root", "root");
             PreparedStatement pstmt = conn.prepareStatement("SELECT * FROM employees WHERE id = ?")) {
            pstmt.setInt(1, employeeId);
            ResultSet rs = pstmt.executeQuery();
            if (rs.next()) {
                info = "姓名：" + rs.getString("name") + "，部门：" + rs.getString("department");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return info;
    }
}

创建 Servlet

接收前端 Ajax 请求，调用 DAO 对象处理业务逻辑，并将结果返回给前端。

java 复制代码

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/employeeInfoServlet")
public class EmployeeInfoServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        int employeeId = Integer.parseInt(request.getParameter("employeeId"));
        EmployeeDao dao = new EmployeeDao();
        String info = dao.getEmployeeInfo(employeeId);
        response.getWriter().write(info);
    }
}

创建请求的页面

输入员工 ID 的输入框和触发查询的按钮，通过 Ajax 发送请求。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息查询</title>
</head>
<body>
    <input type="text" id="employeeId" placeholder="输入员工 ID">
    <button onclick="getEmployeeInfo()">查询信息</button>
    <div id="employeeInfoResult"></div>
    <script>
        function getEmployeeInfo() {
            const employeeId = document.getElementById('employeeId').value;
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('employeeInfoResult').innerHTML = xhr.responseText;
                }
            };
            xhr.open('GET', `employeeInfoServlet?employeeId=${employeeId}`, true);
            xhr.send();
        }
    </script>
</body>
</html>

五、 JSON 数据处理

从数据库查询数据并以 JSON 格式返回给前端。

java 复制代码

import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/employeeJsonServlet")
public class EmployeeJsonServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=UTF-8");
        List<Map<String, Object>> employeeList = new ArrayList<>();
        try (Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/oa_system", "root", "root");
             PreparedStatement pstmt = conn.prepareStatement("SELECT * FROM employees")) {
            ResultSet rs = pstmt.executeQuery();
            while (rs.next()) {
                Map<String, Object> employee = new HashMap<>();
                employee.put("id", rs.getInt("id"));
                employee.put("name", rs.getString("name"));
                employee.put("department", rs.getString("department"));
                employeeList.add(employee);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        Gson gson = new Gson();
        String json = gson.toJson(employeeList);
        response.getWriter().write(json);
    }
}

接收 json 数据

通过 Ajax 请求获取 JSON 数据，并在页面上显示。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON 数据查询</title>
</head>
<body>
    <button onclick="getEmployeeJson()">查询员工 JSON 数据</button>
    <div id="employeeJsonResult"></div>
    <script>
        function getEmployeeJson() {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const employees = JSON.parse(xhr.responseText);
                    let result = '';
                    employees.forEach(employee => {
                        result += `ID：${employee.id}，姓名：${employee.name}，部门：${employee.department}<br>`;
                    });
                    document.getElementById('employeeJsonResult').innerHTML = result;
                }
            };
            xhr.open('GET', 'employeeJsonServlet', true);
            xhr.send();
        }
    </script>
</body>
</html>

|-------------------------------------------------------------------------------------------------------|--------------------|--------------------------------------------------------------------------------------------------|
| ← 上一篇 Ajax------在OA系统提升性能的局部刷新 | 记得点赞、关注、收藏哦！ | 下一篇 JUC小册------公平锁和非公平锁 → |

Ajax——异步前后端交互提升OA系统性能体验

本文目录

一、Ajax 基础

html页面

二、 XMLHttpRequest

XMLHttpRequest的状态变化

同步和异步

三、计算 BMI 场景

四、 如何使用 DAO 和 Servlet 处理复杂业务逻辑

根据 id 查询的 Dao 对象

创建 Servlet

创建请求的页面

五、 JSON 数据处理

接收 json 数据

四、如何使用 DAO 和 Servlet 处理复杂业务逻辑