隨著互聯網的不斷發展，網站的頁面內容越來越豐富與復雜，用戶對頁面內容的即時性和動態性要求也越來越高。為了實現頁面內容的即時更新，Ajax（Asynchronous JavaScript and XML）應運而生。它利用JavaScript和XML技術，可以通過異步通信獲取服務器端的數據，無需刷新整個頁面，從而提高用戶體驗。

以一個購物網站為例，當用戶點擊“加入購物車”按鈕時，頁面不刷新，但是需要更新購物車圖標上顯示的數量。這時就可以使用Ajax來異步獲取購物車數量，然后通過JavaScript動態更新頁面。具體的代碼如下：

function getCartCount() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 發送GET請求
xhr.open("GET", "/api/cart/count", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 獲取服務器返回的數據
var count = xhr.responseText;
// 更新購物車圖標上的數字
document.getElementById("cart-count").innerText = count;
}
};
xhr.send();
}

在上面的代碼中，首先通過XMLHttpRequest對象創建一個AJAX請求。然后使用open方法指定請求的方式（GET或POST）和URL地址，第三個參數為true表示異步請求。接下來，通過onreadystatechange事件監聽請求狀態的變化，當readyState值為4且status值為200時，表示請求成功。這時，可以通過responseText屬性獲取服務器返回的數據，并將其顯示在頁面上。

除了通過GET請求獲取數據，Ajax也可以通過POST請求向服務器發送數據。例如，當用戶在搜索框中輸入關鍵字并點擊搜索按鈕時，頁面不刷新，但需要異步加載搜索結果。此時，可以使用Ajax發送一個POST請求，將用戶輸入的關鍵字發送給服務器進行搜索，然后更新頁面顯示搜索結果。以下是一個示例代碼：

function search() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 獲取用戶輸入的關鍵字
var keyword = document.getElementById("search-input").value;
// 發送POST請求
xhr.open("POST", "/api/search", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 獲取服務器返回的搜索結果
var result = xhr.responseText;
// 更新頁面顯示搜索結果
document.getElementById("search-result").innerHTML = result;
}
};
xhr.send("keyword=" + keyword);
}

在上面的代碼中，使用XHR.setRequestHeader方法設置請求頭信息，告訴服務器發送的數據是表單格式的。在send方法中，將用戶輸入的關鍵字作為參數發送給服務器。服務器接收到請求后根據關鍵字進行搜索，并將搜索結果返回給客戶端，然后客戶端將結果更新在頁面上。

綜上所述，Ajax通過異步通信實現了動態更新頁面內容的功能。無論是獲取數據還是發送數據，都可以實現無刷新的操作，提升了用戶體驗。在實際開發中，可以根據具體的需求和場景選擇合適的請求方式和參數，來實現更加靈活和豐富的頁面交互效果。