2016-10-21 2 views
0

아약스로 읽고 싶은 이미지가 많습니다. 각 이미지의 URL을 알고 있다면 어떻게 3 개의 이미지 아약스 요청을 동시에 만들 수 있습니까?동시에 여러 아약스 요청

이 하나 개의 이미지

var image_url = images[i]; 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200){ 
     console.log(xhr.response, typeof xhr.response); 

    } 
    } 

    xhr.open('GET', image_url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
+0

3 가지 동시 요청을 제한해야하는 이유는 무엇입니까? –

+0

을 사용하면 서버에 과부하가 걸리지 않습니다. – yomamma

+0

[Promise.all] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)을 찾고 있습니다. 아래의 솔루션은 JQuery를 사용하지만 바닐라 JS – lux

답변

2

true로 async을 설정하면 내 아약스 기능, 당신은 동시에 여러 발사 할 수있다. 사용중인 브라우저에 따라 브라우저는 한 번에 몇 개가되는지 제한합니다. 아약스와

$.ajax({ 
    type: "GET", 
    async: false, 
    url: "foo2.php" 
    }); 

async 당신이 생각하는 것이 무엇에 반대 작동합니다.

0

각 이미지의 URL을 배열에 넣어야합니다. jQuery에 아무런 불만이 없다면이 경우 많은 처리에 도움이되므로 $ .get을 사용해야합니다. 그런 다음 재귀 함수 내에서 호출하십시오. 이것은 의사 코드이며, 테스트하지 않았습니다.

var imageUrls = [];//populate with your URLs 
getImage(0); 
getImage(1); 
getImage(2); 


var getImage = function(iteration){ 
    $.get(imageUrls[iteration], function(data){ 
    //handle the image 
    //call the function again with the next index 
    getImage(iteration+3); 
    }); 

}