동기 (Synchronous)와 비동기(Asynchronous)
- 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다.
- 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.(비동기에서는 인터벌구조사용)
비동기적 코드의 실행 결과는 동기적 코드가 전부 실행 되고나서 값을 반환한다.
동기는 디자인이 비동기보다 간단하고 직관적일수 있지만 결과가 주어질 때 까지 아무것도 못하고 대기해야하는 문제가 있다. 비동기는 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간동안 다른 작업을 할 수 있어서 보다 효율적일 수 있다.
auto request
화면의 전체에 락을 거는 동기요청과 안거는 비동기요청이있는데 auto request는비동기요청이다.
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h4> Refresh를 이용한 auto request </h4>
<h4> 현재 서버의 시간 : <%=new Date() %></h4>
<h4> 비동기 요청으로 갱신되는 시간 : <span id="timeArea"></span></h4>
<input type="button" value="start" id="start" class="control">
<input type="button" value="stop" id="stop" class="control">
<pre>
1. Refresh를 이용한 서버사이드 방식의 auto
<%--
response.setIntHeader("Refresh", 1);
--%>
2. 클라이언트 사이드 방식 auto
<!-- 1) HTML meta tag <meta http-equiv="Refresh" content="3;url=https://www.naver.com" > -->
2) JavaScript의 scheduling 함수 :
</pre>
<script type="text/javascript">
// setTimeout(() => {
// location.reload();
// }, 1000);
let timeArea = $('#timeArea');
let jobId = null;
$(".control").on("click",function(event){
// this.id
let btnId = $(this).prop("id");
if(btnId == "start"){
jobId = setInterval(function(){
$.ajax({
url : "getServerTime.jsp",
// default 'get'
dataType : "json" // text, html, json, xml, script -> main type : text, 파일 업로드 처리를 비동기로? (FormData)
,
success : function(resp, status, jqXHR) {
timeArea.html(resp.time);
},
error : function(jqXHR, status, error) {
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
}, 1000);
}else{
clearInterval(jobId);
}
});
</script>
</body>
</html>
1. Refresh를 이용한 서버사이드 방식의 auto
response.setIntHeader("Refresh", 1);
2. 클라이언트 사이드 방식 auto
1) HTML meta tag
<meta http-equiv="Refresh" content="3;url=https://www.naver.com" >
2) JavaScript의 scheduling 함수 :
</pre>
<script type="text/javascript">
// setTimeout(() => {
// location.reload();
// }, 1000);
let timeArea = $('#timeArea');
let jobId = null;
$(".control").on("click",function(event){
// this.id
let btnId = $(this).prop("id");
if(btnId == "start"){
jobId = setInterval(function(){
$.ajax({
url : "getServerTime.jsp",
// default 'get'
dataType : "json" // text, html, json, xml, script -> main type : text, 파일 업로드 처리를 비동기로? (FormData)
,
success : function(resp, status, jqXHR) {
timeArea.html(resp.time);
},
error : function(jqXHR, status, error) {
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
}, 1000);
}else{
clearInterval(jobId);
}
});
</script>start버튼누르면 비동기요청으로 시간이가다가 stop을 누르면 요청이 멈춤
'대덕공부 > Spring' 카테고리의 다른 글
| 기본객체(implicitObject) (0) | 2022.06.17 |
|---|---|
| 웹어플리케이션에서 페이지 이동 (redirect VS forword VS include) (0) | 2022.06.16 |
| 06/16 HTTP 응답 패키징(HttpServletResponse 캡슐화) 방식 (0) | 2022.06.16 |
| 06/16 응답캐시제어헤더 (0) | 2022.06.16 |
| 요청응답구조 (0) | 2022.06.16 |
