비동기처리란?
한마디로, "DB"를 V에서 사용하는데, "화면변경이없음"
이렇게 설명할 수 있다. 또는
(MVC 패턴의)V단에서 DB(M)의 정보를 화면깜빡임없이( == 화면 변경없이== reload 없이== 요청 없이== URL 변경 없이 ) 받아오는 기술
같은 말이지만, 처음 설명을 풀어쓰면 그렇다.
비동기처리의 예시로는 네이버 회원가입이 있다.
중복된 아이디를 입력하고 비밀번호를 입력하려고 커서를 넘기면 바로 저렇게 빨간 글씨가 되면서 사용할 수 없는 아이디라고 뜨고, 비밀번호는 필수정보라고 입력하라고 한다.
원래라면
DB == M 정보를 요청 --->> C 한테 DB 확인좀... --->> "요청"
이 과정을 거치는데, 이 과정 없이 V단에서 DB(M)의 정보를 화면 깜빡임(== 화면변경==reload==요청==url변경) 없이 받아오는, 즉, 비동기 처리를 수행한 것이다.
예제로 아이디 중복검사 코드를 짜보았다.
DB를 연동했고, YENA 라는 ID값은 미리 넣어놓은 상태이다.
아래는 servlet, jsp 코드이다.
자세한 내용은 깃허브(36일차)에 올려놓았다.
https://github.com/yn-j-98/2024record
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;
import model.dao.IDDAO;
import model.dto.IDDTO;
@WebServlet("*.do") //.do 요청을 이 서블릿이 처리하도록 설정
public class CheckIdServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("GET 요청 도착");
String id = request.getParameter("id"); // 클라이언트에서 전송한 아이디 파라미터를 가져옵니다
boolean flag = true; // 기본적으로 아이디가 사용 가능하다고 가정
if (id != null && !id.trim().isEmpty()) { // 아이디가 유효한 경우
IDDAO idDao = new IDDAO();
IDDTO idDto = new IDDTO();
idDto.setId(id);
IDDTO result = idDao.selectone(idDto); // DAO를 통해 아이디 조회
if (result != null) { // 아이디가 존재한다면
flag = false;
}
} else {
flag = false;
}
// 응답 작성
PrintWriter out = response.getWriter(); // 응답을 작성할 PrintWriter 객체 얻기
out.print(flag);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("POST 요청 도착");
}
}아래는 jsp 파일이다.
jquery url과 js언어를 사용하였다.
<%@ 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() {
$("#checkButton").click(function(){
var id = $('input[name=mid]').val(); // 입력 필드에서 아이디 값을 가져옵니다
if (id) {
$.ajax({
type : "GET",
url : "CheckId.do",
data: { id: id }, // 서버에 전송할 데이터 (아이디)
dataType : "text", // 기본값: text, 즉..안써도됨
success : function(data) {
// 응답 텍스트를 그대로 처리
if (data.includes("true")) { // true 라면
$("#result").text("아이디 사용 가능!");
} else if (data.includes("false")) { // false라면
$("#result").text("아이디 중복!");
} else {
$("#result").text("서버 응답 오류!");
}
},
error: function(error) {
console.error("요청실패 : " + error);
$("#result").text("오류 발생");
}
});
}
else { // 아이디가 입력되지 않은 경우
$("#result").text("아이디를 입력해 주세요"); // 아이디 입력 요구 표시
}
});
});
</script>
<h1>아이디 중복 체크</h1>
<input type="text" placeholder="아이디 입력" name="mid">
<button id="checkButton">중복 체크</button>
<p id="result"></p>
</body>
</html>
편의상 중복체크만 해보았다.
후에 설명을 들어보니까 ID값같은 것은 POST방식으로 하는게 맞겠다는 생각이 들었다..
코드를 실행하면,
yn98이라는 아이디는 db에 없기 때문에 위처럼 뜬다.
YENA라는 아이디는 DB에 값을 넣어놨기 때문에 중복이라고 아래 text로 보이게 된다.
'jQuery' 카테고리의 다른 글
| [JavaScript] - jQuery (0) | 2024.08.16 |
|---|