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都是一個強大且廣泛應用的工具，為網頁開發帶來了許多便利。