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

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

UPDATE 2018 FOR JQUERY 3 AND LATER

I know this is an old question but hopefully this solution will help those who couldn't find a solution. 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'));
        });
    }