Refresh를 이용한 auto request

대덕공부/Spring

Refresh를 이용한 auto request

02O2 2022. 6. 16. 20:31

동기 (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을 누르면 요청이 멈춤