[Ajax] 07. Ajax 동기 방식(Sync)과 비동기 방식(Async)

1. Ajax - 동기방식 (Sync)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - 동기 방식</title>
</head>
<body>
	<button type="button" onclick="reqList();">조회</button>
	<button type="button" onclick="delList();">삭제</button>
	<p id="resp"></p>
	<Script>
		function reqList() {
			console.log("1 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				//쓰레드 2초가 걸려있어서 동기 방식으로 진행 시
				//list_long.do의 응답이 올 때 까지 대기
				url : "/contact/list_long.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : false,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 1, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("1 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
			
			//1번 요청 응답이 올 때 까지 2, 3 요청이 진행이 되지 않음
			console.log("2 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/list.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : false,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 2, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("2 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
			
			console.log("3 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/list_long.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : false,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 3, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("3 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
		}

		function delList() {
			//p요소 초기화
			$("#resp").html("");
		}
	</Script>
</body>
</html>

2. Ajax - 비동기 방식 (Async)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - 동기 방식</title>
</head>
<body>
	<button type="button" onclick="reqList();">조회</button>
	<button type="button" onclick="delList();">삭제</button>
	<p id="resp"></p>
	<Script>
		function reqList() {
			console.log("1 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				//비동기 방식에서는 요청을 한 번에 보낸 후 먼저 온 응답부터 처리
				url : "/contact/list_long.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : true,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 1, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("1 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
			
			//1번 요청 응답이 오지 않아도 2, 3 요청 진행
			console.log("2 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/list.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : true,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 2, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("2 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
			
			console.log("3 page 요청");
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/list_long.do",
				//메소드 타입 지정
				type : "GET",
				//동기 방식 사용 설정
				async : true,
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 3, pagesize : 5 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log("3 page 응답");
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
		}

		function delList() {
			//p요소 초기화
			$("#resp").html("");
		}
	</Script>
</body>
</html>

* 모든 페이지 요청을 한번에 받음

* 1번 페이지에 2초 쓰레드 걸어주어서 응답이 가장 늦음

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글

[Ajax] 09. Ajax Bootstrap table로 나타내기 (0)	2021.10.06
[Ajax] 08. Ajax POST방식과 Json POST방식 (0)	2021.10.06
[Ajax] 06. GET 방식과 POST방식 (0)	2021.10.06
[Ajax] 05. Ajax 기본형과 설정 값들 (0)	2021.10.06
[Ajax] 04. Ajax XMLHttpRequest(XHR) 객체 (0)	2021.10.06