AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它使用异步通信方式，能够在不重载整个页面的情况下更新部分页面内容。在AJAX中，页面可以从服务器获取数据并将其显示在页面上，而不需要用户重新加载整个页面。通过AJAX向页面返回不同的数据类型，可以实现各种有趣和动态的网页效果。

下面我们通过几个具体的例子来展示AJAX向页面返回数据类型的使用。

第一个例子是使用AJAX向页面返回文本数据类型。假设我们有一个简单的网页应用程序，其中包含一个按钮，当用户点击按钮时，页面会向服务器发送请求，并将服务器返回的文本数据显示在页面上。下面是一个使用jQuery的例子：

$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
url: "demo.txt",
success: function(result){
$("#text").html(result);
}
});
});
});

在这个例子中，当用户点击id为"btn"的按钮时，页面会通过AJAX请求demo.txt文件，并将返回的数据显示在id为"text"的元素中。

第二个例子是使用AJAX向页面返回JSON数据类型。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于服务端和客户端之间的数据通信。下面是一个使用原生JavaScript的例子：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
document.getElementById("name").innerHTML = data.name;
document.getElementById("age").innerHTML = data.age;
}
};
xmlhttp.open("GET", "demo.json", true);
xmlhttp.send();

在这个例子中，页面通过AJAX请求demo.json文件，并将返回的JSON数据解析后，将其中的"name"和"age"属性显示在页面上。

第三个例子是使用AJAX向页面返回HTML数据类型。假设我们有一个简单的网页应用程序，其中包含一个表单，用户可以通过表单输入内容，并将其提交到服务器。服务器处理表单数据后，返回新的HTML代码片段，并显示在页面的某个位置。下面是一个使用原生JavaScript的例子：

document.getElementById("myForm").addEventListener("submit", function(event){
event.preventDefault();
var formData = new FormData(this);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
document.getElementById("myForm").reset();
}
};
xmlhttp.open("POST", "submit-form.php", true);
xmlhttp.send(formData);
});

在这个例子中，当用户提交表单时，页面会通过AJAX将表单数据提交到服务器，并将服务器返回的HTML代码显示在id为"result"的元素中。

总结而言，AJAX可以向页面返回不同的数据类型，如文本、JSON和HTML。这使得我们可以轻松实现各种动态和交互式的网页效果。无论是更新页面上的部分内容，还是实现与服务器之间的数据交互，AJAX都是一种非常有用和强大的技术。