AJAX (Asynchronous JavaScript and XML) 是一種使用 JavaScript 和 XML 進行異步通信的技術。它可以實現在不重新加載整個網頁的情況下更新網頁的一部分內容，從而實現界面的刷新。在本文中，我們會詳細探討如何使用 AJAX 實現界面的刷新，同時會通過舉例說明來進一步理解其原理和實現方式。
假設我們有一個簡單的待辦事項列表，用戶可以在網頁上添加和完成待辦事項。每當用戶完成一個待辦事項，我們希望界面可以實時地刷新，展示最新的任務列表。使用 AJAX 技術，我們可以輕松地實現這一功能。
首先，我們需要在前端頁面上使用 JavaScript 提交和獲取數據，然后將獲取到的數據展示在頁面上。以下是一個簡單的示例：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function refreshTodoList() {
$.ajax({
url: "/todos", // 請求的后端接口地址
type: "GET",
success: function(data) {
var todoList = ""; // 用于保存待辦事項列表的 HTML 字符串
data.forEach(function(todo) {
todoList += "<li>" + todo + "</li>"; // 將每個待辦事項添加到列表中
});
$("#todo-list").html(todoList); // 將待辦事項列表更新到頁面上
}
});
}
function addTodo() {
var newTodo = $("#new-todo").val(); // 獲取用戶輸入的待辦事項
$.ajax({
url: "/todos",
type: "POST",
data: { todo: newTodo }, // 將待辦事項通過 POST 請求提交給后端
success: function() {
refreshTodoList(); // 添加成功后刷新待辦事項列表
$("#new-todo").val(""); // 清空輸入框
}
});
}
</script>
</head>
<body>
<h1>待辦事項列表</h1>
<ul id="todo-list"></ul>
<input type="text" id="new-todo" placeholder="請輸入待辦事項">
<button onclick="addTodo()">添加</button>
<script>
refreshTodoList(); // 初始化頁面時刷新待辦事項列表
</script>
</body>
</html>在上面的代碼中，refreshTodoList() 函數用于獲取待辦事項列表并將其展示在頁面上。當用戶提交一個新的待辦事項時，會調用 addTodo() 函數來將其保存到后端數據庫，并通過 refreshTodoList() 來刷新界面。
在后端，我們需要提供一個接口來處理前端的請求并返回相應的數據。以下是一個使用 Node.js 和 Express.js 的示例：
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const todos = [];
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 處理 GET 請求，返回待辦事項列表
app.get("/todos", (req, res) =>{
res.json(todos);
});
// 處理 POST 請求，添加新的待辦事項
app.post("/todos", (req, res) =>{
const newTodo = req.body.todo;
todos.push(newTodo);
res.sendStatus(200);
});
app.listen(3000, () =>{
console.log("Server is running on http://localhost:3000");
});在上述的后端代碼中，我們使用 Express.js 創建了一個簡單的服務器，并設置了兩個路由來處理前端的 GET 和 POST 請求。當接收到 GET 請求時，服務器會將待辦事項列表以 JSON 格式返回給前端；當接收到 POST 請求時，服務器會將請求體中的待辦事項保存到 todos 數組中，并返回狀態碼 200。
通過前端和后端的配合，我們可以實現一個簡單的待辦事項列表頁面，用戶可以添加和完成任務，界面會實時地刷新展示最新的任務列表。
以上就是如何使用 AJAX 實現界面刷新一次的簡要介紹。通過 AJAX 技術，我們可以在不重新加載整個網頁的情況下，通過與后端進行異步通信，實現頁面的動態刷新。這為用戶提供了更好的交互體驗，同時也提高了網站的性能。希望本文可以對你理解和掌握 AJAX 的實現方式有所幫助。