$(document).ready(function () {

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

 fetchloggeInUser();

});

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

  //set value of global variable decorateDeferred so

  // that it can be use as a reference

  $.pageDecorate.decorateDeferred = decorateDeferred;


  },

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

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

   });

  }

 });

}