2009-10-04 3 views
0

이 코드는 async가 false로 설정된 경우에만 작동합니다. 그 이유는 무엇입니까?자바 비동기 요청이 작동하지 않습니다.

<head> 
    <script type="text/javascript" src="contact.js"></script> 
</head> 
  • 을 그리고처럼 사용 :

    var contact = 
    { 
        XMLHttp : null, 
        XMLDoc : null, 
        TXTDoc : null, 
    
        getData : function(dataSource) 
        { 
         contact.XMLHttp = new XMLHttpRequest(); 
         contact.XMLHttp.open("GET", dataSource, false); 
         contact.XMLHttp.onreadystatechange = contact.storeData; 
         contact.XMLHttp.send(null); 
        }, 
    
        storeData : function() 
        { 
         if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200) 
         { 
          contact.XMLDoc = contact.XMLHttp.responseXML; 
          contact.TXTDoc = contact.XMLHttp.responseText; 
         } 
        }, 
    
        displayData : function(elementID) 
        { 
         if(contact.TXTDoc != null) 
          document.getElementById(elementID).innerHTML = contact.TXTDoc; 
         else{ 
         document.getElementById(elementID).innerHTML = "can't do it"; 
         } 
        } 
    } 
    
    • 는 그래서 같은 HTML 문서로 가져

      <body id="para"> 
      
      <script type="text/javascript"> 
          contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt"); 
          contact.storeData(); 
          contact.displayData("para"); 
      </script> 
      

  • 답변

    3

    비동기이기 때문에 HTTP 요청을 텍스트 파일로 만드는 데 시간이 걸리므로 contact.storeData 콜백은 AFTER contact.displayData이라고합니다.

    해결책은 단순히 storeData 내에서 호출하는 것이므로 HTTP 요청을 텍스트 파일로 보낸 후 txtDoc 속성을 채 웁니다. 나를 위해 작동

    storeData : function() 
    { 
         if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200) 
         { 
           contact.XMLDoc = contact.XMLHttp.responseXML; 
           contact.TXTDoc = contact.XMLHttp.responseText; 
        contact.displayData("para"); 
         } 
    }, 
    

    전체 코드 :

    <p id="para"></p> 
    <button id="foo">go</button> 
    <script> 
    var contact = 
    { 
         XMLHttp : null, 
         XMLDoc : null, 
         TXTDoc : null, 
    
         getData : function(dataSource) 
         { 
           contact.XMLHttp = new XMLHttpRequest(); 
           contact.XMLHttp.open("GET", dataSource, true); 
           contact.XMLHttp.onreadystatechange = contact.storeData; 
           contact.XMLHttp.send(null); 
         }, 
    
         storeData : function() 
         { 
           if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200) 
           { 
             contact.XMLDoc = contact.XMLHttp.responseXML; 
             contact.TXTDoc = contact.XMLHttp.responseText; 
           contact.displayData("para"); 
           } 
         }, 
    
         displayData : function(elementID) 
         { 
           if(contact.TXTDoc != null) 
             document.getElementById(elementID).innerHTML = contact.TXTDoc; 
           else{ 
           document.getElementById(elementID).innerHTML = "can't do it"; 
           } 
         } 
    }, 
    button = document.getElementById('foo'); 
    button.onclick = function() { 
        contact.getData("http://localhost/file.txt"); 
        contact.storeData(); 
    }; 
    
    </script> 
    
    +0

    콜백 함수에서'XMLHttp'의 응답을'XMLDoc 및 TXTDoc'에 표시하는 대신 어떻게 할 것인가? 'onreadystatechange'에 첨부 된 익명 함수에'storeData' 문을 삽입하는 방식은 효과가없는 것처럼 보입니다. – Fortisimo

    +0

    'contact.XMLHttp.onreadystatechange = contact.storeData' storeData와 displayData, 즉 contact.ajaxCallback 또는 무엇인가를 호출하는 다른 메소드를 정의하십시오. –

    1

    이 동 기적으로 수행 할 때

    contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt"); 
    contact.storeData(); 
    contact.displayData("para"); 
    

    getData는 요청이 전송되고이 끝난 후 반환, GetData의 반환이라고 그런 다음 storeData 및 displayData가 실행됩니다. 비동기로 처리하면 getData가 요청을 시작하고 즉시 리턴합니다. 그런 다음 storeData와 displayData는 준비되기 전에 호출되므로 작동하지 않습니다. 요청 결과가 아직 반환되지 않았습니다.

    meder와 마찬가지로,이를 고치려면 콜백 기능으로 디스플레이를해야합니다. 이렇게하면 displayData가 실행될 때 요청의 결과를 사용할 수 있습니다.

    +0

    storeData 및 displayData를 호출하기 전에 getData가 준비되었는지 확인하는 HTML 파일에서 if 문을 생성하면 어떻게됩니까? 내가 어떻게 그럴 수 있니? – Fortisimo

    +0

    완료 및 절전을 확인하는 while 루프를 추가 할 수 있습니다.하지만 이렇게하면 스크립트가로드 된 후 스크립트가 완료 될 때까지 아무 것도하지 못하게됩니다. 모델을 사용한 이벤트 중심/콜백을 고수하는 것이 좋습니다. 콜백을 호출하면 html을 변경할 수 있습니다. – BaroqueBobcat