快捷導(dǎo)航

js 使用ajax設(shè)置和獲取自定義header信息的方法小結(jié)

更新時(shí)間：2020年03月12日 12:07:21 作者：willingtolove

這篇文章主要介紹了js 使用ajax設(shè)置和獲取自定義header信息的方法,結(jié)合實(shí)例形式總結(jié)分析了js 使用ajax自定義設(shè)置和獲取header響應(yīng)信息相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了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 獲取請(qǐng)求返回的response的header信息

ajax請(qǐng)求完成，會(huì)返回xhr（XMLHTTPRequest）對(duì)象，這里面會(huì)包含返回的頭信息，可以通過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ù)器端時(shí)間
    
    //獲取服務(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 跨域請(qǐng)求的情況下獲取自定義的header信息

JS AJAX 跨域請(qǐng)求的時(shí)候是不能設(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)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: