如何使用js或jQuery向ajax请求添加自定义HTTP标头？

在 JavaScript 或 jQuery 中，可以通过设置 XMLHttpRequest 对象的 setRequestHeader 方法或者使用 jQuery 的 ajax 方法来向 AJAX 请求添加自定义 HTTP 标头。以下是两种方法的详细说明：

1. 使用 JavaScript 的 XMLHttpRequest

如果使用原生 JavaScript 创建 AJAX 请求，可以使用 XMLHttpRequest 对象，并通过 setRequestHeader 方法添加自定义 HTTP 标头。

示例代码

javascript
复制代码
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求类型和 URL
xhr.open('GET', 'https://api.example.com/data', true);

// 添加自定义 HTTP 标头
xhr.setRequestHeader('Authorization', 'Bearer YOUR_ACCESS_TOKEN');
xhr.setRequestHeader('Custom-Header', 'CustomHeaderValue');

// 定义请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功
        console.log(xhr.responseText);
    } else {
        // 请求失败
        console.error('Request failed with status:', xhr.status);
    }
};

// 发送请求
xhr.send();

2. 使用 jQuery 的 $.ajax 方法

如果使用 jQuery，可以通过 $.ajax 方法的 beforeSend 回调函数来设置自定义 HTTP 标头。

示例代码

javascript
复制代码
$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    beforeSend: function(xhr) {
        // 添加自定义 HTTP 标头
        xhr.setRequestHeader('Authorization', 'Bearer YOUR_ACCESS_TOKEN');
        xhr.setRequestHeader('Custom-Header', 'CustomHeaderValue');
    },
    success: function(data) {
        // 请求成功
        console.log(data);
    },
    error: function(xhr, status, error) {
        // 请求失败
        console.error('Request failed:', status, error);
    }
});

详细说明

• 原生 JavaScript (XMLHttpRequest):

  • xhr.open(method, url, async): 初始化请求。method 是 HTTP 方法（如 GET 或 POST），url 是请求的 URL，async 表示请求是否异步（true 表示异步）。
  • xhr.setRequestHeader(header, value): 设置自定义的 HTTP 标头。
  • xhr.onload: 请求成功时的回调函数。
  • xhr.send(): 发送请求。

• jQuery ($.ajax):

  • url: 请求的 URL。
  • type: HTTP 方法（如 GET、POST）。
  • beforeSend: 在请求发送之前执行的回调函数，可以用来设置自定义标头。
  • success: 请求成功时的回调函数。
  • error: 请求失败时的回调函数。

总结

在 JavaScript 中，使用 XMLHttpRequest 的 setRequestHeader 方法或 jQuery 的 $.ajax 方法中的 beforeSend 回调函数，可以方便地向 AJAX 请求中添加自定义 HTTP 标头。根据实际需求选择合适的方法。

关键字

JavaScript, jQuery, XMLHttpRequest, setRequestHeader, $.ajax, 自定义 HTTP 标头, beforeSend, AJAX 请求