비동기 처리란?
"DB"를 V에서 사용하는데, "화면 변경이 없다"
화면이 깜빡거림(리로드)이 없다.
ex)
[동기 처리]
어플에서 사용자가 "DB에 이미 존재하는 아이디를 입력"했을때 기능을 수행하는 경우(무조건 기능을 수행하는 것이 아닌)
DB를 확인해봐야 수행할 수 있다.
DB(Model)에게 정보를 요청 --->> Controller 한테 DB확인 --->> "요청"
V에서 C에게 요청을 하면 화면이 reload된다
[비동기 처리]
C를 통해 DB(M) 한테 SELECTONE 요청을 했는데도
reload가 안되고 V단에서 DB(M)의 정보를 화면 까빡임없이 받아오는 기술
<ajax(json타입) 코드 작성법>
$.ajax({ // {}==json타입
type : 요청 방식,
url : 요청할 URL,
dataType : 서버에서 응답해오는 데이터의 형식,
success : function() {},
error : function() {}
})
// {key:value, key:value, ....} JSON 타입의 형식은 Map 객체와 유사하다!!
옛날에는 .xml로도 데이터를 주고받았었는데
가독성이 안좋고 무거우니까
.json 형식으로 바꿔 쓰는 방향으로 바꼈다.
React 등에서도 데이터를 주고받을때 JSON 형식을 사용한다!
[{"key":"value","key":"value", ... },{....},{....}]
.ajax() 인자로도 사용된다.
좋아요 버튼을 눌렀다가 취소할 수도 있게 만드는 코드를 작성해 보았다.
<NewFile.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비동기 처리</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$.ajax({ // {}==json타입
type : "GET", // 요청 메서드
url : "main.do", // 요청할 URL
dataType : "text", // 서버에서 응답해오는 데이터의 형식
success : function(data) { // 콜백 함수 == 바로바로 수행되는 것이 아니라 응답을 제대로 받아야지 수행된다.
console.log("data는 서버에서 응답한 데이터");
console.log(data);
if (data == 'true') {
// 좋아요를 누른 행위
$("#btn").text("♥");
} else {
// 좋아요를 취소한 행위
$("#btn").text("♡");
}
},
error : function(error) { // 실패 콜백 함수
console.log("응답실패...");
console.log(error); // 왜 실패 했는지 보여줘
}
});
});
});
// {key:value, key:value, ....} JSON 타입의 형식은 Map 객체와 유사하다!!
</script>
<button id="btn">♡</button>
</body>
</html>
<TestServlet.java>
package test;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("*.do")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private boolean flag=false; // DB에 저장된 데이터라는 뜻
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("GET 요청 도착");
flag = !flag; // false <<--->> true
PrintWriter out=response.getWriter();
out.print(flag);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("POST 요청 도착");
}
}
2024.08.23
'WEB' 카테고리의 다른 글
| [WEB] 13. 효율적인 모달창(알람) (1) | 2024.09.04 |
|---|---|
| [WEB] 12. 리스너 (0) | 2024.09.03 |
| [WEB] 10. 핸들러맵핑과 싱글톤 패턴 (0) | 2024.08.22 |
| [WEB] 09. 스프링 프레임워크의 구조 (0) | 2024.08.20 |
| [WEB] 08. jQuery (0) | 2024.08.19 |
