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

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

本文目录

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

一、Ajax 基础

html页面

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

<!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 表示已完成。可根据状态变化处理不同阶段的逻辑。

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 后返回结果。

<!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

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 查询员工信息。

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 对象处理业务逻辑，并将结果返回给前端。

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 发送请求。

<!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 格式返回给前端。

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 数据，并在页面上显示。

<!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>