2014-04-26 11 views
1

Flickr에서 이미지의 원시 JSON 데이터를받는 스크립트가 내 페이지에 있습니다. readyState를 사용하여 실시간 피드백을 제공하고자합니다.Ajax onreadystatechange function readyState

현재 코드가 수행 할 수있는 작업은 readyState가 4이고 상태가 200인지 확인하는 것입니다. 이것이 사실 일 때 페이지에 원시 JSON 데이터를 추가합니다.

코드 : 당신이 값이 다시 resultsContainer의 DIV에받은 추가 볼 수 있듯이

function sendRequest (request) { 

    //Request is the URL string to flickr containings tags entered by the user. 

    x = new XMLHttpRequest(); 
    x.open("GET", request,false); 
    x.send(null); 



       if (x.readyState==4 && x.status==200) 
       { 
       document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>"; 
       } 


} 

.

if(x.readyState==3){ 
document.getElementById("resultsContainer").innerHTML="Processing Request"; 
} 

을하지만 효과가 없습니다 :이처럼 같은 사업부에 피드백을 추가했습니다. 왜 성공적으로 준비 상태 4를 인식했는지 궁금합니다. 그러나 3은 아닙니다.

나는 onreadystatechange 함수가 있고 그것을 사용하려고 시도했지만 어떤 코드도 실행하지 못했습니다. 즉, 작동하지 않았습니다.

요청이 진행되는 동안 어떻게해야합니까 (readyState == 3)?

EDIT : 값이 반환 된 결과 컨테이너 추가 만 처리

CURRENT CODE: 

function sendRequest (request) { 

    x = new XMLHttpRequest(); 
    x.open("GET", request,true); 
    x.send(); 

    x.onreadystatechange = function() { 

     if (x.readyState==4 && x.status==200){ 
      document.getElementById("resultsContainer").innerHTML="success <br>"+x.responseText; 
     } 

     if(x.readyState==3){ 
      document.getElementById("getIms").value="Processing"; 
     } 

    } 



} 

엘리먼트 getIms '값이 변화한다.

+0

음, onreadystatechange 이벤트 리스너가 있습니까? 아니면 실제로 작성된 방식입니까? – adeneo

+0

이것이 작성된 방법입니다. x.onreadystatechange = function() {//을 추가하고 여기서 if 문을 실행하지 마십시오} –

답변

3

당신은이 x.open 상태에서 '거짓'키워드는 동기 작업을해야되는 것을 때문에

x.open("GET", request, true); 
x.onreadystatechange = function() 
{ 
    //Your code here to handle readyState==4 and readyState==3 
    if (x.readyState==4 && x.status==200) 
    { 
     document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>"; 
    } 
    else if (x.readyState==2) 
    { 
     document.getElementById("resultsContainer").innerHTML="Processing Request"; 
    } 
} 
x.send(); 

에 코드를 변경해야합니다, 즉 :이 요청을 보내 귀하의 브라우저 때까지, 다음 기다립니다 응답 (readyState == 4)을 수행 한 다음 나머지 코드를 실행합니다.

변경 사항에 따르면 x.open은 비동기 여야하며 readyState가 변경 될 때마다 실행되는 이벤트 핸들러도 만들어야합니다.

else 문에서 요청을 처리하는 동안 실행해야하는 코드를 배치해야합니다. readyState = 3에서 아무것도 수행하지 않는 이유는 readyState = 3은 데이터의 일부가 이미 수신되었음을 의미하지만 데이터의 양이 매우 적은 경우이 상태는 매우 제한된 양의 시각. ReadyState = 2는 요청이 전송 된 순간에 true입니다.

+0

제안 된 변경 사항을 적용했습니다. 그리고 readyState 4를 처리하는 코드가 실행됩니다. 하지만 if (x.readyState == 3) 여전히 같은 시간에 실행됩니다 - if (x.readyState == 4 && x.status == 200) –

+0

또한 - 편집을 참조하십시오. –

+0

@AnonOmus 내 대답이 변경되었습니다. 이제 작동합니다. – Seeseemelk