Ajax——在OA系统提升性能的局部刷新

本文总结了在OA系统中关于Ajax的原理与使用，以及如何使用其局部刷新提升OA系统的性能体验。

本文目录

- - [一、Ajax 基础概念](#一、Ajax 基础概念)
  - - 前后端交互原理
    - 全局刷新与局部刷新
  - 二、局部刷新实现方式
  - - XMLHttpRequest
    - jQuery封装XMLHttpRequest
  - [三、 XMLHttpRequest 重要属性和函数](#三、 XMLHttpRequest 重要属性和函数)
  - - 属性
    - 函数
  - 四、具体使用步骤
  - 五、全局刷新创建表单
  - - 创建表单
    - [Servlet 处理](#Servlet 处理)
  - [六、 HttpServletResponse 输出数据到浏览器](#六、 HttpServletResponse 输出数据到浏览器)

一、Ajax 基础概念

前后端交互原理

核心思想 ：Ajax 允许前端页面在不刷新整个页面的情况下与后端服务器进行异步通信，实现数据的交换和页面的动态更新。在 OA系统中，常用于实时获取审批状态、员工信息更新等。
优点：减少用户等待时间，提升用户体验，降低服务器压力。

全局刷新与局部刷新

全局刷新 ：传统的页面交互方式，每次请求都会导致整个页面重新加载。例如在 OA 系统中，员工提交请假申请后，页面全部刷新显示新的申请列表。
局部刷新：仅更新页面的部分区域，无需刷新整个页面。比如在 OA 系统的公告栏，新公告发布时，仅更新公告区域。

二、局部刷新实现方式

XMLHttpRequest

原理：XMLHttpRequest 是浏览器提供的一个内置对象，用于在浏览器和服务器之间进行异步通信。
获取员工考勤信息

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>考勤信息</title>
</head>

<body>
    <button onclick="getAttendanceInfo()">获取考勤信息</button>
    <div id="attendance"></div>

    <script>
        function getAttendanceInfo() {
            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();

            // 监听状态变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('attendance').innerHTML = xhr.responseText;
                }
            };

            // 打开连接
            xhr.open('GET', 'attendanceServlet', true);

            // 发送请求
            xhr.send();
        }
    </script>
</body>

</html>

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("/attendanceServlet")
public class AttendanceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        
        response.getWriter().write("当月考勤信息");
    }
}

jQuery封装XMLHttpRequest

jQuery 的 $.ajax() 方法 ：简化了 XMLHttpRequest 的使用，提供了更简洁的 API。
更新员工信息

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>员工信息更新</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="text" id="newName" placeholder="新姓名">
    <button onclick="updateEmployeeInfo()">更新员工信息</button>
    <div id="result"></div>

    <script>
        function updateEmployeeInfo() {
            const newName = $('#newName').val();
            $.ajax({
                url: 'updateEmployeeServlet',
                method: 'POST',
                data: { name: newName },
                success: function (response) {
                    $('#result').text(response);
                },
                error: function () {
                    $('#result').text('更新失败');
                }
            });
        }
    </script>
</body>

</html>

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("/updateEmployeeServlet")
public class UpdateEmployeeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String newName = request.getParameter("name");
        // 更新员工信息
        response.getWriter().write("员工姓名已更新为：" + newName);
    }
}

三、 XMLHttpRequest 重要属性和函数

属性

readyState：表示请求的状态，0 表示未初始化，1 表示已打开，2 表示已发送，3 表示正在接收，4 表示已完成。
status：HTTP 状态码，如 200 表示成功，404 表示未找到资源。
responseText：以文本形式返回服务器的响应数据。

函数

open(method, url, async) ：初始化一个请求，method 可以是 GET 或 POST，url 是请求的地址，async 表示是否异步。
send(data) ：发送请求，data 是要发送的数据，对于 GET 请求通常为 null。
setRequestHeader(header, value) ：设置请求头信息，如 Content - Type。

四、具体使用步骤

创建对象 ：const xhr = new XMLHttpRequest();
监听状态变化：

javascript 复制代码

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应数据
    }
};

打开连接 ：xhr.open('GET', 'url', true);
设置请求头（可选） ：xhr.setRequestHeader('Content - Type', 'application/json');
发送请求 ：xhr.send(data);

五、全局刷新创建表单

创建表单

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
</head>

<body>
    <form action="leaveServlet" method="post">
        <label for="startDate">开始日期：</label>
        <input type="date" id="startDate" name="startDate"><br>
        <label for="endDate">结束日期：</label>
        <input type="date" id="endDate" name="endDate"><br>
        <input type="submit" value="提交申请">
    </form>
</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("/leaveServlet")
public class LeaveServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String startDate = request.getParameter("startDate");
        String endDate = request.getParameter("endDate");
        response.getWriter().write("请假申请已提交，开始日期：" + startDate + "，结束日期：" + endDate);
    }
}

六、 HttpServletResponse 输出数据到浏览器

获取输出流：

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("/outputServlet")
public class OutputServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应内容类型
        response.setContentType("text/html;charset=UTF-8");
        // 获取字符输出流
        response.getWriter().write("data");
    }
}

设置响应头：

java 复制代码

response.setHeader("Content - Disposition", "attachment;filename=file.txt");

可用于设置文件下载的响应头。

|-------------------------------------------------------------------------------------------------|--------------------|--------------------------------------------------------------------------------------------------|
| ← 上一篇 AngularJS知识快速入门（上） | 记得点赞、关注、收藏哦！ | 下一篇 JUC小册------公平锁和非公平锁 → |