52

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');

2 Answers 2

96

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"));
}
3
  • 2
    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
    – maxkuku
    Commented Mar 18, 2021 at 11:43
  • Same as above comment, doesn't work, only content-type and content length is available Commented Feb 14, 2023 at 21:05
  • Using PHP you can create your response header like so header('HeaderNameHere: HeaderValueHere'); Commented Jul 25 at 15:57
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'));
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.