동시적인 ajax 호출

Question

2 개 (또는 그 이상)의 ajax 호출을 동시에 수행하려고합니다. jQuery를 사용하고 싶지는 않지만 순수한 JavaScript 만 사용하고 싶습니다.

대부분의 경우 작동합니다. data1은 sample.com/ajax1에서 데이터를 출력하고 data2는 sample.com/ajax2에서 데이터를 출력하지만 두 번째 AJAX 호출에서 첫 번째 결과를 표시하는 경우가 있습니다 (1에서 10까지).

왜 이런 일이 발생합니까? 두 AJAX 요청 모두 동일한 도메인의 데이터를 요청하지만 다른 URL을 사용합니다. 이 문제를 방지하는 방법이 있습니까? 여기

스크립트입니다 : 모든

// First AJAX 
var xmlhttp1; 

// Second AJAX 
var xmlhttp2; 

if (window.XMLHttpRequest) { 
    xmlhttp1 = new XMLHttpRequest(); 
} else { 
    xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp1.onreadystatechange = function() { 
    if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200) { 
     data = JSON.parse(xmlhttp1.responseText); 
     console.log('data1: ' + data); 
    } 
} 

xmlhttp1.open("GET", "http://sample.com/ajax1", true); 
xmlhttp1.send(); 

if (window.XMLHttpRequest) { 
    xmlhttp2 = new XMLHttpRequest(); 
} else { 
    xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp2.onreadystatechange = function() { 
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) { 
     data = JSON.parse(xmlhttp2.responseText); 
     console.log('data2: ' + data); 
    } 
} 

xmlhttp2.open("GET", "http://sample.com/ajax2", true); 
xmlhttp2.send(); 

Answer 1

첫째, 나는 많은 것을 당신이 코드를 중복되지 않도록, 함수에서 처리/당신의 XMLHttpRequest의 생성을 포장 recomment.

변수는 data 변수가 전역 변수이므로 두 변수 모두 동일한 변수를 사용하고 있습니다. 두 번 호출에서 var 키워드를 사용하여 문제를 해결할 수 있습니다.

xmlhttp2.onreadystatechange = function() { 
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) { 
     var data = JSON.parse(xmlhttp2.responseText); 
     console.log('data2: ' + data); 
    } 
} 

Answer 2

제대로 data를 캡슐화하지 않을 때문입니다. 작성한 방식대로 데이터는 전역 객체이므로 아약스 호출로 수정할 수 있습니다. Ajax 호출은 비동기식이므로 data에 대한 예측할 수없는 값이됩니다. 당신은 여러 요청을 생성하고보다 효율적으로 제어 할 수있는이 기능을 어쨌든 함수

내부 data을 정의하는 것을 잊었다 때문에

Answer 3

문제는

var req={}; 
function ajax(a){ 
var i=Date.now()+((Math.random()*1000)>>0); 
req[i]=new XMLHttpRequest; 
req[i].i=i; 
req[i].open('GET',a); 
req[i].onload=LOG; 
req[i].send(); 
} 
function LOG(){ 
console.log(this.i,this.response); 
delete req[this.i];//clear 
} 
window.onload=function(){ 
ajax('1.html'); 
ajax('2.html'); 
ajax('3.html'); 
} 

이 xhr2를 사용합니다 .. 아마도 ... 이전 브라우저에서 작동하도록 코드를 수정해야합니다.