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

就改了2025-08-03 8:27

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

本文目录

      • [一、Ajax 基础](#一、Ajax 基础)
      • [二、 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小册------公平锁和非公平锁 → |

相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
大怪v8 小时前
超赞👍！优秀前端佬的电子布洛芬技术网站！
前端·javascript·vue.js
项目題供诗9 小时前
React学习（十二）
javascript·学习·react.js
无羡仙9 小时前
Webpack 背后做了什么？
javascript·webpack
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版)：代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程12 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
Summer不秃13 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus13 小时前
Base64编码详解
前端·javascript
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03【踩坑笔记】50系显卡适配的 PyTorch 安装04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接05突破百度网盘的下载限速，两种方法教会你【超详细】0620个国内外主流AI绘画工具大汇总（最新免费可用~）07Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code08【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10Claude Code VSCode集成开发指南：AI编程助手完整配置