在现代 web 开发中，实现同一页面的无刷新传值是非常常见的需求。这种需求可以通过使用 AJAX（Asynchronous JavaScript and XML）技术实现。AJAX 是一种在不重新加载整个网页的情况下，通过异步（即非阻塞）方式与服务器进行通信的技术。
为了更好地理解 AJAX 同一页面无刷新传值的原理和实现方式，我们来看一个简单的例子。假设我们有一个网页上有一个按钮，点击按钮后会将当前时间显示在页面上的一个文本框中。原始的实现方式可能是通过传统的表单提交重新加载整个页面来实现，但是这种方式会导致页面的重新加载和用户的断点。而使用 AJAX 技术，我们可以通过异步方式将新的时间数据获取并更新页面，不重新加载整个页面，使用户的体验得到提升。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>AJAX 同一页面无刷新传值例子</title>
</head>
<body>
<div id="time"></div>
<input type="button" value="获取时间" onclick="getTime()">
<input type="text" id="result">
</body>
</html>
JavaScript 代码：
<script>
function getTime() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_time.php', true);
xhr.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200) {
document.getElementById('result').value = xhr.responseText;
}
};
xhr.send();
}
</script>在上面的例子中，当用户点击按钮时，JavaScript 函数 getTime() 被调用。该函数内部创建了一个 XMLHttpRequest 对象，并通过 open() 方法指定了异步 GET 请求的 URL（在这个例子中为 'get_time.php'）。然后，我们设置了回调函数 xhr.onreadystatechange，这个函数会在 Ajax 请求的状态发生变化时被调用。
回调函数中，我们首先检查是否异步请求已经完成（readyState 为 4），以及返回的状态码是否为 200（表示请求成功）。然后，我们通过获取 xhr.responseText 中的内容，将其显示在页面上的文本框内。
在实际开发中，我们可以通过读取表单中的输入数据，并通过 AJAX 将这些数据发送给服务器进行处理，然后再将服务器的处理结果返回，以实现页面局部的无刷新更新。这种方式可以极大地减少页面的重载，提升用户体验。
除了 GET 请求之外，我们还可以使用 POST 请求和其他 HTTP 方法来实现不同的功能。此外，我们还可以使用 JavaScript 库，如 jQuery，来简化 AJAX 的使用和处理异步请求的复杂度。
总之，在现代 web 开发中，AJAX 技术是实现同一页面无刷新传值的重要工具。通过使用 AJAX，我们可以以异步的方式与服务器进行通信，实现局部的无刷新更新，从而提升用户体验。