Как выполнить последовательные вызовы AJAX?

Question

У меня есть кнопка button1, и когда она нажата, она перенаправляет на URL www.first.com. Этот URL содержит другой URL в своем ответе www.second.com. Я перехватываю запрос вызовом ajax и вместо перенаправления на www.first.com перенаправляю на www.second.com. Следующий код прекрасно работает и выполняет то, что я от него ожидаю:

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

Я хочу сделать еще один запрос ajax - страница www.second.com автоматически перенаправляется на www.third.com. Я не хочу делать какие-либо простые манипуляции со строками в URL (допустим, я хочу изменить его на www.third2.com), а затем перенаправить непосредственно на www.third2.com. Как я могу это сделать? Думаю, мне нужен еще один вызов ajax, но я не знаю, как заставить его запускаться последовательно после завершения первого.

Публикация того, что я пробовал до сих пор и что не сработало:

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

Чтобы уточнить, вы не перехватываете перенаправление. Вы делаете исходящий запрос по нажатию кнопки. Я только указываю на это, чтобы мы говорили на одном языке. Потому что, как только вы получите свой дополнительный URL-адрес, вы будете перенаправлять на это место.

Итак, ваш ответ зависит от того, чего вы действительно пытаетесь достичь. Если вы просто хотите взять возвращенный URL-адрес и сделать к нему еще один AJAX-запрос (и либо манипулировать им, либо перенаправить на него, либо и тем, и другим), просто вложите дополнительный запрос в вашу success функцию.

Однако, если вы хотите перенаправить на это второе местоположение И затем сделать последующий запрос, это будет сложнее. Вам нужно убедиться, что страница, представленная вторым URL-адресом, имеет метод загрузки, который выполняет либо другой запрос AJAX, либо перенаправление страницы, в зависимости от того, что вы пытаетесь выполнить. Как только вы установите window.location.href (после получения этого второго URL), браузер попытается перенаправить. Любые события разгрузки на странице будут ненадежными, браузер-браузер (по моему опыту).

Answer 2

Вы можете просто сделать еще один ajax-запрос внутри вашего первого обратного вызова, например:

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

Хотя это и не красиво, но вы можете получить более чистый код, например, используя обещания .