[AJAX] Ajax 비동기식 처리와 동기식 처리

 

 

 

 

 

Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.

 

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

 

이때 서버와는 JSON, XML, HTML, 텍스트 파일 등 과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.

 

기존 방법과 다르게 웹에서 서버 측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기다릴 필요 없이, Ajax를 이용하여 데이터의 수신을 기다리지 않고 바로 다른 작업을 실행하여 불필요한 페이지의 로딩을 기다리지 않기 때문에 웹 속도를 빠르게 할 수 있습니다.

대부분 jQuery에서의 Ajax도 비동기식을 기본적으로 지원하지만 상황에 따라 동기식(Synchronous) 방식으로 사용할 경우가 종종 생길 수 있습니다.

 

 

 

비동기 방식

---

 

function checkPwd() {
	var pwd = $('#pwdArea').val();
            $.ajax({
                data: {password: pwd},
                url: 'checkPwd',
                dataType: 'json',
                success: function(data) {
                    var result = data;
                    return result;
                }
        });
}

위와 같이 비밀번호 일치 여부를 ajax로 처리한 코드가 있습니다. 다른 함수에서 위 checkPwd함수를 호출하여 비밀번호 일치 여부를 체크한 후 로직을 실행하려고 합니다.

위의 코드를 호출하여 비밀번호 일치 여부를 판단하기 위해 결과(위 코드에서의 var result)를 return 하도록 하였고 이 값을 확인해 보면, undefined가 나오게 됩니다.

 

undefined의 이유는, 비동기 방식에서는 success 콜백 함수에서 리턴한 값을 받을 수가 없기 때문입니다.

 

위 코드와 같이 jQuery의 Ajax호출은 async: true인 비동기식 처리방식이 기본이며, 속성을 기입하지 않는다면 기본적으로 비동기식으로 동작하게 됩니다. 

 

그렇기 때문에 Ajax 호출이 서버에서 응답을 받는 데에 아무리 빨리 받아도 다음 로직을 실행하기 전에 받을 수 있다고 확신할 수 없습니다.

 

 

 

동기 방식

---

위 코드와 다르게 아래의 코드는 async: false 속성이 추가되었습니다.

function checkPwd() {
	var result;
	var pwd = $('#pwdArea').val();
            $.ajax({
                data: {password: pwd},
                url: 'checkPwd',
                dataType: 'json',
                async: false ,
                success: function(data) {
                    result = data;
                }
        });
        return result;
}

속성을 false로 설정하게 되면 동기식 방식으로 ajax를 호출하고, 서버에서 응답을 기다렸다가 응답을 모두 완료한 후 다음 로직을 실행하는 동기식으로 변경할 수 있습니다.

위와 같이 동기식으로 처리되는 자바스크립트는 비밀번호 일치 여부가 끝난 뒤, data를 받은 후 그다음 로직을 처리하게 됩니다.