在前端开发中，我们经常会遇到需要向后端发送请求并获取响应的情况。传统的方式是通过页面刷新或者跳转来获取数据，但这种方式会造成页面闪烁或者加载速度慢的问题。为了解决这个问题，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有所帮助。