AJAX是一種用于實現動態網頁的技術，它可以在不刷新整個頁面的情況下與服務器進行交互。通過AJAX，我們可以實現用戶與服務器之間的實時數據交流，提升用戶體驗并減少對服務器的負載。本文將介紹AJAX如何與服務器交互，并通過示例代碼加以說明。

在AJAX與服務器交互的過程中，最重要的一環是通過XMLHttpRequest對象來發送HTTP請求并接收響應。通過這個對象，我們可以在后臺與服務器進行數據交換，實現動態更新網頁內容的功能。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理響應數據
}
};
xhr.send();

在這段代碼中，首先創建了一個XMLHttpRequest對象，并通過open()方法指定了請求的類型（這里是GET）和URL。其中第三個參數為true，表示異步請求。接著，我們通過onreadystatechange屬性和一個匿名函數來監聽請求狀態的變化。當請求狀態變為4（表示已完成）且響應狀態為200（表示成功）時，我們就可以通過responseText屬性獲取到從服務器返回的響應數據，并進行處理。

除了使用GET請求之外，我們還可以使用POST請求向服務器發送數據。當需要將用戶輸入的數據發送給服務器進行處理時，POST請求會更適合。

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/submit", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 處理響應數據
}
};
var data = {
name: "張三",
age: 25
};
xhr.send(JSON.stringify(data));

在這個例子中，我們先使用open()方法指定了POST請求的類型和URL，并通過setRequestHeader()方法設置了請求頭的Content-Type為"application/json"。接著，我們將要發送給服務器的數據以JSON格式進行了編碼，并通過send()方法發送給服務器。

在AJAX與服務器交互的過程中，還可以使用回調函數來處理異步請求的返回結果。例如，我們可以在服務器返回數據后執行一個回調函數，以便更新網頁內容。

function updateContent(data) {
// 更新網頁內容
}
function fetchData(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
callback(response);
}
};
xhr.send();
}
fetchData("http://example.com/data", updateContent);

在這個例子中，我們定義了一個帶有兩個參數的回調函數updateContent和fetchData。fetchData函數用于向服務器發送請求并在獲取到響應后執行回調函數。當服務器返回數據時，我們將響應數據通過JSON.parse()方法進行解析，并將解析后的數據作為參數傳遞給回調函數updateContent，以便更新網頁內容。

總之，AJAX是一種強大的技術，可以使網頁與服務器之間實現實時的數據交互。我們可以通過XMLHttpRequest對象發送HTTP請求，并通過回調函數處理服務器的響應。這樣可以減少頁面的加載時間，提高用戶體驗，并減輕服務器的負載壓力。