Ajax——在OA系统提升性能的局部刷新
本文总结了在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小册——公平锁和非公平锁 → |