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>

← 上一篇 Ajax——在OA系統提升性能的局部刷新

記得點贊、關注、收藏哦！

下一篇 JUC小冊——公平鎖和非公平鎖 →

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/91850.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/91850.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/91850.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！