在前端开发中，我们经常会遇到需要从后台获取数据并在页面上展示的情况。而Ajax是一种无需刷新页面就能实现与后台进行数据交互的技术。通过AJax，我们可以向后台发送请求，并将后台返回的数据展示在页面上。本文将介绍Ajax如何从后台获取数据并返回到前端页面。

对于Ajax请求后台数据并返回的过程，一种常见的场景是用户在搜索框中输入关键字，然后在输入框下方实时显示与关键字匹配的搜索结果。当用户输入一个字母时，前端会通过Ajax向后台发送一个请求，后台会根据该关键字查询相关数据并返回给前端。前端将这些搜索结果实时展示在页面上。

// 前端发送Ajax请求
function search() {
let keyword = document.getElementById('searchInput').value;
let xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?keyword=' + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let results = JSON.parse(xhr.response);
displayResults(results);
}
};
xhr.send();
}
// 将搜索结果展示在页面上
function displayResults(results) {
let output = document.getElementById('searchResults');
output.innerHTML = '';
for (let i = 0; i< results.length; i++) {
let div = document.createElement('div');
let p = document.createElement('p');
p.innerHTML = results[i];
div.appendChild(p);
output.appendChild(div);
}
}

上述代码中，search()函数会在用户输入框中输入内容时触发。该函数通过XMLHttpRequest对象创建一个异步请求，并指定请求的方式和URL。在接受到后台的响应后，我们通过readyState属性和status属性判断请求是否成功，这里的readyState为4表示请求已完成，status为200表示请求成功。

当请求成功后，我们会将后台返回的数据通过JSON.parse()方法解析为一个数组对象。然后，我们调用displayResults()函数将搜索结果展示在页面上。displayResults()函数首先获取到展示搜索结果的div元素，然后清空该div中的内容。接下来，我们通过一个for循环遍历每个搜索结果，并将其添加为一个新的