Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術。在Ajax中，beforeSend是一個常用的回調函數，可以在發送Ajax請求之前對請求進行一些操作。xhr（XMLHttpRequest）對象是在Ajax中用于發送和接收數據的關鍵對象。本文將詳細介紹beforeSend和xhr對象，并通過舉例說明它們的常見用法。

beforeSend回調函數

beforeSend回調函數是在發送Ajax請求之前執行的函數。它通常被用于在請求發送前進行一些操作，例如設置請求頭、添加加載效果、驗證輸入等。下面是一個使用beforeSend回調函數的例子：

$.ajax({
url: "example.com",
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Bearer token");
},
success: function(data) {
console.log(data);
}
});

在上面的例子中，beforeSend回調函數被用于設置請求頭。在發送請求之前，將Authorization頭設置為一個 JWT（JSON Web Token）。

xhr對象

xhr對象（XMLHttpRequest）是用于發送和接收數據的關鍵對象。它提供了一組方法和屬性，用于管理Ajax請求和處理響應。下面是一個使用xhr對象的例子：

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

在上面的例子中，我們創建了一個新的xhr對象，并使用open方法指定請求類型和URL。我們還使用setRequestHeader方法設置請求頭為"Content-Type: application/json"，指定請求的數據格式為JSON。xhr對象的onreadystatechange屬性是一個事件處理函數，它在xhr對象狀態發生變化時被觸發。在該函數中，我們驗證了xhr對象的狀態和響應狀態碼，然后解析響應的文本數據。

使用beforeSend和xhr對象的綜合示例

現在，讓我們結合使用beforeSend回調函數和xhr對象，來展示一個更復雜的示例。在這個示例中，我們將通過Ajax發送一個POST請求，并在請求發送之前顯示一個加載動畫。

$.ajax({
url: "example.com",
type: "POST",
data: { username: "john", password: "pass123" },
beforeSend: function(xhr) {
// 顯示加載動畫
$(".loader").show();
},
success: function(data) {
console.log(data);
// 隱藏加載動畫
$(".loader").hide();
},
error: function(xhr) {
console.log(xhr.statusText);
// 隱藏加載動畫
$(".loader").hide();
}
});

在這個例子中，beforeSend回調函數被用于顯示加載動畫。在Ajax請求發送之前，通過選擇器找到一個名為"loader"的元素，并將其顯示出來。在success和error回調函數中，我們分別打印響應數據或錯誤信息，并隱藏加載動畫。通過結合使用beforeSend和xhr對象，我們可以更好地控制和管理Ajax請求。

結論

本文介紹了Ajax中的beforeSend回調函數和xhr對象的用法。beforeSend回調函數可以在Ajax請求發送之前執行一些操作，xhr對象則用于發送和接收數據。通過舉例說明了它們的常見用法，我們可以更好地理解和應用這兩個概念，從而提升我們在Ajax開發中的能力。