在前端開(kāi)發(fā)中，經(jīng)常會(huì)使用到AJAX（Asynchronous JavaScript And XML）技術(shù)來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的異步加載和數(shù)據(jù)交互。為了提高開(kāi)發(fā)效率和代碼的可維護(hù)性，我們可以將一些常用的AJAX代碼封裝成函數(shù)，并在需要的時(shí)候進(jìn)行調(diào)用。下面將介紹一些常見(jiàn)的可以套用的AJAX代碼。

1. 發(fā)送GET請(qǐng)求獲取數(shù)據(jù)：

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();
}

使用該函數(shù)可以方便地發(fā)送GET請(qǐng)求獲取數(shù)據(jù)。例如，如果需要從服務(wù)器端獲取用戶列表：

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

2. 發(fā)送POST請(qǐng)求提交表單數(shù)據(jù)：

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));
}

使用該函數(shù)可以方便地發(fā)送POST請(qǐng)求提交表單數(shù)據(jù)。例如，如果需要提交一個(gè)用戶注冊(cè)表單：

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

3. 使用Promise封裝AJAX請(qǐng)求：

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請(qǐng)求可以更加方便地處理返回的數(shù)據(jù)。例如，如果需要獲取用戶信息并顯示在頁(yè)面上：

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('獲取用戶信息失敗，錯(cuò)誤狀態(tài)碼：' + errorStatus);
});

通過(guò)封裝這些常見(jiàn)的AJAX代碼，我們可以更好地重用、維護(hù)和擴(kuò)展我們的前端代碼，提高開(kāi)發(fā)效率和代碼質(zhì)量。