在现代网页开发中，经常会使用Ajax技术来实现异步获取数据，然后将这些数据动态地展示在页面上。本文将通过举例说明，介绍如何通过Ajax获取数据，并将这些数据放到页面上。
首先，我们来看一个简单的例子。假设我们有一个电影列表页面，需要从服务器上获取电影列表数据，并在页面上展示出来。我们可以使用Ajax来实现这个功能。首先，在页面上创建一个用于展示电影列表的容器：

<div id="movie-list"></div>

然后，在JavaScript中使用Ajax来获取电影列表数据，并将数据放到上面的容器中：

<script>
// 创建一个Ajax请求
var xhr = new XMLHttpRequest();
// 指定请求的方法和URL
xhr.open('GET', '/movies', true);
// 注册请求完成的回调函数
xhr.onload = function() {
// 获取服务器返回的电影列表数据
var movies = JSON.parse(xhr.responseText);
// 将电影列表数据添加到页面上
var movieListElement = document.getElementById('movie-list');
movies.forEach(function(movie) {
var movieElement = document.createElement('p');
movieElement.textContent = movie.name;
movieListElement.appendChild(movieElement);
});
};
// 发送Ajax请求
xhr.send();
</script>

上述代码中，首先创建了一个XMLHttpRequest对象，然后使用open方法指定了请求的方法和URL。在onload回调函数中，我们解析了服务器返回的数据，并将其逐一添加到页面上。
以上是一个简单的例子，展示了如何使用Ajax获取数据并放到页面上。当然，在实际开发中，可能会有更复杂的情况。比如，我们可能需要根据用户的输入来动态地获取数据并更新页面。
举一个更复杂的例子，假设我们有一个搜索功能，用户可以输入关键词来搜索电影。每当用户输入关键词时，我们就使用Ajax发送请求，获取符合条件的电影列表，并将其展示在页面上。我们可以通过绑定input元素的keyup事件来实现这个功能：

<input id="search-input" type="text" onkeyup="searchMovies(this.value)">
<div id="movie-list"></div>

<script>
// 定义一个全局变量，用于保存搜索结果
var searchResults = [];
// 定义搜索电影的函数
function searchMovies(keyword) {
// 创建一个Ajax请求
var xhr = new XMLHttpRequest();
// 指定请求的方法和URL
xhr.open('GET', '/movies?keyword=' + encodeURIComponent(keyword), true);
// 注册请求完成的回调函数
xhr.onload = function() {
// 获取服务器返回的电影列表数据
var movies = JSON.parse(xhr.responseText);
// 保存搜索结果
searchResults = movies;
// 更新页面上的电影列表
var movieListElement = document.getElementById('movie-list');
movieListElement.innerHTML = '';
movies.forEach(function(movie) {
var movieElement = document.createElement('p');
movieElement.textContent = movie.name;
movieListElement.appendChild(movieElement);
});
};
// 发送Ajax请求
xhr.send();
}
</script>

在上述代码中，我们定义了一个全局变量searchResults来保存搜索结果。在搜索电影的函数中，我们使用用户输入的关键词来发送Ajax请求，并将搜索结果保存到searchResults变量中。同时，我们在页面上清空了电影列表，并重新生成搜索结果的电影列表。
通过以上两个例子，我们可以看到如何使用Ajax获取数据，并将这些数据放到页面上。无论是简单的展示数据，还是根据用户的输入动态地获取数据并更新页面，Ajax都能提供便捷的解决方案。在实际开发中，我们可以根据具体需求和场景，灵活运用Ajax技术，提升用户体验。