[AJAX] 동기(sync) 방식으로 사용하는 방법

AJAX  동기(sync) 방식으로 사용하는 방법

Ajax 는  Asynchronous Javascript And XML 의 줄임말로 기본적으로 비동기 방식입니다.

클라이언트와 서버측의 데이터 전송 과 처리를 비동기로 처리합니다.

비동기로 처리하기 때문에 데이터 처리와 전송을 하는 동안 

다른 동작을 수행할 수 있고, 불필요한 로딩을 줄이고 자유로운 페이지 구성이 가능해집니다.

하지만 무조건 비동기방식으로 동작하지 말아야 할 때가 있습니다.

예를 한번 들어볼까요?

 $.ajax({
   type: 'POST',
   url: 'test.do/work',
   data: "worktype=1",
   success: function(data) {
        if(data != null) {
             // Do somothing when data is not null
        }
   }
  });
  doAnything();

위 코드는 ajax 의 결과와 상관없이 비동기 이기 때문에 doAnything(); 이 무조건 실행됩니다.

ajax 의 결과를 기다리지 않고 처리하는 문제가 있습니다.

서버쪽 처리속도가 빨라서 클라이언트의 속도보다 앞선 다면 문제가 없겠지만,

보장은 없습니다.

따라서 ajax 의 처리 결과가 완료 된 후 진행해야 하는 경우에는 동기방식으로 구현해야 합니다.

 $.ajax({
   type: 'POST',
   url: 'test.do/work',
   data: "worktype=1",
   async : false,
   success: function(data) {
        if(data != null) {
             // Do somothing when data is not null
        }
   }
  });
  doAnything();

async 속성을 false 로 하면 됩니다.

매우 간단하죠.

async 는 기본적으로 true 속성을 가지지만 이렇게 설정하면 동기 처리가 가능합니다.

모두 즐거운 코딩 되세요.