在網頁開發中，我們經常需要通過Ajax來動態加載和更新頁面的內容。Ajax（Asynchronous JavaScript and XML）是一種在后臺與服務器進行數據交換的技術，可以使網頁實現部分更新而不需要重新加載整個頁面。通過Ajax，我們可以通過服務器端返回的數據來更新頁面中的內容，從而在不刷新整個頁面的情況下提供更好的用戶體驗。
舉一個簡單的例子，假設我們有一個網頁中有一個按鈕，當用戶點擊按鈕時，我們希望動態加載服務器端返回的數據，并將其顯示在頁面中的一個區域內。首先，我們需要使用JavaScript來處理用戶點擊事件，并發送Ajax請求到服務器端。通過XMLHttpRequest對象可以發送異步的HTTP請求。接下來，我們需要定義一個回調函數來處理服務器端返回的數據。在回調函數中，我們可以將數據插入到指定的HTML元素中，從而實現內容的更新。以下是一段基本的代碼示例：

// HTML部分
<button id="load-button">點擊加載數據</button>
<div id="data-container"></div>
// JavaScript部分
document.getElementById('load-button').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '服務器端URL', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = xhr.responseText;
document.getElementById('data-container').innerHTML = data;
}
};
xhr.send();
});

上面的代碼中，首先我們在HTML中定義了一個按鈕和一個用于顯示數據的div元素。在JavaScript中，我們通過getElementById方法獲取按鈕元素，并給其添加一個點擊事件的監聽器。當用戶點擊按鈕時，事件處理程序被觸發，發送Ajax請求到服務器端。在回調函數中，我們首先檢查響應的狀態碼，如果狀態碼為200，則表示請求成功。我們將服務器端返回的數據存儲在一個變量中，并將其插入到data-container元素中的innerHTML屬性中，從而更新頁面中的內容。
除了使用原生的JavaScript和XMLHttpRequest對象，我們還可以使用更加方便的工具庫來簡化這個過程，例如jQuery的ajax方法。以下是上述例子使用jQuery進行改寫的代碼：

// HTML部分和原生JavaScript相同
// JavaScript部分
$('#load-button').on('click', function() {
$.ajax({
url: '服務器端URL',
method: 'GET',
success: function(data) {
$('#data-container').html(data);
}
});
});

通過引入jQuery庫，我們可以使用$符號來選擇HTML元素并給其添加事件監聽器。在點擊事件的處理函數中，我們使用ajax方法發送異步請求，并指定請求的URL和方法。在成功的回調函數中，我們使用html方法來更新data-container元素的內容。
總結起來，使用Ajax來設置頁面的內容可以實現頁面的動態更新，提供更好的用戶體驗。通過發送異步的HTTP請求，并在回調函數中處理服務器端返回的數據，我們可以實現內容的更新。希望上述的例子和代碼能夠幫助讀者更好地理解和應用Ajax技術。