本文总结了在OA系统中关于Ajax的原理与使用，以及如何使用其局部刷新提升OA系统的性能体验。
本文目录
- 一、Ajax 基础概念
- 前后端交互原理
- 全局刷新与局部刷新
- 二、局部刷新实现方式
- XMLHttpRequest
- jQuery封装XMLHttpRequest
- 三、 XMLHttpRequest 重要属性和函数
- 属性
- 函数
- 四、具体使用步骤
- 五、全局刷新创建表单
- 创建表单
- Servlet 处理
- 六、 HttpServletResponse 输出数据到浏览器
一、Ajax 基础概念
前后端交互原理
- 核心思想：Ajax 允许前端页面在不刷新整个页面的情况下与后端服务器进行
异步通信，实现数据的交换和页面的动态更新。在 OA系统中，常用于实时获取审批状态、员工信息更新等。 - 优点：减少用户等待时间，提升用户体验，降低服务器压力。
全局刷新与局部刷新
- 全局刷新：传统的页面交互方式，每次请求都会导致整个页面重新加载。例如在 OA 系统中，员工提交请假申请后，
页面全部刷新显示新的申请列表。 - 局部刷新：仅更新页面的部分区域，无需刷新整个页面。比如在 OA 系统的公告栏，新公告发布时，仅更新公告区域。
二、局部刷新实现方式
XMLHttpRequest
- 原理：
XMLHttpRequest是浏览器提供的一个内置对象，用于在浏览器和服务器之间进行异步通信。 - 获取员工考勤信息
<!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>
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。 - 更新员工信息
<!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>
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(); - 监听状态变化：
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 处理响应数据}
};
- 打开连接：
xhr.open('GET', 'url', true); - 设置请求头（可选）：
xhr.setRequestHeader('Content - Type', 'application/json'); - 发送请求：
xhr.send(data);
五、全局刷新创建表单
创建表单
<!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 处理
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 输出数据到浏览器
- 获取输出流：
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");}
}
- 设置响应头：
response.setHeader("Content - Disposition", "attachment;filename=file.txt");
可用于设置文件下载的响应头。
| ← 上一篇 AngularJS知识快速入门（上） | 记得点赞、关注、收藏哦！ | 下一篇 JUC小册——公平锁和非公平锁 → |
![如何配置AHK-v2-script-converter以获得最佳转换结果：终极指南 [特殊字符]](http://pic.xiahunao.cn/yaotu/如何配置AHK-v2-script-converter以获得最佳转换结果：终极指南 [特殊字符])
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
