[Ajax] 동기 방식 - 비동기 방식 비교

동기 방식 (Synchronous )

 

요청을 보낸 후 결과를 받아야지만 다음 동작이 이루어진다.

설계가 간단하지만 시간이 걸려도 결과가 주어질 때까지 기다려야 한다.

비동기 방식 (Aynchronous )

 

요청을 보낸 후 결과를 받지 않아도 다음 작업을 할 수 있다.

설계가 복잡하지만 결과를 기다리지 않아서 자원을 효율적으로 사용할 수 있다.

 

비동기 방식은 결과를 콜백 함수(특정 시점에 호출되는 함수)로 알려준다.

Ajax에서 (success, error) 같은 형태가 콜백 함수에 해당한다.

---

function test1() { 
 
  $.ajax({ 
    url: "/test/ajax_test.action", 
    dataType: "json", 
    type: "post", 
    data: { 
      param : "param", // POST형식으로 url과 함께 보낼 값
    }, 
    success: function(data) {     
    	alert("test_1");
    }, 
    error: function(e) { 
    	alert("오류"); 
    } 
  }); 
}
 
function test2() { 
	alert("test_2");
}
 
//페이지 로드
$( document ).ready(function() {
	test1();
   	test2();
});
 Written by JooPyo-Hong ❤️ 

alert("test_2")가 먼저 실행되고 alert("test_1")이 실행된다.

Ajax는 비동기 방식이여서 자바스크립트가 순서대로 실행되며 순서대로 결과값이 나오는 것이 아니라

Ajax는 따로 처리되어 실행되고 자바스크립트는 Ajax의 결과를 기다리지 않고 실행된다.

 

test1(), test2()가 호출되고 자바스크립트에서 alert("test_1")가 실행된 후

success가 완료되는 시점에 alert("test_2")가 실행된다.