javascript - Get AJAX data from server before document ready (jQuery) -

i want take data server , write global array in javascript. in document ready want use array create new elements (options). should have global array data, because after first load client can modify user interface using data.

$(document).ready(function () {     useajaxqueryforfillglobalarray();     makinginterfaceusingglobalarray();        }); 

but have strange behavior, when debug page, can see method makinginterfaceusingglobalarray working first, , after data via ajax method useajaxqueryforfillglobalarray , don't have new interface(html options) loaded data.

if this:

useajaxqueryforfillglobalarray(); $(document).ready(function () {          makinginterfaceusingglobalarray();        }); 

then in firefox working fine, in web-browsers incorrect in first load (for example go page link). if refreshing f5, have correct user interface loaded via ajax global js array.

how fix it? maybe using totally incorrect way?

added after comments:

this ajax function:

function useajaxqueryforfillglobalarray(){     var curuserid = '<%= master.currentuserdetails.id %>';     var curlocale = '<%= master.currentlocale %>';     $.ajax({         type: "post",         url: "/segment.aspx/getarrayforcf",         data: '{"userid":"' + curuserid + '","curlocale":"' + curlocale + '"}',         contenttype: "application/json; charset=utf-8",         datatype: "json",         success: function (msg) {             //here doing parse string server , fill arrays.              }     }); } 

i think problem don't know when first function returns, since it'a asynchronous. should use array in callback only

function useajaxqueryforfillglobalarray() {     // make call     $.post(url, data, function() {         // let's sure dom ready         $(document).ready(function () {                 // use array             makinginterfaceusingglobalarray();               }     } }();// invoke function