jQuery ajax 携带自定义请求头

一. headers对象

• 对象的键值对 对应着 请求头的key和value

$.ajax({
    url: "请求路径",
    method: '请求方式',
    // ⏹通过headers对象设置请求头👈👈👈
    headers: {
        'custom-age': 18,
        'custom-name': 'fengyehong'
    },
    success(result, status, xhr) {
        console.log(result);
    }
});

二. beforeSend(xhr)方法

• 在ajax请求发送之前执行
• jQuery底层本质上是对XMLHttpRequest对象的封装，beforeSend方法相当于直接操作底层的XMLHttpRequest对象完成请求头的设置。

$.ajax({
    url: "请求路径",
    method: '请求方式',
    // ⏹通过beforeSend方法中的xhr对象设置请求头👈👈👈
    beforeSend(xhr) {
        // 设置请求头
        xhr.setRequestHeader('custom-name', 'jmw');
    },
    success(result, status, xhr) {
        console.log(result);
    }
});

三. ajaxSend()方法

• 这是一个全局的方法，每次ajax请求发送前都会执行
• 必须绑定到document上

// ⏹通过 .ajaxSend()中的xhr对象来设置请求头👈👈👈
$(document).ajaxSend(function(event, xhr, options) {
     // 👉👉👉应用: 每发送一次Ajax请求,都设置请求头
     xhr.setRequestHeader('custom-age', '20');
 });
 
$.ajax({
    url: "请求路径",
    method: '请求方式',
    // 关闭全局方法, 如果开启了此设置 $(document).ajaxSend() 就会失效
    // global: false
    success(result, status, xhr) {
        console.log(result);
    }
});

四. 优先顺

• 若同时使用headers，beforeSend(xhr)，$(document).ajaxSend() 这3中方式设置请求头，
  则优先顺为

  headers {} < beforeSend(xhr) {} < $(document).ajaxSend()

• 若上述3种方式设置时，请求头重名的话，则优先顺高的会覆盖优先顺低的