jQuery - get AJAX response headers

Question

How do we get access to the response headers when we fire an ajax request using jQuery? I tried with the below code as per the suggestions given in some sites. But xhr object is coming as null. I see an xhr object in this context. But it doesn't have methods to access response headers.

function SampleMethod() {
  var savedThis = this;
  this.invokeProcedure = function(procedurePath) {
    $.ajax({
      type: "GET",
      url: procedurePath,
      dataType: "json",
      success: function(data,status,xhr) savedThis.resultSetHandler(data,status,xhr);}
    });
  }

  this.resultSetHandler=function(data,status,xhrObj){
    //Handle the result
  }

  this.errorHandler = function(args) {
    //Handle the result
  }

}

var sampleObj = new SampleMethod();
sampleObj.invokeProcedure('url');

odupont · Accepted Answer · 2012-07-12 20:16:47Z

97

For backward compatibility with XMLHttpRequest, a jqXHR object will expose the following properties and methods: getAllResponseHeaders() and getResponseHeader(). From the $.ajax() doc : http://api.jquery.com/jQuery.ajax/

For jQuery > 1.3

success: function(res, status, xhr) { 
  alert(xhr.getResponseHeader("myHeader"));
}

answered Jul 12, 2012 at 20:16

odupont

1,98613 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maxkuku Over a year ago

getAllResponseHeaders() gives only content-length: 0 content-type: text/html; charset=UTF-8 but in Chrome Network I see Access-Control-Allow-Credentials: fa... ... Access-Control-Allow-Origin: sho... Access-Control-Max-Age: 1728... Connection: keep-alive Content-Length: 0 Content-Security-Policy: frame-ancestors 'none' Content-Type: text/html; charset=UT Refresh: 0; url=sec... Server: nginx/1.1... Set-Cookie: lang=ru; ... fnd more. I need Refresh but can't get it

Illegal Operator Over a year ago

Same as above comment, doesn't work, only content-type and content length is available

William Worley Over a year ago

Using PHP you can create your response header like so header('HeaderNameHere: HeaderValueHere');

Dharman · Accepted Answer · 2021-05-18 20:49:33Z

4

FOR JQUERY 3 AND LATER

Here is the solution that worked for me:

//I only created this function as I am making many ajax calls with different urls and appending the result to different divs
function makeAjaxCall(requestType, urlTo, resultAreaId){
  var jqxhr = $.ajax({
    type: requestType,
    url: urlTo
  });

  //this section is executed when the server responds with no error 
  jqxhr.done(function(){
  });

  //this section is executed when the server responds with error
  jqxhr.fail(function(){
  });

  //this section is always executed
  jqxhr.always(function(){
    //here is how to access the response header
    console.log("getting header " + jqxhr.getResponseHeader('testHeader'));
  });
}

edited May 18, 2021 at 20:49

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 20, 2018 at 11:22

sticky_elbows

1,5222 gold badges18 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery - get AJAX response headers

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related