[JavaScript] Ajax async 옵션

Spring Boot/JavaScript

[JavaScript] Ajax async 옵션

알 수 없는 사용자 2022. 1. 4. 22:39

동기식	비동기식
요청(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 실행
			}
		}
	}
	);
	
	
}

<실행결과>