Call ajax after completion of another ajax ,Wait for ajax to return.

Lets suppose you are trying to set loggedIn username to the header of your web page and you have 2 ajax which get fired

1st Ajax : Which is decorating the header

2nd Ajax : Which gets the username

So if 2nd AJAX become first in the race then username is not visible to you as 1st ajax is responsible for decorating the header and if there is no header there is no place where you can set header.

so to be very sure that our username is visible on the screen, we should wait for the header(1st ajax)to complete

document ready function:

$(document).ready(function () {

 //calling this method to get the fetch logged in user

 fetchloggeInUser();

});

1st Ajax request : run in parallel with 2nd ajax 

this is building our header part

(function ($) {
  $.pageDecorate = {
  //declare a global variable so that it can be used.
  decorateDeferred : null,
  //set response of the ajax in a variable
  var decoratorDeferred = $.ajax({
    url : 'setHeader',
    type : 'get',
    data : decorateHeaderData,
    dataType : 'json',
    success : function (data) {
     //response of testAjax sets in decorateDeferred
     decorateDeferred = $.pageDecorate.testAjax();
    }
   });

Global declaration :

  //set value of global variable decorateDeferred so

  // that it can be use as a reference

  $.pageDecorate.decorateDeferred = decorateDeferred;


  },

Method to call :

 testAjax : function () {

  var navHtml = '<ul>';
  navHtml += '<div class="divHeader" title="login">';
  navHtml += '<div class="role">';
  navHtml += '</div>';
  navHtml += '</div>';
  navHtml += '</ul>';
  //append this to header of your page
  $('.header').append(navHtml);
 }
});

2nd Ajax:

fetchloggeInUser : function () {

 $.ajax({

  url : "loggedInUser",

  type : "POST",

  success : function (data) {

   //although this success block call when ajax get 

   //fired but this code runs when it get response
   //after the success response of $.pageDecorate.decorateDeferred 

   this below success get called

   $.pageDecorate.decorateDeferred.success(function () {

    $('.divHeader').find('.role').text(userName);

   });

  }

 });

}

That 's it you are done.