js中如何使用ajax設(shè)置和獲取自定義header信息

這篇文章將為大家詳細(xì)講解有關(guān)js中如何使用ajax設(shè)置和獲取自定義header信息，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

1、js ajax 設(shè)置自定義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) {
    /* 
      獲取相關(guān)Http Response header
      getResponseHeader(key)：獲取指定頭信息
      getAllResponseHeaders()：獲取全部可默認(rèn)可獲取的頭信息
    */
    var date=xhr.getResponseHeader('Date');// 服務(wù)器端時間
    
    //獲取服務(wù)端自定義的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 跨域請求的時候是不能設(shè)置自定義的header信息的，但是是可以在response中獲取到服務(wù)端自定義的header信息，前提是服務(wù)端設(shè)置了Access-Control-Expose-Headers；

下面是 ASP.NET 的服務(wù)端示例：

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");
}

關(guān)于“js中如何使用ajax設(shè)置和獲取自定義header信息”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。