$ (document) .ready и xhr

Question

Код с jquery. Моя проблема с $ (документ) .ready (функция(), которая вызывает две функции выполняющийся XHR запросы

<script type="text/javascript"> 
$(document).ready(function() { 
getIdCategories(); 
getnameCategories(); 
}); 
</script> 

Иногда функция не работает, а иногда и функции работают, но они не работают в порядке !!

функции буксировочные:

function getIdCategories() 
{ 

    var request = new XMLHttpRequest(); 

    request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true); 
    request.onreadystatechange = function() 
    { 
     if(request.readyState==4) 
     { 
      //alert("Status is: "+request.status); 
      if (request.status == 200 || request.status == 0) 
      { 
       response = request.responseXML.documentElement; 
       i=0; 
       while(response.getElementsByTagName('category')[i]!=undefined) 
        { 
         idCategories[i]=response.getElementsByTagName('category')[i].getAttribute('id') ; 
         //alert(idCategories[i]); 
         i=i+1; 
        } 

      } 
     } 

    } 
    request.send(); 
} 

и:

function getnameCategories() 
{ 

    var request = new XMLHttpRequest(); 
    if(i<idCategories.length) 
     { 
      request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories/"+idCategories[i]+"?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true); 

      request.onreadystatechange = function() 
       { 
        if(request.readyState==4) 
        { 
         //alert("Status2 is "+request.status); 
         if (request.status == 200 || request.status == 0) 
         { 
          response1 = request.responseXML.documentElement; 
          nameCategories[i] = response1.getElementsByTagName('language')[0].firstChild.data; 
          //alert(nameCategories[i]); 
          $('#im'+i).html(nameCategories[i]); 
          $('#a'+i).show(); 
          i++; 


         } 
        } 
       } 

      request.send(); 

     } 
    else 
     { 
      return; 
     } 

} 

Answer 1

Ajax звонок - это просто async запрос, это означает, что вы не можете контролировать порядок, по которому первый закончен. Но вы все еще можете решить это, добавив еще callback.

$(document).ready(function() { 
    getIdCategories(function(){ 
     getnameCategories(); 
    }); 
}); 

// in 'getIdCategories' 
function getIdCategories(cb) { 
    if (/* ajax complete */) { 
     // fire callback function 
     cb && cb(); 
    } 
} 

Answer 2

Взгляните на $.ajax: http://api.jquery.com/jQuery.ajax/

Это гораздо проще, чем нативный пути.

AJAX означает Asynchronous JavaScript и XML где асинхронные означает, что скрипт не ждать, пока запрос не будет сделан. Это означает, что оба ваших запроса начинаются в одно и то же время, и вы не можете знать, какой из них выполняется быстрее. НО вы можете запустить второй запрос в функции обратного вызова из первого запроса, поэтому второй запрос начинается, когда первый будет завершен.

$(function(){ 
    $.ajax({ 
     type: 'GET', 
     url: '', 
     data: {}, 
     success:function(data){ 
      console.log('First request done'); 
      /* Start second request HERE */ 
     } 

    }); 
}); 

$.ajax также предлагает синхронные запросы. с помощью синхронных запросов, сценарий ждет, пока запрос не будет завершен:

$(function(){ 
    $.ajax({ 
     type: 'GET', 
     url: '', 
     data: {}, 
     async: false 
    }); 
    console.log('First request done'); 
    /*Start second request HERE */ 
}); 

Answer 3

функция AJAX JQuery имеет параметр, называемый асинхронным, который вы можете установить в ложь, чтобы заставить синхронное поведение

$(function(){ 
$.ajax({ 
    type: 'GET', 
    url: '', 
    async: false, 
    data: {}, 
    success:function(data){ 
     console.log('First request done'); 
     /* Start second request HERE */ 
    } 

}); 

});

// вызвать другую функцию АЯКС

Это позволит вам контролировать порядок исполнения .. если первый вызов не возвращает второй не начнет