在前端開發中，我們經常會遇到需要向后端發送請求并獲取響應的情況。傳統的方式是通過頁面刷新或者跳轉來獲取數據，但這種方式會造成頁面閃爍或者加載速度慢的問題。為了解決這個問題，Ajax（Asynchronous JavaScript and XML）技術應運而生。通過使用Ajax，我們可以在不刷新頁面的情況下，向服務器發送異步請求，并獲取后端返回的數據，從而實現更加流暢的用戶體驗。

Ajax的核心是XMLHttpRequest對象，該對象可以在后臺與服務器進行數據交換。使用Ajax進行數據交互的一個常見的場景就是獲取服務器返回的JSON數據，并將其展示在前端頁面上。例如，我們有一個學生管理系統，我們可以使用Ajax來獲取學生的成績信息并在頁面上顯示。

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/scores', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var scores = response.scores;
var table = document.getElementById('scores-table');
for (var i = 0; i < scores.length; i++) {
var row = '<tr><td>' + scores[i].name + '</td><td>' + scores[i].score + '</td></tr>';
table.innerHTML += row;
}
}
};
xhr.send();
</script>

上述代碼中，我們首先創建了一個XMLHttpRequest對象xhr，并通過open方法指定了請求的方法（GET）、請求的URL（/api/scores）和是否異步（true）。然后，我們通過xhr的onreadystatechange事件監聽器，當請求狀態發生變化時進行處理。當請求狀態為4（即請求完成）且響應狀態碼為200時，我們通過JSON.parse方法解析后端返回的JSON數據，并將成績信息顯示在頁面的表格中。

Ajax不僅可以用于獲取JSON數據，還可以用于獲取HTML、XML等不同格式的數據。例如，我們的學生管理系統還提供一個搜索功能，通過輸入學生的姓名，可以在頁面上顯示出該學生的詳細信息。我們可以使用Ajax來向服務器發送查詢請求，并獲取返回的HTML代碼，然后將其插入到頁面中。下面是一個簡化的示例代碼：

<form id="search-form">
<input type="text" name="name" placeholder="請輸入學生姓名">
<button type="button" onclick="search()">搜索</button>
</form>
<div id="student-info"></div>
<script>
function search() {
var name = document.querySelector('input[name="name"]').value;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/students?name=' + name, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById('student-info').innerHTML = response;
}
};
xhr.send();
}
</script>

在上述代碼中，我們通過form標簽創建了一個搜索框，其中的input用于輸入學生的姓名，button用于觸發搜索操作。當用戶點擊搜索按鈕時，調用search函數。該函數首先獲取輸入框中的學生姓名，并將其作為參數添加到URL中，然后通過XMLHttpRequest對象發送GET請求。當請求狀態變為4且響應狀態碼為200時，將響應的HTML代碼插入到id為student-info的div中。

通過Ajax獲取ResponseBody，我們可以靈活地與后端進行數據交互，并且不需要進行頁面的刷新或跳轉。我們可以根據后端返回的數據進行頁面的更新，提高用戶體驗。無論是獲取JSON、HTML還是XML等格式的數據，Ajax都能輕松應對。希望本文對你理解Ajax獲取ResponseBody有所幫助。