AJAX 를 동기(Sync) 방식으로 사용하기.

Ajax는 Asynchronous Javascript And XML 의 약자로, 일반적으로 클라이언트와 서버측의 데이터 전송 및 처리를 비동기적(Asynchronous)으로 처리하는 것에 그 목적이 있습니다.

 

Ajax를 사용함으로써, 서버측에 데이터를 요청한 후, 그 데이터의 수신이 완료될 때까지 기다리지 않고, 다른 작업을 바로 진행할 수 있습니다. 그러한 이유로 좀더 웹페이지를 자유롭게 구성할 수 있게 되었고, 불필요한 잦은 페이지 로딩을 줄일 수 있습니다.

 

 

여기서 설명하려는 것은 이런 Ajax는 대부분 비동기방식 그대로 사용하지만, 경우에 따라서는 동기(Synchronous)방식으로 사용할 경우도 종종 생긴다는 것입니다.

이는 Ajax를 통해 서버측에 데이터를 요청하고, 이 데이터의 결과를 모두 수신 받은 다음 단계로 진행하도록 하는 경우가 있을 수 있다는 이야기입니다.

 

예를 들면 아래와 같은 코드가 있다고 가정합니다.

 

function proc_test() {

 

     $('#table > tbody  > tr').each(function() {
          $this = $(this);

 

          var grade = $this.find("input.grade").val();
          var point = $this.find("input.point").val();
          var param = "&grade=" + grade + "&point=" + point;

    

          $.ajax({
               type: 'POST',
               url: 'interface/grade_process.aspx',
               data: "worktype=1&" + param,
               success: function(data) {
                    if(data != null) {
                         // Do somothing when data is not null
                    }
               }
          });
     });

}

 

 

위 코드는 테이블의 한 줄(Row)마다 input grade와 point값을 읽어서 서버측에 Ajax로 데이터를 전달하여 처리를 하는 예제 코드입니다.

 

테이블의 20개의 줄(Row)를 가지고 있다고 하면 위의 코드는 20번의 Ajax를 호출하게 됩니다.

Ajax는 비동기 처리이므로 위의 20번 호출은 매우 빠른 속도로 (단순 루프 도는 속도) 서버측에 처리를 요청하게 됩니다.

 

 

만약 처리 순서를 중요시하는 코드라면 (반드시 첫번째 단계가 끝난다음 두번째 단계가 처리되어야 한다면) 위의 코드는 반드시 문제가 생기게 됩니다. 20번의 Ajax 호출이 인터넷 망을 타고 서버로 전달되는데, 반드시 첫번째 호출한 것이 두번째 호출한 것보다 먼저 도착한다고 장담할 수 없습니다.

 

또한 위의 코드처럼 서버측에 무작위로 데이터 처리를 요청하는 것은 경우에 따라 문제가 발생할 소지가 많습니다. 단시간내에 많은 양의 처리를 요구하면 서버측 부하도 많이 발생할 것입니다.

 

또 다른 코드를 보겠습니다.

 

function proc_test2() {

 

     var grade = $this.find("input.grade").val();
     var point = $this.find("input.point").val();
     var param = "&grade=" + grade + "&point=" + point;

    

     $.ajax({
          type: 'POST',
          url: 'interface/grade_process.aspx',
          data: "worktype=2&" + param,
          success: function(data) {
               if(data != null) {

                    // Do Something;

                     ...

               }
          }
     });

 

     location.href = 'http://www.daum.net';

}

 

 

사실 위와 같은 코드를 짜는 것은 조금 바보같지만, 단순히 예를 들기 위해 작성하였습니다. 위의 코드에서 빨간색으로 된 부분은 절대 실행되지 않을 것입니다. 비동기 방식이므로 ajax의 결과를 기다리지 않고, 바로 하단의 코드가 실행되어 현재의 페이지가 다음 메인 페이지로 이동해버리기 때문입니다.

 

서버측 응답이 아무리 빠르더라도 클라이언트 코드 처리보다는 느리겠죠.

(location.href = 'http://www.daum.net' 코드 바로 위에 시간이 오래걸리는 산술 연산 같은 것이 있지 않는한은요)

 

---------------------------------------------------------------------------------------------

그러면 Ajax의 처리결과가 모두 완료된 후에 진행되도록 하면 될 것입니다. Ajax는 이름 그대로 비동기 처리 방식이지만 동기 방식도 지원합니다.

 

간단히, async 속성 값을 false로 해주시면 됩니다.

그러면 ajax는 더이상 ajax가 아닌 sjax(?)로 동작하게 됩니다.

 

 

          $.ajax({
               type: 'POST',
               url: 'interface/grade_process.aspx',
               data: "worktype=1&" + param,

               async: false,
               success: function(data) {
                    if(data != null) {
                         // Do somothing when data is not null
                    }
               }
          });

 

 

ajax니까 이름 그대로 비동기 처리만 되겠지 하지만, 동기 처리 방식도 제공하는 것은 분명 이유가 있습니다. (방법이 간단하지만 잘 모르시는 분들도 많았습니다.)

 

아직 동기 처리 써보지 못하신 분들은 과연 Ajax를 동기 방식으로 쓰는 경우가 생길까 하시겠지만,

막상 써야 되는 경우가 발생한다면 당황하지 마시고, 간단히 async : false 만 ajax 속성으로 설정해주세요~