AJAX (Asynchronous JavaScript and XML) 是一種用于創建快速動態網頁的技術。在Web開發中，經常需要與服務器進行異步通信，傳輸數據并更新頁面內容，而AJAX正是解決這類問題的理想選擇。然而，使用原生AJAX函數來進行通信可能比較繁瑣，因此我們可以封裝一個AJAX函數，更方便地使用它。

在開始之前，讓我們看一個簡單的例子，假設我們需要從服務器上獲取一段文字，并在網頁上顯示出來。

<div id="content"></div>
<script>
function getServerData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("content").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "server.php", true);
xhr.send();
}
getServerData();
</script>

上述示例中，我們使用原生AJAX函數發送一個GET請求到服務器的 "server.php" 文件，并在請求成功后將服務器返回的文本作為頁面內容顯示在 "content" 元素中。封裝后的AJAX函數可以簡化這個過程，使得代碼更加易讀和可維護。

下面是一個封裝后的AJAX函數的示例：

function ajax(url, method, data, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open(method, url, true);
if (method === "POST") {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
xhr.send(data);
}

使用封裝后的AJAX函數，前面的示例可以簡化為：

<div id="content"></div>
<script>
function getServerData() {
ajax("server.php", "GET", null, function(response) {
document.getElementById("content").innerHTML = response;
});
}
getServerData();
</script>

如上所示，封裝后的AJAX函數接受四個參數：URL、HTTP請求方法、數據和回調函數。在函數內部創建 XMLHttpRequest 對象，設置回調函數，然后使用 open() 方法打開一個與服務器的連接。根據請求方法的不同，設置請求頭信息。最后使用 send() 方法發送請求，并在回調函數中處理服務器返回的數據。通過回調函數，我們可以在請求成功后執行自定義的操作，比如更新頁面內容。

總結來說，封裝AJAX函數能夠使得代碼更加簡潔易讀，避免重復書寫繁瑣的原生AJAX代碼。通過合理使用這個函數，我們可以更方便地進行異步通信，實現實時更新網頁內容的效果。