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代码。通过合理使用这个函数，我们可以更方便地进行异步通信，实现实时更新网页内容的效果。