本文將討論如何使用Ajax封裝公共方法函數。在Web開發中，我們經常需要使用Ajax實現異步請求。然而，每次都重復編寫相同的Ajax代碼是一種冗余和低效的做法。因此，封裝一個公共的Ajax方法函數可以大大簡化我們的開發工作，并提高代碼復用性。

首先，讓我們看一個簡單的例子來理解為什么我們需要封裝Ajax公共方法函數。假設我們的網頁上有一個按鈕，當用戶點擊該按鈕時，需要向服務器發送一個Ajax請求來獲取最新的數據并更新頁面。我們可以使用以下代碼來實現：

function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 更新頁面邏輯
}
};
xhr.send();
}
document.getElementById('btn').addEventListener('click', getData);

然而，如果我們的頁面中還有其他按鈕需要發送類似的Ajax請求，我們將不得不重復編寫相同的代碼。這不僅是一種冗余的做法，而且還會增加代碼維護的復雜性。

為了解決這個問題，我們可以封裝一個公共的Ajax方法函數，使其可以在任何地方重復使用。以下是一個例子：

function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.method, options.url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
options.success(JSON.parse(xhr.responseText));
} else {
options.error(xhr.status);
}
}
};
xhr.send();
}
document.getElementById('btn').addEventListener('click', function() {
ajax({
method: 'GET',
url: 'https://api.example.com/data',
success: function(response) {
// 更新頁面邏輯
},
error: function(status) {
console.log('請求失敗，狀態碼：' + status);
}
});
});

上述代碼中，我們定義了一個名為ajax的函數，接受一個包含請求相關信息的options對象作為參數。這樣，我們只需要傳遞不同的options對象來發送不同的Ajax請求，而無需重復編寫相同的代碼。

除了可以發送GET請求，我們還可以擴展ajax函數以支持其他類型的請求方法，例如POST和PUT。以下是一個例子：

function ajax(options) {
// ...其他代碼
if (options.method === 'POST' || options.method === 'PUT') {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(options.data));
} else {
xhr.send();
}
// ...其他代碼
}
ajax({
method: 'POST',
url: 'https://api.example.com/data',
data: {
name: 'John Doe',
age: 25
},
success: function(response) {
// 更新頁面邏輯
},
error: function(status) {
console.log('請求失敗，狀態碼：' + status);
}
});

在這個例子中，我們通過options對象傳遞了一個名為data的參數，用于發送POST請求時的請求體。同時，我們設置了請求頭的Content-type為application/json，確保服務器能正確解析請求體。

通過將Ajax代碼封裝為一個公共方法函數，我們可以大大提高代碼的復用性，減少代碼重復。我們只需簡單調用該函數，并傳遞不同的參數來發送不同的請求，而無需重復編寫相同的Ajax代碼。這不僅簡化了開發工作，還提高了代碼的可維護性。