$（文書）.readyとxhr

Question

jQueryを使用したコードです。私の問題は、時には何の機能が動作しない、時には機能が動作しますが、彼らは順番に作業していない

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

を要求XHRを実行する二つの機能を呼び出す$（ドキュメント）.ready（関数（）である!!

牽引機能：

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リクエストが完了するまでスクリプトが待機していないこと、非同期 JavaScriptとXML非同期手段を意味します。つまり、両方のリクエストが同時に開始され、どちらが速いのかわからないことを意味します。しかし、最初の要求からコールバック関数で2番目の要求を開始することができるため、最初の要求が終了すると2番目の要求が開始されます。

$(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

jQueryのAJAX機能を使用すると、同期動作を強制的にfalseに設定することができます非同期というパラメータがあり

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

}); 

}）; Ajaxの呼び出しは非同期です：

//最初の呼び出しが第二は、予想されることを