Is it possible to get page redirect information via Ajax?

Question

Without ajax, if we load http://example.com/1 and if it redirects to http://example.com/2 then the browser gets appropriate headers and the Browser URL get's updated. Is there a way to get this information via jQuery Ajax?

For example, I am requesting http://api.example.com via Ajax. In PHP, this page is redirected to http://api2.example.com. Is it possible to know this thing?

Use: I have a navbar which has links. All pages are loaded into the container via AJAX and I push the url on Browser Bar using HTML5 history as per the link.

However, if the page gets redirected, the page would have a new link right? I would like to change that in the Browser bar too. I would like to know where the Ajax URL is redirected in case it is redirected.

Why this is important? My links handle form data, requests and various authentications. For example, if I request, https://oauth.example.org?code=56hycf86 it either redirects to success or failure page. My Ajax get the right html content but the URL browser bar still has the URL with same Auth ID which, if reloaded, produces error. There are other security issues too.

I do not know if I explained things right, but thanks for your help.

Answer 1

Well, unfortunately, ajax always follows redirects. However, there is a feature that is not supported in all browsers, you can access the responseURL property of the XMLHttpRequest object.

You can try it in the below code snippet. the redirect button sends ajax request to a URL that replies with 1 redirect (it also works if there are multiple redirects). The no redirect button sends ajax request to a URL with no redirects.

As far as I know this method is not supported in IE 11 and older versions of chrome/firefox/opera browsers.

document.getElementById("no-redirect").addEventListener("click", function() {
  testRedirect("https://httpbin.org/get");
});

document.getElementById("redirect").addEventListener("click", function() {
  testRedirect("https://httpbin.org/redirect/1");
});


function testRedirect(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(e) {
    if (xhr.status == 200 && xhr.readyState == 4) {
      if (url != xhr.responseURL) {
        alert("redirect detected to: " + xhr.responseURL)
      } else {
        alert("no redirect detected")

      }
    }
  }
  xhr.open("GET", url, true);
  xhr.send();
}

<button id="redirect">
  Redirect
</button>
<button id="no-redirect">
  No Redirect
</button>

Answer 2

This might not be exactly what you're looking for, but maybe it will help you get a similar effect.

If you are in control of what the page http://api.example.com does, you could change the way it reacts when it gets a call via AJAX.

You could include a variable in your AJAX call, marking it as such a call, and if this variable is present, not redirect to an other page, but include the URL it would redirect to, in the answer.

The data returned in the AJAx call could be a hash, in which one key represents the redirect url.

data = {status => 1, redirect => 'http://ap2.example.com', …}

(Sorry if that is not a valid PHP hash)