AJAX(Asynchronous JavaScript and XML) 是一種用于在不刷新整個網(wǎng)頁的情況下向服務器發(fā)送和接收數(shù)據(jù)的技術。傳統(tǒng)上，超鏈接通常用于在網(wǎng)頁中進行導航并訪問不同的頁面，但是通過使用 AJAX 技術，我們可以使用超鏈接發(fā)送請求并向服務器獲取數(shù)據(jù)，而不必離開當前頁面。
假設我們有一個網(wǎng)站，其中包含一個商品列表頁面，每個商品都有一個超鏈接，點擊該鏈接將跳轉(zhuǎn)到該商品的詳細信息頁面。傳統(tǒng)上，點擊超鏈接后，網(wǎng)頁將刷新并加載新的頁面。但是，通過使用 AJAX，我們可以在不刷新整個頁面的情況下獲取和顯示商品的詳細信息。
為了演示如何使用超鏈接發(fā)送 AJAX 請求，讓我們假設我們的網(wǎng)站上有一個商品列表，并且希望當用戶點擊商品名稱時，在當前頁面上顯示該商品的詳細信息。
<!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 創(chuàng)建了一個名為getProductDetails的函數(shù)，它接受一個商品的 ID 作為參數(shù)。在函數(shù)內(nèi)部，我們創(chuàng)建了一個 XMLHttpRequest 對象，用于與服務器進行通信并獲取商品的詳細信息。
在 XMLHttpRequest 對象的onreadystatechange事件處理程序中，我們首先檢查readyState是否為 4，并且status是否為 200，以確保服務器響應成功。如果響應成功，我們將商品詳細信息的內(nèi)容更新到一個具有指定 ID 的元素上，這里是名為product-details的 DIV。
在 HTML 代碼中，我們創(chuàng)建了一個無序列表，其中包含多個列表項，每個列表項對應一個商品。每個商品都使用超鏈接標簽<a>來表示，并在其onclick屬性中調(diào)用了getProductDetails函數(shù)，并傳遞了相應的商品 ID。當用戶點擊超鏈接時，JavaScript 將使用 AJAX 技術向服務器發(fā)送請求，并將商品詳細信息更新到product-detailsDIV 中，而不會刷新整個頁面。
這只是一個簡單的示例，演示了如何使用超鏈接發(fā)送 AJAX 請求。實際上，我們可以通過 AJAX 實現(xiàn)更復雜的功能，例如通過單擊超鏈接加載更多商品、搜索商品等。通過使用 AJAX，我們可以大大提高網(wǎng)頁的交互性和用戶體驗。