封裝Ajax是一種提高開發(fā)效率和代碼可復(fù)用性的重要手段。Ajax（Asynchronous JavaScript and XML）是一種在Web應(yīng)用中發(fā)送異步請(qǐng)求和更新部分頁面內(nèi)容的技術(shù)。傳統(tǒng)的方式是通過XMLHttpRequest對(duì)象來實(shí)現(xiàn)，但是操作繁瑣且容易出錯(cuò)。因此，將這些繁瑣操作封裝到一個(gè)通用的函數(shù)或類中，可以簡化開發(fā)流程，并且提高代碼的可讀性和可維護(hù)性。

假設(shè)我們有一個(gè)需求：點(diǎn)擊一個(gè)按鈕后，頁面中的一個(gè)文本框需要顯示從服務(wù)器上獲取的數(shù)據(jù)。傳統(tǒng)的方式是新建一個(gè)XMLHttpRequest對(duì)象，設(shè)置請(qǐng)求的方法、URL和回調(diào)函數(shù)等，然后發(fā)送請(qǐng)求。這個(gè)過程需要寫大約400行代碼。而通過封裝Ajax，我們只需要調(diào)用一個(gè)函數(shù)，即可完成同樣的操作。

function ajax(url, method, data, success, failure) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(xhr.responseText);
} else {
failure(xhr.status);
}
}
}
xhr.send(data);
}
// 調(diào)用示例
ajax('http://example.com/api', 'GET', null, function(response) {
document.getElementById('textbox').value = response;
}, function(error) {
console.log('請(qǐng)求失敗：' + error);
});

封裝Ajax的代碼示例中，我們定義了一個(gè)名為ajax的函數(shù)，它接受5個(gè)參數(shù)：url（請(qǐng)求的URL地址）、method（請(qǐng)求的方法，如GET、POST等）、data（請(qǐng)求的數(shù)據(jù)，如JSON對(duì)象）、success（請(qǐng)求成功的回調(diào)函數(shù)）和failure（請(qǐng)求失敗的回調(diào)函數(shù)）。在函數(shù)體內(nèi)部，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并通過open方法設(shè)置請(qǐng)求的方法和URL。接著，我們給xhr對(duì)象的onreadystatechange事件添加了一個(gè)匿名函數(shù)作為處理函數(shù)，在其中判斷響應(yīng)的狀態(tài)碼。如果狀態(tài)碼為4，表示請(qǐng)求完成；如果狀態(tài)碼為200，表示請(qǐng)求成功；否則，表示請(qǐng)求失敗。最后，我們通過send方法發(fā)送請(qǐng)求。

當(dāng)我們需要發(fā)起一個(gè)GET請(qǐng)求時(shí)，只需要調(diào)用ajax函數(shù)，并傳遞相應(yīng)的參數(shù)即可。例如，在示例中，我們只需要調(diào)用ajax('http://example.com/api', 'GET', null, ...)，就可以將服務(wù)器返回的數(shù)據(jù)填充到指定的文本框中。如果需要發(fā)起POST請(qǐng)求或提交表單數(shù)據(jù)，只需要修改相應(yīng)的參數(shù)即可。

通過封裝Ajax，我們可以將常用的操作封裝為一個(gè)通用函數(shù)，減少重復(fù)代碼的編寫。另外，由于該函數(shù)接受回調(diào)函數(shù)作為參數(shù)，可以將特定的邏輯和數(shù)據(jù)處理操作封裝到回調(diào)函數(shù)中，提高代碼的可復(fù)用性。此外，該函數(shù)還支持異步請(qǐng)求，能夠在后臺(tái)發(fā)送HTTP請(qǐng)求，不會(huì)阻塞用戶的操作。