在前端開發中，經常會使用到AJAX（Asynchronous JavaScript And XML）技術來實現網頁的異步加載和數據交互。為了提高開發效率和代碼的可維護性，我們可以將一些常用的AJAX代碼封裝成函數，并在需要的時候進行調用。下面將介紹一些常見的可以套用的AJAX代碼。

1. 發送GET請求獲取數據：

function getData(url, successCallback, errorCallback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
successCallback(xhr.responseText);
} else {
errorCallback(xhr.status);
}
}
};
xhr.send();
}

使用該函數可以方便地發送GET請求獲取數據。例如，如果需要從服務器端獲取用戶列表：

getData('/api/users', function(data) {
var users = JSON.parse(data);
// 處理用戶列表
}, function(errorStatus) {
console.log('獲取用戶列表失敗，錯誤狀態碼：' + errorStatus);
});

2. 發送POST請求提交表單數據：

function postData(url, data, successCallback, errorCallback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
successCallback(xhr.responseText);
} else {
errorCallback(xhr.status);
}
}
};
xhr.send(JSON.stringify(data));
}

使用該函數可以方便地發送POST請求提交表單數據。例如，如果需要提交一個用戶注冊表單：

var formData = {
username: 'john',
password: '123456'
};
postData('/api/register', formData, function(response) {
console.log('用戶注冊成功');
}, function(errorStatus) {
console.log('用戶注冊失敗，錯誤狀態碼：' + errorStatus);
});

3. 使用Promise封裝AJAX請求：

function request(url, method, data) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
}
};
xhr.send(JSON.stringify(data));
});
}

使用Promise封裝AJAX請求可以更加方便地處理返回的數據。例如，如果需要獲取用戶信息并顯示在頁面上：

request('/api/userInfo', 'GET')
.then(function(response) {
var userInfo = JSON.parse(response);
document.getElementById('username').textContent = userInfo.username;
document.getElementById('email').textContent = userInfo.email;
})
.catch(function(errorStatus) {
console.log('獲取用戶信息失敗，錯誤狀態碼：' + errorStatus);
});

通過封裝這些常見的AJAX代碼，我們可以更好地重用、維護和擴展我們的前端代碼，提高開發效率和代碼質量。