jQuery ajax 携带自定义请求头

最新推荐文章于 2024-12-05 06:46:44 发布

fengyehongWorld

最新推荐文章于 2024-12-05 06:46:44 发布

阅读量7.4k

点赞数 3

分类专栏： # JS 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/feyehong/article/details/128751406

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

文章介绍了在JavaScript中使用jQuery的$.ajax方法设置请求头的三种方式：通过headers对象、beforeSend方法和ajaxSend全局方法。并说明了它们的优先级顺序，当设置的请求头重名时，较高优先级的会覆盖较低优先级的。

摘要由CSDN通过智能技术生成

一. 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种方式设置时，请求头重名的话，则优先顺高的会覆盖优先顺低的