jQuery.ajax() innerhalb einer Schleife

Question

Wenn ich innerhalb einer Schleife jQuery.ajax() aufrufen, würde es dazu führen, dass der Aufruf in aktueller Iteration den letzten Aufruf überschreibt oder ein neues XHR-Objekt für die neue Anforderung zugewiesen wird?

Ich habe eine Schleife, die dies tun, während aus dem Konsolenprotokoll kann ich Anfragen 200 ok erledigt sehen, aber nur die Ergebnisdaten der letzten Anfrage in der Schleife wird von der Anfrage success callback wie angenommen gespeichert.

der Code:

var Ajax = { 
    pages: {}, 

    current_request: null, 

    prefetch: function() { 
     currentPath = location.pathname.substr(1); 

     if(this.pages[currentPath]) 
     { 
      var current = this.pages[currentPath]; 
      delete this.pages[currentPath]; 

      current['name']=currentPath; 
      current['title']=$("title").text().replace(' - '.SITE_NAME, ''); 
      current['meta_description']=$("meta[name=description]").attr('content'); 
      current['meta_keywords']=$("meta[name=keywords]").attr('content');   
     } 

     var _Ajax = this; 
     //the loop in question ***** 
     for(var key in this.pages) 
     { 
      $.ajax({ 
       method: 'get', 
       url:'http://'+location.hostname+'/'+key, 
       success: function(data) { 
        _Ajax.pages[key] = data;  
       } 
      }); 

        console.debug(this.pages); 
     } 

     if(current) 
     { 
      this.pages[currentPath] = current; 
     }  

    } 
};//Ajax Obj 
for(var i in pages) 
{ 
    Ajax.pages[pages[i]]={}; 
} 

$(function() { 
    Ajax.prefetch(); 
});//doc ready 

Answer 1

Dies ist, wie ich immer eine Ajax-Schleife tun ..

Ich benutze eine rekursive Funktion, die nach dem xhr.readyState == 4

i = 0 
process() 
function process() { 
    if (i < 10) { 
     url = "http://some.." + i 
     var xhr = new XMLHttpRequest(); 
     xhr.open("GET", url, true); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       alert(xhr.responseText) 
       i++ 
       process() 
      } 
     } 
     xhr.send(); 
    } else { 
     alert("done") 
    } 
} 

Answer 2

aufgerufen wird, glaube ich, was ist passiert hier, hat mit der Schließung zu tun. In dieser Schleife:

for(var key in this.pages) 
    { 
     $.ajax({ 
      method: 'get', 
      url:'http://'+location.hostname+'/'+key, 
      success: function(data) { 
       _Ajax.pages[key] = data;  
      } 
     }); 

       console.debug(this.pages); 
    } 

Die Variable key tatsächlich außerhalb der Schleife definiert. Wenn Sie also zu den Callbacks kommen, hat sich der Wert wahrscheinlich geändert. Versuchen Sie so etwas wie dieses stattdessen:

http://jsfiddle.net/VHWvs/

var pages = ["a", "b", "c"]; 

for (var key in pages) { 
    console.log('before: ' + key); 
    (function (thisKey) { 
     setTimeout(function() { 
      console.log('after: ' + thisKey); 
     }, 1000); 
    })(key); 
} 

Answer 3

Sie werden für key einen Verschluss benötigen:

for(var k in this.pages){ 
    (function(key){ 
      $.ajax({ 
       method: 'get', 
       url:'http://'+location.hostname+'/'+key, 
       success: function(data) { 
        _Ajax.pages[key] = data;  
       } 
      }); 

      console.debug(this.pages); 
    })(k); 
} 

auf diese Weise sichergestellt werden, dass Schlüssel auf in jedem Ajax Erfolg immer die richtige ist Rückrufen. aber außer, dass es funktionieren sollte

i eine kleine Verschluss Demonstration mit Timeout statt Ajax aber das Prinzip gemacht ist das gleiche:

http://jsfiddle.net/KS6q5/

Answer 4

ich vor der gleichen Situation war, löste ich die Verwendung von Ajax Aufruf innerhalb einer neuen Funktion dann rufen Sie die Funktion in die Schleife.

Es wäre wie folgt aussieht:

function a(){ 
    for(var key in this.pages) 
    { 
     var paramsOut [] = ... 
     myAjaxCall(key,paramsOut); 
     ....... 
    } 
} 
function myAjaxCall(paramsIn,paramsOut) 
{ 
     $.ajax({ 
     method: 'get', 
     url:'http://'+location.hostname+'/'+paramsIn[0], 
     success: function(data) { 
      paramsOut[key] = data;  
     } 
     }); 
} 

Answer 5

Sie benötigen async verwenden: false in Sie Ajax-Request. Er sendet die Ajax-Anforderung synchron, während er auf die Beendigung der vorherigen Anforderung wartet und dann die nächste Anforderung sendet.