AJAX（Asynchronous JavaScript and XML）即異步 JavaScript 和 XML，是一種用于創建動態網頁的技術。通過 AJAX，前端和后端可以進行數據交互，從而實現網頁的異步更新。在傳統的網頁開發中，前端通過提交表單或者點擊鏈接來獲取后臺數據，然后刷新整個頁面來顯示新數據。而使用 AJAX，則可以在不刷新頁面的情況下，局部更新網頁內容。

現在我們來看一個簡單的例子。假設我們正在開發一個社交網站，在該網站上，用戶可以發表帖子，并以卡片的形式展示在頁面上。當用戶點擊"發表"按鈕時，我們希望通過 AJAX 將帖子的內容發送給后臺，后臺通過接口將帖子保存到數據庫，然后將該帖子的信息返回給前端，前端再更新頁面上的帖子列表。

下面是前端的代碼：

// 發表按鈕的點擊事件
$("#submitBtn").on("click", function(){
// 獲取帖子內容
var content = $("#postContent").val();
// 發送 AJAX 請求
$.ajax({
url: "/api/post",
method: "POST",
data: {
content: content
},
success: function(response){
// 在頁面上添加新的帖子卡片
$("#postList").prepend("
" + content + "
");
// 清空輸入框
$("#postContent").val("");
},
error: function(error){
console.log(error);
}
});
});

以上代碼中，我們首先在頁面上定義了一個"發表"按鈕和一個帖子內容輸入框。然后使用 jQuery 的 Ajax 方法，綁定了"發表"按鈕的點擊事件。當用戶點擊按鈕時，會獲取輸入框中的帖子內容，并發送 AJAX 請求到后臺的 "/api/post" 接口。

后臺的代碼如下：

app.post("/api/post", function(req, res){
// 獲取帖子內容
var content = req.body.content;
// 將帖子保存到數據庫
// ...
// 構造新帖子的信息
var newPost = { id: 1, content: content };
// 將新帖子的信息返回給前端
res.json(newPost);
});

在后臺代碼中，我們使用了一個 Express 的路由，監聽了 "/api/post" 接口的 POST 請求。當接收到請求時，我們將請求中的帖子內容保存到數據庫，并構造了一個新帖子的信息。然后將新帖子的信息以 JSON 格式返回給前端。

當 AJAX 請求成功返回后，前端會執行 success 回調函數。在該回調函數中，我們將新的帖子內容使用 jQuery 的 prepend 方法添加到頁面上的"帖子列表"中，并清空輸入框。這樣，用戶就能立即看到自己發表的帖子，而不需要刷新整個頁面。

通過以上例子，我們可以看到 AJAX 是如何實現前后端的數據交互的。前端通過 AJAX 發送請求到后臺接口，后臺接收到請求并處理數據，然后將處理好的數據返回給前端。前端收到返回的數據后，可以根據具體需求，更新頁面上的內容。

AJAX 的使用，使得網頁開發更加靈活和高效。通過前后端的數據交互，我們可以實現網頁的動態更新，提升用戶體驗。在實際開發中，我們可以根據業務需求，使用 AJAX 與后臺進行交互，實現更加豐富和動態的頁面效果。