js 使用ajax设置和获取自定义header信息的方法小结

 更新时间:2020年03月12日 12:07:21   作者:willingtolove  
这篇文章主要介绍了js 使用ajax设置和获取自定义header信息的方法,结合实例形式总结分析了js 使用ajax自定义设置和获取header响应信息相关操作技巧与使用注意事项,需要的朋友可以参考下

本文实例讲述了js 使用ajax设置和获取自定义header信息的方法。分享给大家供大家参考,具体如下:

1、js ajax 设置自定义header

1.1 方法一:

$.ajax({
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  beforeSend: function (request) {
    request.setRequestHeader("token1", "Chenxizhang");
  },
  success: function (data) {
    //your code
  }
});

1.2 方法二:

$.ajax({
  headers: {
    "testheader": "test"
  },
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  success: function (data) {
    //your code
  }
});

2、js ajax 获取请求返回的response的header信息

ajax请求完成,会返回xhr(XMLHTTPRequest)对象,这里面会包含返回的头信息,可以通过getResponseHeader(key)和getAllResponseHeaders()获取header信息;

$.ajax({
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  success: function (data) {
    //your code
  },
  complete: function (xhr, data) {
    /* 
      获取相关Http Response header
      getResponseHeader(key):获取指定头信息
      getAllResponseHeaders():获取全部可默认可获取的头信息
    */
    var date=xhr.getResponseHeader('Date');// 服务器端时间
    
    //获取服务端自定义的header信息
    var stoken = xhr.getResponseHeader('servertoken');
    
    var list = xhr.getAllResponseHeaders();
    console.log(list);
    /*
    date: Fri, 12 Jul 2019 12:41:00 GMT
    content-encoding: gzip
    server: Microsoft-IIS/10.0
    x-aspnet-version: 4.0.30319
    x-powered-by: ASP.NET
    vary: Accept-Encoding
    content-type: text/plain; charset=utf-8
    servertoken: test1
    cache-control: private
    content-length: 129
    */
    
  }
});

3、js ajax 跨域请求的情况下获取自定义的header信息

JS AJAX 跨域请求的时候是不能设置自定义的header信息的,但是是可以在response中获取到服务端自定义的header信息,前提是服务端设置了Access-Control-Expose-Headers;

下面是 ASP.NET 的服务端示例:

public void ProcessRequest(HttpContext context)
{
  context.Response.AddHeader("Access-Control-Allow-Origin", "*");
  context.Response.AddHeader("Access-Control-Allow-Headers", "*");
  context.Response.AddHeader("Access-Control-Allow-Methods", "*");
  //自定义header信息
  context.Response.AddHeader("servertoken", "test");
  context.Response.AddHeader("Access-Control-Expose-Headers", "servertoken");
  context.Response.ContentType = "text/plain";
  context.Response.Write("Hello World");
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • jQuery获取随机颜色的实例代码

    jQuery获取随机颜色的实例代码

    这篇文章主要介绍了jQuery获取随机颜色的实例代码,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编来学习吧
    2018-05-05
  • js实现随机点名小功能

    js实现随机点名小功能

    这篇文章主要为大家详细介绍了js实现随机点名小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript中new操作符的原理示例详解

    JavaScript中new操作符的原理示例详解

    javascript中的new是一个语法糖,new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,这篇文章主要给大家介绍了关于JavaScript中new操作符原理的相关资料,需要的朋友可以参考下
    2021-07-07
  • 小程序开发实战指南之封装自定义弹窗组件

    小程序开发实战指南之封装自定义弹窗组件

    最近在做公司的小程序项目,发现设计上有很多不统一,代码上有很多冗余,下面这篇文章主要给大家介绍了关于小程序开发实战指南之封装自定义弹窗组件的相关资料,需要的朋友可以参考下
    2022-11-11
  • js正则test匹配的踩坑及解决

    js正则test匹配的踩坑及解决

    这篇文章主要为大家介绍了正则test匹配的踩坑示例讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • three.js利用gpu选取物体并计算交点位置的方法示例

    three.js利用gpu选取物体并计算交点位置的方法示例

    这篇文章主要给大家介绍了关于three.js利用gpu选取物体并计算交点位置的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • Bootstrap基础学习

    Bootstrap基础学习

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了流行的浏览器技术,给web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
    2015-06-06
  • css客齐集社区头像显示效果

    css客齐集社区头像显示效果

    这个例子,首先是把SPAN里的内容用display:none;干掉,就是不显示; 然后在A:HOVER时,再把SPAN里的内容display:block; 就是显示出来;同时定义一下SPAN的位置; 其它代码很简单,但有人说看不太懂;我就简单说一下;
    2008-06-06
  • js控制li的隐藏和显示实例代码

    js控制li的隐藏和显示实例代码

    下面小编就为大家带来一篇js控制li的隐藏和显示实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 用js删除tbody的代码

    用js删除tbody的代码

    删除表格的第一个tbody
    2008-11-11

最新评论