AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上實現異步通信的技術。利用AJAX，我們可以通過后臺與服務器交換數據，而不會使整個網頁加載刷新。在網頁開發中經常會遇到需要動態修改按鈕的html值的情況，本文將探討如何使用AJAX實現這一功能。 假設我們有一個網頁上的按鈕，初始時按鈕上顯示的文字是“點擊獲取數據”。當用戶點擊按鈕時，我們希望通過AJAX從服務器獲取一些數據，并將按鈕上的文字修改為“數據加載中”。當數據獲取完成后，我們將按鈕上的文字再次修改為“數據獲取成功”。 實現這一功能的關鍵是使用AJAX的異步請求和回調函數。首先，我們可以通過JavaScript的事件監聽機制，在用戶點擊按鈕時觸發一個JavaScript函數。在這個函數中，我們可以使用AJAX發起一個異步請求，向服務器請求數據，如下所示：

function getData() {
// 修改按鈕顯示的文字為“數據加載中”
document.getElementById("button").innerHTML = "數據加載中";
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 修改按鈕顯示的文字為“數據獲取成功”
document.getElementById("button").innerHTML = "數據獲取成功";
// 處理服務器返回的數據
var data = xhr.responseText;
// ...
}
};
// 發送異步請求
xhr.open("GET", "server.php", true);
xhr.send();
}

上述代碼中，我們通過`document.getElementById("button")`獲取到按鈕元素，并將其內部的文字內容修改為“數據加載中”。接著，我們使用`XMLHttpRequest`對象創建一個異步請求，并指定一個回調函數。在回調函數中，如果`xhr.readyState`等于4（表示響應已經完全接收），以及`xhr.status`等于200（表示請求成功），則將按鈕上的文字修改為“數據獲取成功”。 需要注意的是，上述代碼只是完成了按鈕上顯示文字的修改，并沒有實際處理服務器返回的數據。如果需要對服務器返回的數據進行進一步的處理，可以在回調函數中添加相應的代碼。 上述例子只是使用了純JS來實現AJAX修改按鈕的html值，實際開發中我們可以使用第三方庫如jQuery，它提供了更簡潔的語法和更好的兼容性。以下是同樣的功能使用jQuery實現的代碼：

function getData() {
// 修改按鈕顯示的文字為“數據加載中”
$("#button").html("數據加載中");
// 發起異步請求
$.ajax({
url: "server.php",
type: "GET",
success: function(data) {
// 修改按鈕顯示的文字為“數據獲取成功”
$("#button").html("數據獲取成功");
// 處理服務器返回的數據
// ...
}
});
}

使用jQuery的`$.ajax`函數，我們可以更簡潔地指定了請求的URL，請求的類型為GET，并在`success`回調函數中處理服務器返回的數據。 總而言之，通過使用AJAX技術，我們可以動態修改按鈕的html值，從而實現更好的用戶交互體驗。無論是使用原生JavaScript還是jQuery，我們都可以輕松地完成這一功能。