AJAX（Asynchronous JavaScript and XML）是一種前端技術，能夠實現網頁與服務器之間的異步通信。結合Spring Boot后端框架，可以輕松地實現前后端數據的交互。本文將介紹如何使用AJAX接收Spring Boot服務器返回的數據，并且通過一些具體的示例來說明。

在實際開發中，經常需要通過AJAX從服務器獲取數據并在網頁上展示。我們假設有一個需求，需要在網頁上展示當前在線用戶的列表。當我們訪問網頁時，會異步請求服務器獲取最新的在線用戶數據，并將其展示在網頁上。

首先，在前端頁面中，我們可以通過AJAX發送HTTP請求到Spring Boot服務器，請求獲取在線用戶數據。以下是使用jQuery發送AJAX請求的示例代碼：

$.ajax({
url: '/users',
type: 'GET',
dataType: 'json',
success: function(response) {
// 處理返回的數據
},
error: function(xhr, status, error) {
// 處理錯誤
}
});

上述代碼中，AJAX通過GET方式請求服務器的'/users'路由，并且指定數據的格式為JSON。在成功獲取到數據后，可以在success回調函數中進行進一步的數據處理。

在Spring Boot后端，我們需要處理'/users'路由的請求，并返回當前在線用戶的數據。以下是使用Spring Boot編寫控制器的示例代碼：

@RestController
public class UserController {
@GetMapping("/users")
public List<User> getUsers() {
// 獲取當前在線用戶的數據
List<User> users = userService.getOnlineUsers();
return users;
}
}

上述代碼中，我們使用了Spring Boot的@RestController注解來聲明該控制器類是一個RESTful風格的控制器，可以方便地處理HTTP請求。在'/users'路由的處理方法中，我們通過調用userService來獲取當前在線用戶的數據，并將其作為響應返回。

通過上述方式，前端頁面可以通過AJAX獲取到當前在線用戶的數據，并在網頁上進行展示。這樣，即使在不刷新整個頁面的情況下，也能隨時獲取最新的在線用戶數據。

除了獲取數據，AJAX還可以用于提交表單數據給服務器。以前文中的在線用戶列表為例，假設我們想要實現一個添加用戶的功能。在前端頁面中，我們通過一個表單收集用戶輸入的信息，然后使用AJAX將表單數據發送給后端服務器。以下是使用jQuery發送POST請求的示例代碼：

$.ajax({
url: '/users',
type: 'POST',
dataType: 'json',
data: {
name: 'John',
age: 25
},
success: function(response) {
// 處理返回的數據
},
error: function(xhr, status, error) {
// 處理錯誤
}
});

上述代碼中，AJAX通過POST方式請求服務器的'/users'路由，并且將用戶輸入的姓名和年齡作為請求的數據。在Spring Boot后端，我們需要處理'/users'路由的POST請求，并將表單數據存儲到數據庫中。以下是使用Spring Boot編寫控制器的示例代碼：

@RestController
public class UserController {
@PostMapping("/users")
public void addUser(@RequestBody User user) {
// 將用戶數據存儲到數據庫中
userService.addUser(user);
}
}

上述代碼中，我們使用了Spring Boot的@PostMapping注解來指定該請求處理方法接受POST請求。在方法的參數列表中，我們使用@RequestBody注解來將請求體中的JSON數據綁定到User對象上。然后，我們調用userService的addUser方法將用戶數據存儲到數據庫中。

通過上述方式，前端頁面可以通過表單將用戶輸入的數據提交給后端服務器，并且服務器可以將數據存儲到數據庫中。這樣，我們就實現了通過AJAX提交表單數據的功能。

綜上所述，AJAX能夠很方便地實現前后端數據的交互。通過AJAX，我們可以實現在不刷新整個頁面的情況下，獲取最新的數據并在網頁上展示。同時，AJAX還能夠幫助我們提交表單數據給后端服務器，實現數據的持久化存儲。結合Spring Boot后端框架，我們可以快速地搭建一個完整的數據交互系統。