For 루프의 XMLHttpRequest

Question

이 코드는 여러 웹 페이지를 반복하고 각 페이지의 모든 링크를 찾아서 콘솔에 표시하지만 가장 마지막 웹 페이지 (fakeURL)의 링크 만 나열하는 것으로 보입니다. com/735).

마지막 반복문 대신 모든 반복에 대해 console.log(url);을 어떻게 사용할 수 있습니까? (i = 735)?

for(i = 0; i <= 735; i += 15) 
{ 
    var xhrs = new XMLHttpRequest(); 
    xhrs.open("get", 'http://fakeURL.com/' + i, true); 
    xhrs.onreadystatechange = function() 
    { 
     if (xhrs.readyState == 4) 
     { 
      $(xhrs.responseText).find('a').each(function() 
      {   
       var url = $(this).attr('href'); 
       console.log(url);            
      }); 
     } 
    } 
     xhrs.send(); 
} 

Answer 1

문제는 모든 아약스 통화 같은 xhrs 변수를 재사용하고 있다는 점이다. 따라서 한 번에 모든 통화가 onreadystatechange 이벤트가 발생하면 특정 요청에 속한 xhrs 변수를 찾을 수 없습니다. 따라서 마지막 요청의 xhrs.readyState을 모두 볼 수 있으므로 마지막 요청 만 완료됩니다.

당신은 onreadystatechange 이벤트를 생성 한 요청을 참조 this 사용으로 전환 할 수 있어야이 :

다른 사람이 말했듯이

for(i = 0; i <= 735; i += 15) { 
    var xhrs = new XMLHttpRequest(); 
    xhrs.open("get", 'http://fakeURL.com/' + i, true); 
    xhrs.onreadystatechange = function() 
    { 
     if (this.readyState == 4) 
     { 
      $(this.responseText).find('a').each(function() 
      {   
       var url = $(this).attr('href'); 
       console.log(url);            
      }); 
     } 
    } 
    xhrs.send(); 
} 

, $ 당신이 jQuery를 사용하고 있음을 나타내는 경우, 다음 jQuery.ajax() 가능성이 것 훨씬 쉬워진다.