[JavaScript] Ajax async 옵션

동기식	비동기식
요청(Request) 후 응답(Response)을 받아야지만  다음 동작이 이루어진다.	요청(Request)을 보낸 후 응답(Response)과는  상관없이 동작하는 방식이다

 

Ajax는 비동기식으로 처리가 된다. 

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

 

그러나 아래와 같이 Ajax의 순서에 따라 동작해야 하는 경우 => "async" 옵션을 사용한다.  

1) Ajax가 먼저 처리 된후 자바스크립트가 실행되어야 하는 경우 

2) Ajax 안에 Ajax가 처리되어야 하는 이중 Ajax를 써야 하는 경우 

3) 기타

(Ajax가 먼저 실행 후 자바스크립트가 실행되어야 하는 경우)

async : (true) / false
true defualt 값 (기본값) 비동기 방식  : 응답(Response)과는 상관없이 동작하는 방식	false 동기 방식  :응답(Response)을 받아야만 동작하는 방식

 

function fnUserSelect() {
	$.ajax({
		type : "post",
		dataType : "json",
		url : "URL 경로",
		data : param,
		async: false,
		success : function(data) {
			if(data != null){
				 alert("창1"); //ajax 처리 부분
			}
		}
	}
	);
	
	alert("창2"); // 자바스크립트 처리 부분
}

function fnUserSelect() {
	// 1번
	$.ajax({
		type : "post",
		dataType : "json",
		url : "URL 경로",
		data : param,
		async: false,
		success : function(data) {
			if(data != null){
				 alert("창1"); // 1번 ajax
			}
		}
	}
	);
    
    // 2번
	$.ajax({
		type : "post",
		dataType : "json",
		url : "URL 경로",
		data : param,
		async: false,
		success : function(data) {
			if(data != null){
				 alert("창2"); // 1번 ajax 실행 후 2번 ajax 실행
			}
		}
	}
	);
	
	
}

<실행결과>

Ajax에서 처리한 alter("창1"); 확인을 해야만 창2가 보여짐

 

자바스크립트에서 처리한 alert("창2");

 

---

<실행결과 - Async 옵션을 쓰지 않을경우>

async 옵션을 사용하지 않아 alert("창2") 먼저 실행

alert("창2") 먼저 실행 후 alert("창1") 실행

 

---

 

https://wwwnghks.tistory.com/17

[Ajax] Ajax 순서대로 (동기 / 비동기) - async

https://sjparkk-dev1og.tistory.com/27

Ajax - 개념 및 사용법 (동기, 비동기)