在 ajax 中传递标头 - Javascript

在ajax请求中，我们通常需要在请求头(header)中传递一些信息，比如token等。本文将介绍如何在ajax中传递标头。

XMLHttpRequest对象

XMLHttpRequest(XHR)是ajax的核心对象，用于与服务器进行交互。我们可以创建一个XHR对象并向服务器发送请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/example/url', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

设置请求头

在XHR对象上设置请求头，我们可以使用setRequestHeader()方法。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/example/url', true);

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

setRequestHeader()方法接受两个参数，第一个参数是请求头名称，第二个参数是请求头的值。

获取响应头

在XHR对象上获取响应头，我们可以使用getResponseHeader()方法。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/example/url', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    var contentType = xhr.getResponseHeader('Content-Type');
    console.log(contentType);
  }
};

xhr.send();

getResponseHeader()方法接受一个参数，即请求头名称，返回对应的请求头的值。

获取所有响应头

如果我们想获取所有的响应头，我们可以使用getAllResponseHeaders()方法。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/example/url', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    var headers = xhr.getAllResponseHeaders();
    console.log(headers);
  }
};

xhr.send();

getAllResponseHeaders()方法没有参数，返回所有响应头的文本形式。

封装Ajax请求对象

为了更加方便地使用XHR对象，我们可以封装一个函数。

function ajax(method, url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function () {
    if (xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}

封装的函数接受四个参数，分别是请求方法、请求url、请求数据、回调函数。我们可以像下面这样调用。

ajax('POST', '/example/url', '{"foo": "bar"}', function (response) {
  console.log(response);
});