在傳統的網頁開發中，當用戶與網頁進行交互后，需要刷新整個頁面才能看到最新的變化。這種方式不僅影響了用戶的體驗，還增加了服務器的負擔。為了提升用戶體驗并減輕服務器壓力，現代網頁開發引入了Ajax（Asynchronous JavaScript and XML）技術。Ajax通過在后臺與服務器進行數據交互，實現了在不刷新頁面的情況下更新部分網頁內容，從而提供了更流暢、快速的用戶體驗。

舉例來說，假設我們正在開發一個電商網站，用戶在商品列表頁面上可以篩選商品，例如選擇只顯示價格低于100元的商品。傳統的方式是用戶選擇了篩選條件后，點擊“篩選”按鈕，整個頁面重新刷新，服務器重新返回與篩選條件相匹配的商品列表，然后用戶才能看到更新后的頁面。這樣的體驗非常不友好，因為用戶需要等待頁面刷新，并且重新加載整個頁面的效率也很低。使用Ajax技術，我們可以通過與服務器進行數據交互，只更新商品列表的部分內容，而不用刷新整個頁面。用戶無需等待頁面刷新，一旦選擇了篩選條件，就能立即看到更新后的商品列表，提升了用戶體驗。

Ajax技術的核心是XMLHttpRequest對象。通過創建XMLHttpRequest對象，我們可以向服務器發送請求并接收服務器返回的數據。下面是一個簡單的例子：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data", true); // 發送GET請求
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var data = xhr.responseText; // 從服務器返回的數據
// 對數據進行處理
}
}

在這個例子中，我們創建了一個XMLHttpRequest對象并通過open方法指定了請求的類型、URL和是否使用異步模式。之后，我們發送了一個GET請求，并通過send方法將請求發送到服務器。當服務器響應請求時，XMLHttpRequest對象會調用onreadystatechange事件處理函數。通過檢查readyState屬性，我們可以確定當前請求的狀態。當readyState等于4（表示服務器已返回所有數據）并且status等于200（表示請求成功），我們可以通過responseText屬性獲取服務器返回的數據，并進行處理。

使用Ajax技術不僅可以實現頁面內容的動態更新，還可以實現其他一些功能。比如用戶在網頁上進行表單提交時，通常需要刷新整個頁面才能看到提交結果。使用Ajax技術，我們可以通過與服務器進行數據交互，在不刷新頁面的情況下顯示提交結果。這樣用戶就能立即看到提交結果，無需等待頁面刷新。

總之，Ajax技術使網頁開發更加高效、流暢。通過與服務器進行數據交互，我們可以在不刷新頁面的情況下更新部分網頁內容，提升了用戶體驗，并減輕了服務器的負擔。