AJAX(Ajax即“Asynchronous JavaScript and XML”即異步的JavaScript和XML) 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。使用AJAX，可以在不刷新整個(gè)頁(yè)面的情況下，通過(guò)與服務(wù)器進(jìn)行異步數(shù)據(jù)交互更新部分頁(yè)面內(nèi)容。在后端使用MVC（Model-View-Controller）架構(gòu)的時(shí)候，可以通過(guò)AJAX將數(shù)據(jù)傳遞到后端，實(shí)現(xiàn)動(dòng)態(tài)的數(shù)據(jù)交互與處理。

以一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)搜索功能為例，當(dāng)用戶在輸入框中輸入關(guān)鍵字并點(diǎn)擊搜索按鈕時(shí)，頁(yè)面無(wú)需刷新，僅僅顯示與關(guān)鍵字相關(guān)的搜索結(jié)果。這就是通過(guò)AJAX將用戶輸入的關(guān)鍵字傳遞到后端MVC的一個(gè)典型場(chǎng)景。

首先，在前端頁(yè)面的JavaScript代碼中，我們通過(guò)AJAX方式將關(guān)鍵字傳遞到后端。代碼示例如下：

// 前端頁(yè)面的JavaScript代碼
var keyword = document.getElementById("keyword").value; // 獲取用戶輸入的關(guān)鍵字
var xhr = new XMLHttpRequest(); // 創(chuàng)建XMLHttpRequest對(duì)象
xhr.open("POST", "/search", true); // 設(shè)置請(qǐng)求方法、URL以及是否異步
xhr.setRequestHeader("Content-Type", "application/json"); // 設(shè)置請(qǐng)求頭
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // 解析后端返回的JSON數(shù)據(jù)
// 更新頁(yè)面的搜索結(jié)果顯示
document.getElementById("searchResults").innerHTML = response.results;
}
};
xhr.send(JSON.stringify({ keyword: keyword })); // 發(fā)送包含關(guān)鍵字的JSON數(shù)據(jù)到后端

在上述代碼中，我們首先通過(guò)document.getElementById方法獲取用戶輸入的關(guān)鍵字。然后創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，通過(guò)open方法設(shè)置了請(qǐng)求方法為POST，URL為后端的/search接口，以及異步標(biāo)志為true。接下來(lái)通過(guò)setRequestHeader方法設(shè)置了請(qǐng)求頭為application/json，表示傳遞的數(shù)據(jù)類型為JSON。然后通過(guò)onreadystatechange來(lái)監(jiān)聽XHR對(duì)象的狀態(tài)變化，并處理返回的結(jié)果。最后通過(guò)send方法將關(guān)鍵字作為JSON數(shù)據(jù)發(fā)送到后端。

在后端MVC的Controller層中，我們首先接收到前端傳遞過(guò)來(lái)的JSON數(shù)據(jù)。代碼示例如下：

// 后端MVC的Controller代碼
@RequestMapping(value = "/search", method = RequestMethod.POST)
public ResponseEntitysearch(@RequestBody MaprequestBody) {
String keyword = requestBody.get("keyword"); // 獲取前端傳遞過(guò)來(lái)的關(guān)鍵字
// 根據(jù)關(guān)鍵字進(jìn)行搜索操作，并獲得搜索結(jié)果
String searchResults = searchService.search(keyword);
// 構(gòu)建返回給前端的JSON數(shù)據(jù)
MapresponseBody = new HashMap<>();
responseBody.put("results", searchResults);
return ResponseEntity.ok().body(new Gson().toJson(responseBody));
}

在上述后端代碼中，我們通過(guò)@RequestMapping注解將前端傳遞過(guò)來(lái)的JSON數(shù)據(jù)映射到search方法上。使用@RequestBody注解可以將請(qǐng)求體中的JSON數(shù)據(jù)綁定到MaprequestBody參數(shù)上。然后我們通過(guò)get方法獲取關(guān)鍵字，并使用searchService進(jìn)行搜索操作，獲得搜索結(jié)果。接著我們構(gòu)建了一個(gè)Map對(duì)象responseBody，將搜索結(jié)果放入其中。最后，使用Gson將responseBody轉(zhuǎn)換為JSON數(shù)據(jù)并使用ResponseEntity.ok()方法返回給前端。

綜上所述，我們通過(guò)AJAX將用戶輸入的關(guān)鍵字傳遞到后端MVC實(shí)現(xiàn)了動(dòng)態(tài)的數(shù)據(jù)交互和處理。前端通過(guò)XMLHttpRequest對(duì)象將關(guān)鍵字作為JSON數(shù)據(jù)發(fā)送到后端的Controller方法上，后端接收到關(guān)鍵字后進(jìn)行相應(yīng)的處理并通過(guò)ResponseEntity將處理結(jié)果返回給前端。這種方式有效減少了頁(yè)面的刷新和數(shù)據(jù)傳輸?shù)拈_銷，提升了用戶體驗(yàn)。