How do I perform sequential ajax calls?

Question

I have a button button1 and once it is clicked it redirects to a url www.first.com . This url contains another url in its response www.second.com . I intercept the request with ajax call and instead of redirecting to www.first.com I redirect to www.second.com . The following code works perfectly fine, and does what I expect it to do:

document.getElementById("button1").addEventListener("click", function (e) {
  e.preventDefault();
  $.ajax({
    url: 'http://www.first.com',
    method: 'GET',
    crossDomain : true,
    success: function(response){
      //here I am redirected to www.second.com
      window.location.href = response;
     }
  });
});

I want to do another ajax request - the page www.second.com authomaticaly gets redirected to www.third.com . I dont want to do some simple string manipulation on the url (lets say I want to change it to www.third2.com ) and then to redirect directly to www.third2.com . How do I do that? I guess I need another ajax call but I dont know how to make it run sequentially after finishing the first one.

Posting what I have tried so far and what didnt work:

success: function(response){
     $.ajax({
        url: response,
        method: 'GET',
        crossDomain : true,
        xhrFields: {
          withCredentials: false
        },
        success: function(result2){
          //it does not redirect to `google.com`; it still redirects to `www.second.com`
          result2 = "https://www.google.com/";
          window.location.href = result2;
          alert("This alert does not show");
        }
      });
      //maybe I have to remove this line? 
      window.location.href = response;
     },

Answer 1

You can simply make another ajax request inside your first request callback, like this:

document.getElementById("button1").addEventListener("click", function (e) {
  e.preventDefault();
  $.ajax({
    url: 'http://www.first.com',
    method: 'GET',
    crossDomain : true,
    xhrFields: {
      withCredentials: false
    },
    success: function(response){
      $.ajax({
        url: response,
        method: 'GET',
        crossDomain: true,
        xhrFields: {
          withCredentials: false
        }
      },
      success: function(response2){
        window.location.href = response2;
      });
    }
  });
});

It's not pretty though, but you can get cleaner code using promises for instance.

Answer 2

To clarify, you aren't intercepting a redirect. You are making an outbound request on a button click. I only point this out so that we are speaking the same language. Because, once you do get your secondary URL, you ARE redirecting to that location.

So, your answer is dependent on what you're really trying to accomplish. If you simply want to take the returned URL and make another AJAX request to it (and either manipulate it, redirect to it, or both), just nest the secondary request within your success function.

However, if you want to redirect to this second location AND THEN make a subsequent request, this is more complicated. You will have to make sure that the page represented by the second URL has an on-load method that makes either another AJAX request or a page-redirect, whichever you are trying to accomplish. Once you set your window.location.href (after getting that second URL), the browser is going to attempt to redirect. Any on-page-unload events are going to be unreliable, browser-to-browser (in my experience).