타이머 기반 Ajax 호출 하나의 페이지에서 2 번 호출

Question

다른 수신 div 태그와 동시에 같은 페이지에서 여러 개의 Ajax 호출을 수행 할 수 있습니까? 나는 이것에 대한 답을 찾는데 어려움을 겪고있다.

3 페이지가 있습니다. 홈 페이지와 2 개의 PHP 페이지 : 결과를 나타내는 상태 및 경고 페이지.

홈 페이지에는 아약스를 사용하여 데이터가 변경된 2 개의 div가 있습니다.

<div id="statusTable"> </div> 

<div id="alertsTable"> </div> 

setInterval을 사용하여 div에 대한 새 데이터를 두 번 요청합니다. 내 문제는 호출이 이루어지면 두 div가 모두 동일한 데이터를 보유한다는 것입니다.

setInterval 
    (
     function() 
     { 
      getAlerts(); 
      getStatus(); 
     }, 
     1000 
    ); 

예.

function loadXMLDoc(url,cfunc) 
    { 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=cfunc; 
     xmlhttp.open("GET",url,true); 
     xmlhttp.send(); 
    } 

    function getAlerts() 
    { 
     loadXMLDoc("alerts.php?update=variable",function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.getElementById("alertsTable").innerHTML=xmlhttp.responseText; 
      } 
     }); 
    } 

    function getStatus() 
    { 
     loadXMLDoc("status.php?update=variable",function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("statusTable").innerHTML=xmlhttp.responseText; 
      } 
     }); 
    } 

통화가

아래처럼 div의 수신 데이터를 중복되지 않도록 내가 타이머 setIntervals을 변경 : 대신

alerts table //getAlerts() 
1 1 
1 1 

status table //getStatus() 
2 2 
2 2 

이의

alerts table // getStatus() call 
2 2 
2 2 

status table // getStatus() 
2 2 
2 2 

코드입니다

setInterval 
    (
     function() 
     { 
      getAlerts(); 
     }, 
     5000 
    ); 

    setInterval 
    (
     function() 
     { 
      getStatus(); 
     }, 
     3000 
    ); 

같은 시간에 전화를 걸 수있는 방법이 있고 동일한 콘텐츠를 가진 내 div에 대해 걱정할 필요가 없기를 바란다.

Answer 1

먼저 AJAX는 상태 비 저장 HTTP 프로토콜을 사용합니다. 응답 본문에 직접 태그를 지정하지 않으면 어떤 답이 먼저 도달했는지 확신 할 수없는 경우.

단 하나의 패킷 만 수신하면 readyState가 변경되고 다른 패킷은 삭제되므로 2가 먼저 도달하여 설정됩니다.

xmlhttp 변수가 전역 적으로 정의됩니다. 그래서, 1 내부의 패킷은 2 내부의 패킷에 의해 오버로드됩니다. getAlert 및 getStatus 함수에서 정의하는 동안 var xmlhttp을 사용하고 loadXMLDoc 함수에 매개 변수로 제공하십시오.

둘째, 결과가 달라야하는지 확인하십시오. 어쩌면 두 값이 같을 수도 있습니다.

Answer 2

당신은이 일을하지 않고 loadXMLDoc()

function loadXMLDoc(url,cfunc) 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=cfunc; 
    xmlhttp.open("GET",url,true); 
    xmlhttp.send(); 
} 

에 로컬로 xmlhttp 변수를 decalre 할 필요가, 당신은 덮어 쓰기 끝낼 것을 의미 잘못 전역으로 기능 "누수"에서 선언 된 xmlhttp 값, 두 번째로 호출되는 값 (오브젝트에 설정된 URL 값 포함). 본질적으로 호출의 비동기 특성으로 인해 코드에 경쟁 조건이 도입됩니다.

Answer 3

race condition과 xmlhttp가 글로벌 인 것은 여기에있는 문제입니다. 마지막으로 나온 것은 div에 작성된 데이터를 덮어 쓰는 것입니다. 제안에 따라 xmlhttp 변수 을 로컬로 만들고 응답 본문에 태그를 추가하여이를 해결하십시오.

function loadXMLDoc(xmlhttp,url,cfunc) 
{ 
    xmlhttp.onreadystatechange=cfunc; 
    xmlhttp.open("GET",url,true); 
    xmlhttp.send(); 
} 

function getAlerts() 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    loadXMLDoc(xmlhttp,"alerts.php?update=variable",function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200 && xmlhttp.responseText.indexOf("unique  key") != -1) 
     { 
      //change div which matches unique key 
     } 
    }); 
} 

제공 : @ 마이크 브랜트와 브라우저가 처리하는 방법 을 확인하고 계속 더 아약스 호출을 사용하려는 나 같은 사람들이 전에

을 @Cunning 프로세스를 여러 아약스 전화 :

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

http://sgdev-blog.blogspot.com/2014/01/maximum-concurrent-connection-to-same.html