AJAX（Asynchronous JavaScript and XML）是一種用于創建動態網頁的前端技術，它利用JavaScript和XML來實現異步傳輸數據和更新網頁的部分內容，無需刷新整個頁面。通過AJAX，我們可以實現局部數據的修改，提高用戶體驗，并減少服務器的負荷。

假設我們有一個網頁上顯示了某個商品的名稱和價格，用戶可以通過點擊一個按鈕來修改價格。在傳統的開發方式中，用戶點擊按鈕后，服務器會接收到請求，然后進行價格修改，并返回新的商品信息，最后網頁重新加載整個頁面來顯示新的價格。這種方式的缺點是用戶需要等待頁面重新加載，體驗較差。

使用AJAX，我們可以實現在不刷新整個頁面的情況下，只更新價格部分的內容。首先，我們需要通過JavaScript編寫一個函數，在用戶點擊按鈕時觸發該函數。接著，通過AJAX技術，我們將用戶的請求發送到服務器，并指定一個處理數據的函數。

function updatePrice() {
// 創建AJAX對象
var xhr = new XMLHttpRequest();
// 監聽AJAX對象的狀態
xhr.onreadystatechange = function() {
// 當AJAX對象狀態為4（請求已完成）且狀態碼為200（請求成功）時執行
if (xhr.readyState === 4 && xhr.status === 200) {
// 修改頁面上的價格
var priceElement = document.getElementById("price");
priceElement.innerHTML = xhr.responseText;
}
};
// 設置AJAX請求的方法和URL
xhr.open("GET", "updatePrice.php", true);
// 發送AJAX請求
xhr.send();
}

以上是一個簡單的JavaScript函數，當用戶點擊按鈕時，這個函數會創建一個AJAX對象，監聽其狀態，然后發送一個GET請求到服務器上的"updatePrice.php"文件。當服務器返回響應時，這個函數會獲取響應的內容，并將其更新到頁面上的價格元素中。

在服務器端的"updatePrice.php"文件中，我們可以接收到請求，并進行價格的修改。假設我們將修改價格的邏輯簡化為給定商品的價格+50。然后，我們將修改后的價格作為響應發送回前端頁面。

$price = $_GET["price"];
$newPrice = $price + 50;
echo $newPrice;

在這個例子中，當用戶點擊按鈕時，會執行JavaScript函數"updatePrice"，該函數創建一個AJAX對象，發送一個GET請求到服務器的"updatePrice.php"文件。服務器接收到價格后，將其加50，并將修改后的價格作為響應返回給前端頁面。JavaScript函數監聽到響應后，將響應內容更新到頁面上的價格元素中。這樣，用戶在不刷新整個頁面的情況下，可以看到修改后的價格。

AJAX通過使用JavaScript和XMLHttpRequest對象來實現異步傳輸數據和動態更新頁面的局部內容。使用AJAX，可以在不刷新整個頁面的情況下，實現部分數據的修改，提高用戶體驗，并減少服務器的負荷。

總之，AJAX是一個強大的前端技術，通過它我們可以實現局部數據的修改，提高用戶體驗。使用AJAX可以使網頁更加動態和交互，在許多領域都有廣泛的應用。