2013-12-09 1 views
2

저는 AJAX 구현을 위해 jquery 라이브러리를 사용하고 있습니다. 괜찮 았고 나는 그것에 익숙했다. 그러나, 나는 아약스 책을 읽기 시작했고 다음 코드를 발견했다. 여기AJAX가 비동기 인 경우 setTimout 함수를 사용하는 이유는 무엇입니까?

// stores the reference to the XMLHttpRequest object 
var xmlHttp = createXmlHttpRequestObject(); 
// retrieves the XMLHttpRequest object 
function createXmlHttpRequestObject() 
{ 
    // will store the reference to the XMLHttpRequest object 
    var xmlHttp; 
    // if running Internet Explorer 
    if(window.ActiveXObject) 
    { 
     try 
     { 
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch (e) 
     { 
     xmlHttp = false; 
     } 
    }// if running Mozilla or other browsers 
    else 
    { 
     try 
     { 
     xmlHttp = new XMLHttpRequest(); 
     } 
     catch (e) 
     { 
     xmlHttp = false; 
     } 
    } 
    // return the created object or display an error message 
    if (!xmlHttp) 
    alert("Error creating the XMLHttpRequest object."); 
    else 
    return xmlHttp; 
} 

// make asynchronous HTTP request using the XMLHttpRequest object 
function process() 
{ 
    // proceed only if the xmlHttp object isn't busy 
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) 
    { 
     // retrieve the name typed by the user on the form 
     name = encodeURIComponent(document.getElementById("myName").value); 
     // execute the quickstart.php page from the server 
     xmlHttp.open("GET", "quickstart.php?name=" + name, true); 
     // define the method to handle server responses 
     xmlHttp.onreadystatechange = handleServerResponse; 
     // make the server request 
     xmlHttp.send(null); 
    } 
    else 
    // if the connection is busy, try again after one second 
    setTimeout('process()', 1000); 
} 


//executed automatically when a message is received from the server 
function handleServerResponse() 
{ 
    // move forward only if the transaction has completed 
    if (xmlHttp.readyState == 4) 
    { 
     // status of 200 indicates the transaction completed successfully 
     if (xmlHttp.status == 200) 
     { 
     // extract the XML retrieved from the server 
     xmlResponse = xmlHttp.responseXML; 
     // obtain the document element (the root element) of the XML structure 
     xmlDocumentElement = xmlResponse.documentElement; 
     // get the text message, which is in the first child of 
     // the the document element 
     helloMessage = xmlDocumentElement.firstChild.data; 
     // update the client display using the data received from the server 
     document.getElementById("divMessage").innerHTML = 
     '<i>' + helloMessage + '</i>'; 
     // restart sequence 
     setTimeout('process()', 1000); 
     } 
     // a HTTP status different than 200 signals an error 
     else 
     { 
     alert("There was a problem accessing the server: " + xmlHttp.statusText); 
     } 
    } 
} 

내 질문에 우리가 handleServerResponse() 함수에서 setTimeout('process()', 1000);를 사용합니까 왜? setTimeout ('process()', 1000);없이이 작업을 수행 할 수 있습니까?

+0

을 제거 할 수 <input type="text" id="myName" onkeyup="process()"/>을 onKeyUp에 그냥 jQuery의 간단한 AJAX 기능을 사용하는 방법 : http://api.jquery.com/category/ajax/ – Shai

+1

여기서 문제는 하나의'XMLHttpRequest' 객체 ('xmlHttp')만을 사용하고 있고 다른 것으로 설정하면 요청을 덮어 쓰는 것입니다 값. – h2ooooooo

+1

이것은 어떤 책입니까? – putvande

답변

0

주어진 예제에서 책은 body onload 이벤트에 대해 process() 함수를 호출했습니다. 내가 onload-하는 코드를 변경하면 >는 jQuery를 사용하는 경우 난 당신이, 당신은 모든 코드를 제거 할 수 있습니다 말한대로, 코드 //setTimeout('process()', 1000);

1

나를 위해, 그것은 어떤 종류의 일정한 폴링처럼 보인다. 매초마다 AJAX 요청을 재사용하고 있고, 이전 요청이 여전히 활성 상태 일 때 다시 요청을 기다립니다. 따라서 AJAX 요청을 작성하고 응답을 처리하는 것이 아닙니다.

해당 코드를 사용하면 페이지가 서버에서 검색 한 정보로 계속 업데이트됩니다. 서버 응답이 변경 될 때마다 페이지가 실시간으로 표시됩니다 (다음 요청이 완료 될 때만). Periodic Refresh과 유사합니다.

진화로서 AJAX 요청을 생성 한 다음 서버가 응답 할 때까지 기다리는 Long Polling을 사용할 수 있습니다. 서버에 정보가 있으면 즉시 응답을 받게됩니다. 응답을 기다리는 동안 아무 것도 서버에 오지 않으면받을 것입니다. 요청 시간이 초과되면 서버는 빈 몸으로 응답합니다. 그런 다음 클라이언트가 다른 AJAX 요청을 생성합니다. 좀 더 자세한 정보를 얻을 수 from the Wikipedia. 추가 링크 : Comet.

관련 문제