inline ajax and document.ready doubt

I am making an ajax call inline as below and storing the response in global variable and accessing later for some performance reasons.

<script type="text/javascript"> 
   var gblAjaxResponse;
   $.ajax({
      url: '/test.aspx',
      success: function(data) {
       gblAjaxResponse=data;
      }      
    });                                     
</script>

Now i want to use this global variable in document.ready of an ajax file. Once the DOM is ready , i have to use this data on some divs on that page.

$(document).ready(function() {

 alert(gblAjaxResponse);   

});

I have the following questions now.

1) As ajax is asyncrnous call is it sure that i always get the response into that global variable by the time i ready document.ready. 2) Are there any chances that my document.ready code gets executed below 开发者_JAVA百科the ajax success handler returns 3) I don't want to use asyn false option as it can hang. 4) Is there anyway to check if success is completed and returned data.

any suggestions will be appreciated

---

1) As ajax is asyncrnous call is it sure that i always get the response into that global variable by the time i ready document.ready.

No, document.ready can be executed before.

2) Are there any chances that my document.ready code gets executed below the ajax success handler returns

Yes

4) Is there anyway to check if success is completed and returned data.

Basing on kennis' answer, you could do this:

<script type="text/javascript">
   var gblAjaxResponse;
   $.ajax({
       url: '/test.aspx',
       success: function(data) {
          gblAjaxResponse = data;
          myCallbackFunction();
      }
   });

   function myCallbackFunction(){
       alert(gblAjaxResponse);
   }                              
</script>

If you need to use gblAjaxResponse in document.ready, you could do this too:

<script type="text/javascript">
   var gblAjaxResponse = null;
   $.ajax({
       url: '/test.aspx',
       success: function(data) {
          gblAjaxResponse = data;
      }
   });
   $(document).ready(function(){
       //Wait until gblAjaxResponse has value:
       var intervalId = setInterval(function(){
           if(gblAjaxResponse !== null){
               clearInterval(intervalId);
               myCallbackFunction();
           }
       }, 100);
   });
   function myCallbackFunction(){           
       alert(gblAjaxResponse);
   }                              
</script>

---

Here's my recommendation:

Just put that AJAX call inside $(document).ready(), then execute a callback function on success.

<script type="text/javascript">
   var gblAjaxResponse;
   $(document).ready(function(){
       $.ajax({
          url: '/test.aspx',
          success: function(data) {
              gblAjaxResponse = data;
              myCallbackFunction();
          }
       });  
   });

   myCallbackFunction(){
       alert(gblAjaxResponse);
   }                              
</script>

---

While the function callback is the best method to avoid hanging the script (and possibly the page), you can also force the call to be synchronous:

$.ajax{
  url: blah,
  type: json,
  async: false
}

Like I said, this forces the rest of your javascript to wait on the request, however.