使用Ajax技术可以实现无需页面刷新的数据提交和显示，极大地提升用户体验。本文将探讨如何使用Ajax提交数据到另一个页面，并通过刷新页面展示新数据。通过举例和详细解释，读者将了解如何使用Ajax实现这一功能。
在Web开发中，数据的提交和显示是常见的需求。传统的方式是用户填写表单后，页面刷新并将数据提交到服务器，然后服务器返回一个新的页面来显示提交的数据。这种方式会导致页面重新加载，给用户带来不必要的等待时间。而使用Ajax，页面可以在不刷新的情况下进行数据提交和刷新，大大提高了用户体验。
下面举一个简单的例子来说明。假设我们正在开发一个留言板应用，用户可以在输入框中输入留言，点击“提交”按钮后，页面应该更新并显示用户刚刚提交的留言。
假设我们有一个HTML文件，包含一个输入框和一个提交按钮，如下所示：

html
<p>请输入您的留言：</p>
<input type="text" id="message">
<button onclick="submitMessage()">提交</button>

在JavaScript部分，我们需要编写一个函数，用于提交留言并更新页面。我们可以使用Ajax来实现这个功能。首先，我们需要创建一个XMLHttpRequest对象，并指定一个回调函数来处理服务器返回的数据。然后，我们使用open()方法指定请求的类型（POST或GET）和地址。最后，我们使用send()方法发送请求。

javascript
<script>
function submitMessage() {
var message = document.getElementById("message").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 成功接收到服务器返回的数据
document.body.innerHTML = xhr.responseText;
} else {
// 发生错误
alert("发生错误：" + xhr.status);
}
}
};
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("message=" + message);
}
</script>

在这个例子中，我们使用POST请求将留言提交到服务器上的submit.php页面。在发送请求之前，我们使用setRequestHeader()方法设置请求头，告诉服务器我们正在发送表单数据。然后，我们使用send()方法将留言数据发送到服务器。
当我们点击“提交”按钮时，JavaScript代码将被执行并发送请求。服务器接收到请求后会处理留言，并将处理结果返回。在我们的回调函数中，我们通过检查readyState和status属性来判断是否收到了响应，然后使用responseText属性获取服务器返回的数据。最后，我们将页面的内容更新为服务器返回的数据。
通过这个简单的例子，我们可以看到，使用Ajax提交数据到另一个页面并实时刷新的过程是相对简单的。只需要创建一个XMLHttpRequest对象，设置回调函数，发送请求，并处理服务器返回的数据。这种方式不仅可以提高用户体验，还可以减少页面的加载时间，提升网站的性能。
总结起来，使用Ajax技术可以实现无需页面刷新的数据提交和显示。通过上述的例子和解释，读者可以更好地理解如何使用Ajax将数据提交到另一个页面，并在页面刷新时展示新数据。希望本文对于读者理解和应用Ajax技术有所帮助。