XHR 동기 동작을 작성하는 대체 방법

Question

최근에 XHR을 사용할 때 동기 동작을 사용하지 않는 것으로 들었습니다. 내 경우에는 동기 동작이 필요합니다. 내 통화를 내 서비스에 다시 쓰는 가장 좋은 방법은 지금 내가하는 일 대신 동기식으로하는 것입니다. 어떤 JQuery와십시오 .. 보통

var xhReq = new XMLHttpRequest(); 
    xhReq.open("POST", "ClientService.svc/REST/TestHtmlSend", false); 
    xhReq.send(null); 
    var serverResponse = JSON.parse(xhReq.responseText); 

    return serverResponse; 

Answer 1

당신에게 결코 필요 "동기 동작"; 대신 개발자 (개발자)는 자바 스크립트의 비동기 성질 인 –을 익히고 익명 콜백을 사용하고 클로저를 처리하는 방법에 대해 머리를 감싸 주면됩니다. 예를 들어

, 당신은이 일을하는 경우 :

function doSomething(arg) { 
    var number = arg + 10; // for example 
    var data = getDetail(); 
    data = JSON.parse(data); 
    element.innerHTML = number + ': ' + data.name; 
} 

function getDetail() { 
    var xhReq = new XMLHttpRequest(); 
    xhReq.open("POST", "ClientService.svc/REST/GetDetail", false); // bad! 
    xhReq.send(null); 
    return xhReq.responseText; 
} 

는 비동기 적으로 기록 될 수있다 : 비동기 예

function doSomething(arg) { 
    var number = arg + 10; 
    getDetail(function(data) { 
     data = JSON.parse(data); 
     element.innerHTML = number + ': ' + data.name; 
    }); 
} 

function getDetail(cb) { 
    var xhReq = new XMLHttpRequest(); 
    xhReq.open("POST", "ClientService.svc/REST/GetDetail", true); 
    xhReq.onreadystatechange = function() { 
     if (xhReq.readyState == 4) cb(xhReq.responseText); 
    } 
    xhReq.send(null); 
} 

공지만이 후에 실행 당신의 내면의 콜백 함수 (네트워크 요청이 완료 됨) 외부 변수의 number 변수에 계속 액세스 할 수 있습니다. 이는 JavaScript가 정적 범위 –을 가지므로 다른 말로하면, 함수를 선언하면 해당 함수를 둘러싼 함수의 변수에 영구적으로 액세스 할 수 있기 때문입니다.

Answer 2

그것은 다음과 같습니다 없습니다 :

var xhReq = new XMLHttpRequest(); 
xhrReq.onreadystatechange = function() { 
    if (this.readyState != 4) return; 
    if (this.status != 200) ...process error... 

    var serverResponse = JSON.parse(xhReq.responseText); 
    ... process the response ... 
}  
xhReq.open("POST", "ClientService.svc/REST/TestHtmlSend", true); 
xhReq.send(null);