AJAX（Asynchronous JavaScript and XML） 是一種在網頁中實現異步通信的技術。它可以在不刷新整個頁面的情況下更新部分網頁內容，提升用戶體驗。在 AJAX 請求中，可以使用 HTTP 頭（header）來傳遞和接收相關信息。本文將詳細介紹 AJAX 如何通過添加自定義的 header 來完成各種功能，并給出一些舉例以加深理解。

一種常見的使用 AJAX 傳遞頭部信息的場景是身份驗證。例如，當用戶登錄網站時，服務器會返回一個帶有唯一標識符的令牌（token）。通過將該令牌添加到 AJAX 請求的 header 中，可以在每次請求中驗證用戶的身份。下面是一個示例代碼：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理響應數據
}
};
xhr.send();

在這個例子中，通過調用 `setRequestHeader` 方法，我們在請求的 header 中添加了一個名為 `Authorization` 的自定義字段，并將用戶的令牌作為值傳遞。服務器在接收到該請求時，可以解析 header，驗證用戶的身份，并提供相應的數據。

另一個常見的應用是通過 header 傳遞 CSRF（Cross-Site Request Forgery）防護令牌。CSRF攻擊是一種通過利用用戶在其他網站上的身份驗證狀態來執行未授權操作的攻擊方式。為了防止這樣的攻擊，服務器會在每個用戶會話中生成一個唯一的令牌，并將其添加到每個 AJAX 請求的 header 中。下面是一個示例代碼：

function getCSRFToken() {
var cookies = document.cookie.split(';');
for (var i = 0; i< cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith('CSRF_TOKEN=')) {
return cookie.substring('CSRF_TOKEN='.length, cookie.length);
}
}
return null;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('X-CSRF-Token', getCSRFToken());
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理響應數據
}
};
xhr.send();

在這個例子中，我們通過調用 `setRequestHeader` 方法，在 header 中添加了一個名為 `X-CSRF-Token` 的字段，并將從 cookies 中獲取的 CSRF 令牌作為值傳遞。服務器在接收到該請求時，會檢查該令牌以確保請求的合法性。

除了身份驗證和 CSRF 防護令牌之外，AJAX 可以使用 header 進行更多自定義的功能，例如緩存控制、跨域請求等。通過合理使用 AJAX 的 header 功能，我們可以在網頁中實現更加豐富和高效的交互體驗。