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

Answer 1

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

Answer 2

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