本文将介绍如何使用 AJAX 技术在不刷新页面的情况下传递参数。AJAX 是一种通过 JavaScript 异步地向服务器发送和接收数据的技术，能够有效地提升网页的用户体验。通过本文的演示和例子，你将明白如何通过 AJAX 实现参数的传递，并在不需要跳转页面的情况下更新网页内容。

假设我们有一个简单的网页，在其中有一个按钮，当用户点击按钮时，我们需要向服务器传递一些参数，并根据返回的数据动态更新页面内容，而不需要刷新整个页面。通过 AJAX 技术，可以轻松实现这个功能。

<button onclick="sendRequest()">点击发送请求</button>
<div id="content"></div>
<script>
function sendRequest() {
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置回调函数，用于处理服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 在回调函数中更新页面内容
document.getElementById("content").innerHTML = xhr.responseText;
}
};
// 发送 AJAX 请求
xhr.open("GET", "example.com?param1=value1&param2=value2", true);
xhr.send();
}
</script>

上述代码中，我们首先创建了一个名为 "sendRequest" 的 JavaScript 函数，该函数在按钮点击时被调用。在该函数中，我们创建了一个 XMLHttpRequest 对象（用于发送和接收数据），并设置了回调函数（用于处理服务器响应）。这个回调函数会在服务器端返回数据后被触发，并将响应的内容更新到网页的 "content" 元素中。

接下来，我们调用 XMLHttpRequest 对象的 "open" 方法来配置请求类型（GET 或 POST）、请求的 URL 和是否使用异步请求。在这个例子中，我们使用了 GET 请求，并将参数作为 URL 的一部分发送给服务器。你可以根据自己的需求和服务器的接口来确定传递参数的方式。

最后，我们调用 XMLHttpRequest 对象的 "send" 方法将请求发送到服务器。服务器处理请求并返回响应后，回调函数就会被触发，我们可以在回调函数中处理服务器的响应，并更新网页内容。

下面是一个更具体的例子，假设我们有一个简单的计算器网页，用户可以输入两个数字并点击一个按钮来计算它们的和：

<input id="number1" type="text" placeholder="请输入第一个数字">
<input id="number2" type="text" placeholder="请输入第二个数字">
<button onclick="sendRequest()">计算</button>
<div id="result"></div>
<script>
function sendRequest() {
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = "计算结果：" + xhr.responseText;
}
};
xhr.open("GET", "example.com/add?num1=" + num1 + "&num2=" + num2, true);
xhr.send();
}
</script>

在这个例子中，我们获取用户输入的两个数字，并将它们作为参数发送到服务器。在服务器端，执行相加操作，并将结果返回给浏览器。我们在回调函数中处理服务器的响应，并将计算结果更新到网页中。

AJAX 技术的应用非常广泛，通过异步请求，可以实现无需页面刷新即可更新内容。不仅在表单和计算器类应用中有用，还可以用于加载最新的评论、更新用户个人信息等各种场景。通过灵活运用 AJAX 技术，可以提升网页的用户体验，并实现更加动态和交互性的应用。