数据表根据请求传递标头 - Javascript

在前端开发中，我们需要从服务器获取数据，这时候就需要通过 HTTP 请求来获取数据。请求时，我们可以在请求头中添加一些信息，如 token、Cookie 等，这些信息可以保证我们在后续请求中能够被识别。本文将讲解如何在请求中添加自定义请求头。

XMLHttpRequest

在 JavaScript 中，我们可以使用 XMLHttpRequest 对象来发送 Ajax 请求。其中，在 XMLHttpRequest 对象中，提供了 setRequestHeader 方法，该方法用于设置请求头。下面是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.setRequestHeader('Authorization', 'Bearer xxxxxx'); // 添加自定义请求头
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

如上代码所示，在 xhr 对象中，我们通过 setRequestHeader 方法来设置 Authorization 请求头，并将 Bearer xxxxxx 作为其值。代码中，我们使用 GET 方法请求 /data 接口。

Fetch

除了 XMLHttpRequest 发送 Ajax 请求外，在现代浏览器中我们还可以使用 Fetch API 发送请求。和 XMLHttpRequest 类似，Fetch API 也提供了 Headers 对象用于设置请求头。下面是一个示例：

const headers = new Headers();
headers.append('Authorization', 'Bearer xxxxxx'); // 添加自定义请求头
fetch('/data', {
  method: 'GET',
  headers: headers
}).then(function(response) {
  return response.text();
}).then(function(text) {
  console.log(text);
});

如上代码所示，我们可以通过 Headers 对象来创建请求头，然后将其传入到 fetch 方法中。代码中，我们使用 GET 方法请求 /data 接口。

jQuery

如果不想手动调用 Ajax 请求，我们可以使用 jQuery 封装的 Ajax 请求。在 jQuery 中，我们可以使用 $.ajax 来发送请求，并通过 headers 选项来设置请求头。下面是一个示例：

$.ajax({
  url: '/data',
  method: 'GET',
  headers: {
    'Authorization': 'Bearer xxxxx' // 添加自定义请求头
  },
  success: function(response) {
    console.log(response);
  }
});

如上代码中，我们使用 $ 对象来调用 ajax 方法，然后通过 headers 选项来设置请求头。其他配置和使用方法和 XMLHttpRequest 相似。

总结

在 JavaScript 中，我们可以通过 XMLHttpRequest、Fetch 和 jQuery 发送 Ajax 请求。在请求中添加自定义请求头可以保证我们在后续请求中能够被识别。在设置请求头时，需要注意请求头中的键值对是否正确，否则请求可能会失败。