본문 바로가기
CLASS/SPRING,JSTL

#6-8 / Ajax 동기화 및 비동기화 차이점

by hingu 2024. 7. 15.

비동기를 많이씀

⚡ 비동기,동기 차이

- async_sync.jsp
 
<style>
    .box {
    width : 0px; height : 30px;
    border : 1px solid black; transition : all 5s ease;
    background-color : skyblue;
     }
</style>

<body>
<div class="box" id="box"></div>
</body>

<script>
	function datacall(){
		setTimeout(ani,100);
		var http,result;
		http = new XMLHttpRequest();
		http.onreadystatechange = function(){
			if(http.readyState==4 && http.status==200){ //backend 5초 로딩 걸림
				document.getElementById("box").style.display="none";
				console.log(this.response);
			}
		}
		http.open("POST","./ajaxok.do",true); //true : 비동기
		http.setRequestHeader("content-type","application/x-www-form-urlencoded");
		http.send("mid=hong");
		console.log("내가 먼저 출력됨~")
	}
	
	function ani(){
		document.getElementById("box").style.width = "300px";
	}
	datacall();
</script>
=>true : 비동기 /  false : 동기


- shop_main2.java (Controller)
 
/*-------Ajax 동기화 및 비동기화 차이점 페이지-------*/
@PostMapping("/ajaxok.do")
public String ajaxok(String mid,HttpServletResponse res) throws Exception{
    PrintWriter pw = res.getWriter();
    System.out.println(mid);
    Thread.sleep(5000); //응답 대기시간을 설정할 수 있음
    pw.write("ok");
    pw.close();

    return null; //PrintWriter 없으면 console에 404뜸
}

=> Thread로 5초뒤 실행함

비동기 : 저 텍스트가 먼저 뜨고 5초뒤 ok가 뜸

 

동기 : ok와 저 텍스트가 동시에 5초 후 들어옴

 

=> spring에서 ajax에서 전송 데이터 받을 경우 printWriter를 사용시 view를 생성할 필요 없음!
     (단, 미사용시 무조건 view페이지를 생성해야만 404에러를 방지할수 있음)
     printWriter이 없으면 " "여도 404 뜸 : ajaxok.do는 가상의 파일 (404안뜨려면 ajaxok.jsp를 무조건 만들어줘야함)
     printWriter로 값 찍어주면 return null이든 " "이든 안뜸!! : 값을 출력시켜줘서

 

🔽 🔽 🔽 🔽

 

동기 false

call( this.response )이 와야 움직임

동기화 작업시 Backend와 시간간격을 체크하여 작업을 선행해야함

페이지 자체가 로드가 걸려버림 => animation 사용 불가

 

비동기 true

call이 오든 안오든 일단 쏨

( data가 많아질 경우 data가 도착하지도 않았는데 출력해버리기 때문에 요상한 일이 발생할 수 있음 )

결과값에 대한 통신시간과 관계없이 해당 페이지를 출력시켜버림

 

'CLASS > SPRING,JSTL' 카테고리의 다른 글

🎫 spring note  (0) 2024.07.19
#6-9 / PathVariable(- API 서버 제작시 사용)  (0) 2024.07.15
#6-7 / JSTL - SPA 검색 기능 사용법  (0) 2024.07.15
#6-6 / JSTL - Split을 이용하여 출력하기  (0) 2024.07.15
#6-5 / JSTL - 외부페이지 로드  (0) 2024.07.15

관련글

티스토리툴바