Redirect after POST using the Location header with jQuery

Question

I want to redirect to the target using the Location header with jQuery 1.7.

My code looks like this

$('#creationLink').click(function(){
  $.ajax({
    type: 'POST',
    url: '/',
    success: function(data, textStatus, xhr) {
      window.location = xhr.getResponseHeader("Location");
    }
  })
});

... but it does not work. xhr.getResponseHeader("Location") is null.

HTTP headers:

POST / HTTP/1.1
Host: localhost:9000
X-Requested-With: XMLHttpRequest
Content-Length: 0

HTTP/1.1 302 Found
Content-Type: text/plain; charset=utf-8
Location: http://localhost:9000/vIRdD0PdWp4/bearbeiten
Content-Length: 0

How can I redirect using the location header?

Solution

AFAIK, browsers are supposed to, during an XHR, transparently follow the redirect in the response header. That is, the XHR will actually look at the response, see the Location header, and proceed to magically run a second request for that URI. Only when it has the result of that will it give you anything at all, and what it gives you is the result of the second request.

See this stackoverflow answer!

So, if you need a redirect feature, you'll have to make the thing you request return the target URI in some other way, e.g. as a JSON response.

See this stackoverflow solution!

PS. reference: http://www.w3.org/TR/XMLHttpRequest/#infrastructure-for-the-send-method

Comments

[Zuul]

@Jan Krüger, I've been reading about this and found an answer an a solution for this problem. Since there was no need to post a new answer here with the same content as yours, I've placed the links to complement your information!