隨著互聯網技術的不斷發展，越來越多的網頁需要實時更新內容和樣式。在傳統的網頁設計中，用戶需要手動刷新頁面以獲得最新的數據。然而，借助Ajax（Asynchronous JavaScript and XML）技術，我們可以實現無需刷新頁面就能實時修改頁面顏色的效果，提升用戶體驗。

在介紹Ajax實時修改頁面顏色的實現過程之前，我們先來看一個具體的場景。假設我們正在開發一個博客網站。用戶可以在頁面上選擇不同的主題顏色以個性化自己的博客頁面。傳統的做法是，在用戶選擇完成后，通過提交表單或點擊按鈕來刷新整個頁面以應用新的主題。然而，這樣的操作會耗費時間并使用戶體驗下降。而使用Ajax技術，我們可以實現用戶選擇主題后，頁面能夠即時地反饋出新的顏色，提供更好的用戶體驗。

頁面顏色的實時修改可以通過JavaScript中的DOM操作來實現。下面是一個示例代碼：

// HTML
<button onclick="changeColor('red')">紅色</button>
<button onclick="changeColor('green')">綠色</button>
<button onclick="changeColor('blue')">藍色</button>
<div id="content">這是一個示例內容</div>
// JavaScript
function changeColor(color) {
var content = document.getElementById("content");
content.style.color = color;
}

在上述代碼中，我們通過三個按鈕來提供不同的顏色選項。當用戶點擊其中一個按鈕時，相應的顏色會立即應用到頁面上的內容區域。為了實現這個功能，我們使用了JavaScript中的getElementById方法來獲取頁面中的content元素，并通過修改其style.color屬性來改變文字顏色。這樣，用戶無需刷新頁面就能夠實時修改頁面顏色。

除了修改文字顏色，我們還可以使用Ajax實現其他樣式的實時修改，比如背景顏色、字體大小等。在實際應用中，我們可以結合CSS的樣式選擇器來針對不同的元素修改樣式。例如，當用戶選擇綠色主題時，可以修改頁面中所有class為"theme"的元素的背景顏色：

// HTML
<button onclick="changeTheme('green')">綠色主題</button>
<button onclick="changeTheme('blue')">藍色主題</button>
<div class="theme">這是一個示例內容</div>
<div class="theme">這是另一個示例內容</div>
// CSS
.theme {
background-color: yellow;
}
// JavaScript
function changeTheme(color) {
var themeElements = document.getElementsByClassName("theme");
for (var i = 0; i< themeElements.length; i++) {
themeElements[i].style.backgroundColor = color;
}
}

在上述代碼中，我們通過修改class為"theme"的元素的背景色來實現頁面主題的實時修改。當用戶選擇綠色主題時，所有class為"theme"的元素的背景色會變為綠色。同樣地，用戶無需刷新頁面就能夠實時享受到新的主題效果。

通過以上示例，我們看到了使用Ajax技術實時修改頁面顏色的實現過程。借助于JavaScript中的DOM操作，我們可以動態地修改頁面的樣式，從而提供更好的用戶體驗。這種技術在博客網站、電子商務網站等各種類型的網頁應用中都有廣泛的應用前景。