AJAX（Asynchronous JavaScript and XML）是一种用于在无需刷新整个页面的情况下，与服务器进行异步通信的技术。它在网页开发中发挥着重要的作用，能够提供更好的用户体验和更高效的页面交互。在本文中，我们将探讨如何使用AJAX同页面传值和跳转。

在很多情况下，我们需要在不刷新整个页面的情况下更新部分页面内容。比如，在一个购物网站中，当用户点击“加入购物车”按钮时，我们希望能够在页面上显示更新后的购物车数量，而不需要刷新整个页面。这时，我们可以使用AJAX来实现同页面传值。以下是一个示例：

<script>function addToCart() {var productId = document.getElementById("productId").value;var quantity = document.getElementById("quantity").value;// 创建一个XMLHTTPRequest对象var xhr = new XMLHttpRequest();// 通过AJAX与服务器通信xhr.open("POST", "addToCart.php", true);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 更新购物车数量document.getElementById("cartCount").innerHTML = xhr.responseText;}}// 发送数据到服务器xhr.send("productId=" + productId + "&quantity=" + quantity);}</script>

在上面的示例中，当用户点击“加入购物车”按钮时，JavaScript函数addToCart()被调用。该函数获取了源产品ID和数量，并通过AJAX将这些数据发送到服务器的addToCart.php页面。服务器处理这些数据，并返回当前购物车中的产品数量。然后，JS根据服务器返回的响应更新了页面上的购物车数量。

在其他情况下，我们可能需要使用AJAX在不刷新整个页面的情况下跳转到另一个页面。比如，在一个社交网络应用中，当用户点击某个用户的个人资料链接时，我们希望能够在当前页面内动态加载该用户的个人资料，而不需要打开一个新的页面。这时，我们可以使用AJAX来实现同页面跳转。以下是一个示例：

<script>function loadUserProfile(userId) {// 创建一个XMLHTTPRequest对象var xhr = new XMLHttpRequest();// 通过AJAX与服务器通信xhr.open("GET", "userProfile.php?userId=" + userId, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 更新页面内容document.getElementById("content").innerHTML = xhr.responseText;// 更新URL中的地址history.pushState(null, null, "userProfile.php?userId=" + userId);}}// 发送请求到服务器xhr.send();}</script>

在上面的示例中，当用户点击某个用户的个人资料链接时，JavaScript函数loadUserProfile()被调用，并传递了所需的用户ID。该函数创建了一个XMLHTTPRequest对象，并通过AJAX请求服务器上的userProfile.php页面。服务器处理这个请求，并返回用户的个人资料。然后，JS根据服务器返回的响应更新了页面上的内容，同时也更新了URL中的地址，以便用户可以复制或分享该链接。

总而言之，AJAX使得无刷新页面的传值和跳转变得简单易行。通过在同一个页面内使用AJAX与服务器进行异步通信，我们可以在不刷新整个页面的情况下更新页面内容，并提供更好的用户体验。无论是同页面传值还是跳转，AJAX都是一个强大且广泛应用的工具，为网页开发带来了许多便利。