AJAX（Asynchronous JavaScript and XML）是一種在網頁中實現動態更新數據的技術，通過異步發送HTTP請求，可以實現無需刷新整個頁面的數據更新。在網頁開發中，我們經常會遇到修改界面數據的需求，而使用AJAX可以輕松實現這一功能。本文將介紹如何使用AJAX來修改界面數據，并給出一些示例。

在使用AJAX實現修改界面數據之前，首先需要了解一些基本的概念。AJAX通過XMLHttpRequest對象來發送HTTP請求，并通過回調函數處理服務器返回的數據。在前端頁面上，我們通常會有一些按鈕或者鏈接，當用戶點擊它們時，我們可以使用AJAX發送請求，然后更新頁面上的相關數據，而無需整個頁面的刷新。

舉個例子，假設我們有一個實時股票行情的網頁，并且頁面上顯示著某只股票的當前價格，我們想要實現一個功能，當用戶點擊“刷新”按鈕時，能夠通過AJAX請求更新當前價格。首先，我們需要在頁面上添加一個按鈕：

<button id="refreshButton">刷新</button>

然后，在JavaScript中，我們可以使用以下代碼來實現AJAX請求并更新頁面上的當前價格：

document.getElementById("refreshButton").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("currentPrice").innerHTML = response.price;
}
};
xhr.open("GET", "http://example.com/stock/price", true);
xhr.send();
});

我們首先通過getElementById方法獲取到刷新按鈕的引用，然后使用addEventListener方法添加一個點擊事件的監聽器。在監聽器函數中，我們創建了一個XMLHttpRequest對象，并設置了onreadystatechange屬性來處理服務器返回的數據。當服務器返回的狀態碼為200，并且響應體中的數據被解析為JSON對象后，我們將頁面上的當前價格元素的innerHTML屬性更新為服務器返回的價格。

上述代碼中發起的AJAX請求采用了GET方法，并且請求的URL為http://example.com/stock/price。當然，實際應用中，我們需要根據情況來設置請求的URL和使用的HTTP方法。

除了可以通過AJAX請求獲取數據來更新頁面，我們還可以通過AJAX發送數據來修改服務器上的數據。舉個例子，假設我們有一個在線商城的網頁，用戶可以點擊“加入購物車”按鈕將商品添加到購物車中。我們想要實現這個功能，可以使用AJAX向服務器發送請求，將商品的ID發送過去。以下是一個示例：

<button class="addToCartButton" data-itemid="123">加入購物車</button>

上述代碼中，我們使用了一個自定義的data屬性來存儲商品的ID。在JavaScript中，我們可以使用以下代碼來實現AJAX請求：

var addToCartButtons = document.getElementsByClassName("addToCartButton");
for(var i = 0; i< addToCartButtons.length; i++) {
addToCartButtons[i].addEventListener("click", function() {
var itemId = this.getAttribute("data-itemid");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
alert("商品已成功添加到購物車！");
}
};
xhr.open("POST", "http://example.com/cart/add", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("itemId=" + itemId);
});
}

我們首先通過getElementsByClassName方法獲取到所有的“加入購物車”按鈕的引用，然后使用一個for循環為每個按鈕添加點擊事件的監聽器。在監聽器函數中，我們使用getAttribute方法獲取到按鈕上存儲的商品ID，并將其作為請求的參數發送到服務器。當服務器返回的狀態碼為200時，我們彈出一個提示框告知用戶商品已成功添加到購物車。

通過以上的示例，我們可以看到使用AJAX可以很方便地實現修改界面數據的功能。無論是獲取后臺數據更新頁面，還是通過前臺頁面操作改變后臺數據，AJAX都是一個強大的工具。希望本文對大家有所幫助。