AJAX(Asynchronous JavaScript and XML) 是一種用于在不刷新整個網頁的情況下向服務器發送和接收數據的技術。傳統上，超鏈接通常用于在網頁中進行導航并訪問不同的頁面，但是通過使用 AJAX 技術，我們可以使用超鏈接發送請求并向服務器獲取數據，而不必離開當前頁面。
假設我們有一個網站，其中包含一個商品列表頁面，每個商品都有一個超鏈接，點擊該鏈接將跳轉到該商品的詳細信息頁面。傳統上，點擊超鏈接后，網頁將刷新并加載新的頁面。但是，通過使用 AJAX，我們可以在不刷新整個頁面的情況下獲取和顯示商品的詳細信息。
為了演示如何使用超鏈接發送 AJAX 請求，讓我們假設我們的網站上有一個商品列表，并且希望當用戶點擊商品名稱時，在當前頁面上顯示該商品的詳細信息。
<!DOCTYPE html>
<html>
<head>
<script>
function getProductDetails(productId) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("product-details").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getProductDetails.php?id=" + productId, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>商品列表</h2>
<ul>
<li><a href="#" onclick="getProductDetails(1)">商品1</a></li>
<li><a href="#" onclick="getProductDetails(2)">商品2</a></li>
<li><a href="#" onclick="getProductDetails(3)">商品3</a></li>
</ul>
<div id="product-details"></div>
</body>
</html>上述代碼示例中，我們使用 JavaScript 創建了一個名為getProductDetails的函數，它接受一個商品的 ID 作為參數。在函數內部，我們創建了一個 XMLHttpRequest 對象，用于與服務器進行通信并獲取商品的詳細信息。
在 XMLHttpRequest 對象的onreadystatechange事件處理程序中，我們首先檢查readyState是否為 4，并且status是否為 200，以確保服務器響應成功。如果響應成功，我們將商品詳細信息的內容更新到一個具有指定 ID 的元素上，這里是名為product-details的 DIV。
在 HTML 代碼中，我們創建了一個無序列表，其中包含多個列表項，每個列表項對應一個商品。每個商品都使用超鏈接標簽<a>來表示，并在其onclick屬性中調用了getProductDetails函數，并傳遞了相應的商品 ID。當用戶點擊超鏈接時，JavaScript 將使用 AJAX 技術向服務器發送請求，并將商品詳細信息更新到product-detailsDIV 中，而不會刷新整個頁面。
這只是一個簡單的示例，演示了如何使用超鏈接發送 AJAX 請求。實際上，我們可以通過 AJAX 實現更復雜的功能，例如通過單擊超鏈接加載更多商品、搜索商品等。通過使用 AJAX，我們可以大大提高網頁的交互性和用戶體驗。