AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它允許在不重新加載整個頁面的情況下，在后臺向服務器發送請求并更新頁面內容。在本文中，我們將重點討論如何使用AJAX實現頁面跳轉以及如何在頁面之間傳遞數據。 頁面跳轉是Web開發中常見的需求之一。傳統的方式是使用鏈接或表單提交來實現頁面跳轉，但這通常會導致頁面整體刷新，并且會丟失當前頁面的狀態。相比之下，AJAX可以在不刷新整個頁面的情況下只更新部分內容，給用戶帶來更好的體驗。 為了更好地理解AJAX實現頁面跳轉，我們假設有一個電子商務網站，其中有一個商品列表頁面和一個商品詳情頁面。當用戶在商品列表頁面點擊某個商品時，頁面會通過AJAX發送請求到服務器，獲取對應商品的詳細信息，然后展示在商品詳情頁面上。 首先，我們在商品列表頁面上綁定一個點擊事件，當用戶點擊某個商品時，觸發該事件并通過AJAX發送請求到服務器。以下是一個示例代碼：

$(document).on('click', '.product-link', function() {
var productId = $(this).data('id');
$.ajax({
url: '/product-details',
method: 'GET',
data: { id: productId },
success: function(response) {
// 在成功獲取商品詳細信息后，更新商品詳情頁面的內容
$('#product-details-container').html(response);
},
error: function() {
alert('無法獲取商品詳細信息');
}
});
});

在上述代碼中，我們使用了jQuery庫的Ajax方法來發送GET請求，請求的URL是'/product-details'，并將商品ID作為數據傳遞給服務器。在服務器返回成功響應后，我們將返回的數據更新到商品詳情頁面的容器中。 接下來，我們需要在后端編寫一個處理商品詳細信息請求的路由。以下是一個使用Node.js和Express框架的例子：

app.get('/product-details', function(req, res) {
var productId = req.query.id;
// 通過商品ID從數據庫中獲取商品詳細信息，并將其渲染為HTML字符串
var productDetails = db.getProductDetails(productId);
res.send(productDetails);
});

在上述代碼中，我們使用Express框架的GET方法定義了一個'/product-details'的路由，當該路由被請求時，我們從數據庫中獲取相應商品的詳細信息，并將其作為HTML字符串發送回客戶端。 通過以上的代碼示例，我們成功地實現了通過AJAX實現頁面跳轉和傳遞數據的功能。用戶在商品列表頁面點擊某個商品時，頁面會根據商品ID發送AJAX請求到服務器，獲取對應的商品詳細信息，并將其顯示在商品詳情頁面上。這樣，用戶可以在不刷新整個頁面的情況下瀏覽不同的商品信息。 總結起來，AJAX是一種強大的技術，可以在頁面之間實現無刷新的跳轉和數據傳遞。它不僅提升了用戶體驗，還減少了不必要的網絡請求，提高了頁面加載速度。無論是電子商務網站還是社交媒體應用程序，AJAX都可以幫助我們實現更流暢、更高效的界面交互。