데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사)

사실 ajax 를 몇번인가 사용했는데 이에 대한 정리가 하나도 없다는걸 깨달아서 마음먹고 정리해봤습니다. 순서상 JQuery 를 먼저 정리하고 정리해야하는데 jquery 는 다음 글부터 정리해야할듯ㅠㅠ

 

AJAX 란 무엇인가 - Asynchronous Javascript and Xml

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.

서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 Ajax이다. 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.

 

정리하자면...!!

• ajax 는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 기법 중 하나!
• 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지의 일부분만 갱신할 수 있다
• 비동기화 방식으로 통신한다
• 이상의 특징이 맞물려 빠르고 부드럽게 화면 표시가 가능하다!

 

JS 로 AJAX 통신하기

• 가장 먼저 xhr 객체 - XMLHttpRequest() - 를 선언한다.
• 이후 open 함수와 onreadystatechange 의 callback 함수, send 함수를 사용해서 내용을 다른 페이지로 전달한다.
  • 이때 open 함수는 매개변수로 (method 방식, 데이터를 보내는 주소, 비동기화 여부) 를 순서대로 받는다.
    • 이때 주소에 파라미터 정보를 추가하면 해당 파라미터를 포함해서 해당 주소로 데이터가 보내지게 된다.
  • 다음으로 실행되는 onreadystatechange 는 XMLHttpRequest 의 객체의 readyState 값이 변경될 때마다 callback 함수를 불러온다. 이때 readyState 값은 0~4까지 총 5개가 존재하고 이에 따라서 callback 함수도 5번 불러오게 된다.
    • readyState 값에 따른 설명은 아래 표 참고!
    • 이때 기억해야할 것은 경국 readyState 가 4 가 되어야 ajax 요청이 정상적으로 되었고, 응답을 반환할 준비가 된다는 사실!

ReadyState	설명
UNSENT (숫자 0)	XMLHttpRequest 객체가 생성됨.
OPENED (숫자 1)	open() 메소드가 성공적으로 실행됨.
HEADERS_RECEIVED (숫자 2)	모든 요청에 대한 응답이 도착함.
LOADING (숫자 3)	요청한 데이터를 처리 중임.
DONE (숫자 4)	요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

 

다음으로 xhr.status 는 서버 문서 상태를 의미한다. 즉 http 응답 코드를 생각하면 된다. 대표적으로 아래와 같은 것들이 있다.

응답 코드	설명
200	요청을 성공적으로 받았으며 인식했고, 수용했다 ⇒ 요청에 따른 응답 가능!
404	요청의 문법이 잘못되었거나 요청을 처리 할 수 없다 ⇒ 주로 클라이언트의 오류
500	대표적인 서버 오류, 서버가 명백히 유효한 요청에 대한 충족에 실패 ⇒ 클라이언트는 잘못이 없다 코드를 잘못 짠 나의 잘못ㅠㅠ

• 앞서 설명한 readyState = 4, status = 200 을 만족하는 경우가 요청을 정상적으로 보냈고, 응답을 정상적으로 받을 수 있는 경우이다.
• xhr.responseText 는 정상적으로 요청에 성공하고, 응답도 성공한 경우 응답쪽에서 보내온 내요을 출력하는 내용이다.
  • 말 그대로 response 응답 Text 텍스트

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


	function helloToServer(){
		//
		var txt = $("#txt1").val();
		var params = "?txt="+txt;
		
		// xhr 객체 선언
		var xhr = new XMLHttpRequest();
		// 보내는 방식, 보내는 url, 비동기화 여부
		xhr.open("POST", "./test.jsp"+params, true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){ // xhr 의 상태
				//console.log("ajax OK")
				
				if(xhr.status == 200){ // http 응답이 200 이면
					//alert("OK : "+xhr.responseText)
					$("#div").html(xhr.responseText)
					
				}
			}
		}
		
		xhr.send();
	}
  

 

 

응답 JSP

<%@page import="vo.DeptVO"%>
<%@page import="dao.DeptDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 앞단에서 params 로 넘어온 파라미터 정보를 확인
	String txt = request.getParameter("txt");
	// out.println("<h1>"+txt+" 님 안녕하세요</h1>");
	if(txt != null){
		// DAO 를 이용해서 정보를 VO 에 저장
		int no = Integer.parseInt(txt);
		DeptDAO dao = new DeptDAO();
		DeptVO vo = dao.selectOne(no);
		
		// 출력!! 아래 out.println 가 바로 ajax 에서 응답으로 받게되는 response.Text 가 된다
		out.println("<h1>"+no+" : "+vo.getDname()+" : "+vo.getLoc()+"</h1>");
	}

%>

---

JQuery 로 Ajax 통신하기

• 사실 Jquery 로 ajax 통신하는 것은 몇 번인가 사용했었다. 위에 것보다 훨~씬 쉽다
• JQuery ajax 는 이전에 앞서 적었던 JS 로 짜는 것보다 훨~~씬 간단하다.
• 딱 5가지만 기억하면 된다 ⇒ success 와 error 까지는 기억하자!!
  • type : 보내는 방식
  • url : 데이터를 보내는 주소
  • data : 보내려는 데이터 ⇒ “id” : “userid” 처럼 json 형식으로 보내는게 좋다
    • json 형태로 보내면 받는쪽에서는 파라미터에서 넘어온 값처럼 인식하고, jsp 에서는 getParameter(”파라미터명”) 을 사용할 수 있다
  • dataType : 응답 데이터 형식
  • async : 비동기여부 ⇒ true, false
  • success : ajax 통신 성공 시 실행 할 함수, 참고로 해당 매개변수에는 ajax 를 통해서 응답받은 데이터가 들어온다
  • error : ajax 통신 실패시 실행할 함수
  • complete : 성공 실패에 상관없이 무조건 실행할 함수
  • beforeSend : ajax 통신 보내기전에 실행할 함수
• 아래 코드를 보자면 get 방식으로 데이터를 보내고, getJSON.jsp 에 전달한다. 비동기화로 데이터를 보내고, 보내는 데이터는 id 와 pw 이다. 마지막으로 html 로 데이터를 받는다.
• success 함수로 response 전달받는 데이터, http 코드, 요청한 데이터를 순서대로 alert 을 띄운다
• beforeSend 함수는 html 에 있는 이미지를 fadeOut 한다
• complete 함수는 html 에 있는 이미지를 fadeIn 한다.

<script>
	$(function(){
		$("#img").on("click", function(){
			var $img = $("#img");
			
			$.ajax({
				type: "GET", // GET, POST
				url: "getJSON.jsp", // 데이터를 전달할 url
				async : true, // 비동기화 동작 여부
				data : {"id":"aaa", "pw":"bbb"}, // 전달할 데이터
				dataType: "html", // 전달받을 데이터 타입
				
				beforeSend: function(){ // ajax 통신 시작 전
					$img.fadeOut(2000)
				},
				success : function(response, status, request){
					alert("success")
					alert("response : "+response);
					alert("status : "+status);
					alert("request : "+request);
					
					$img.css("width", "400px")
						.css("height", "400px")
				},
 				error : function(){ // 에러 발생시
					
				},
				complete: function(){ // ajax 통기 끝났을 때
					$img.fadeIn(2000)
				}
			})
		})
	})
</script>

---

중복체크 예제로 보는 AJAX

- 버튼을 눌렀을 때 중복체크

• 중복 검사 버튼을 눌렸을 때 ajax 통신이 실행되고, 아이디칸에 적은 값을 보내주고 그 값을 받아온다. 이때  success 함수의 매개변수에 응답보내준 값이 들어온다. 즉 success : function(data) 일 때 data 가 ajax 보낸곳에서 받아온 값 인 것이다.
• 그 후 data 의 값에 따라서 중복 여부를 확인 후 div 에 내용을 출력한다.

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(function(){

		// 버튼 누를 필요 없이 실시간 이벤트
		$("#id").on("keyup", function(){
			var $checkID = $("#id").val();
			var params = "?id="+$checkID;
			
			var $msg = $("#msg");

			//console.log($checkID);

			if($checkID == ""){
				console.log("아이디 없음")
				return;
			}
			
			$.ajax({
				type : "POST",
				url: "./checkid.jsp",
				data : { "id" : $checkID },
				dataType : "html",
				async : true,
				success : function(data){
					console.log("data : "+data)
					if(data.trim() == "true"){
						$msg.html("<h4>아이디가 이미 존재합니다</h4>");
					}else{
						$msg.html("<h4>사용가능한 아이디입니다</h4>")
					}
				}
			})
		})
	})
</script>
<style>
	* {
		margin : auto;
	}
</style>
</head>
<body>
<h1><center>회원 가입</center></h1>
<form action="registerOk.jsp" method="get">
	ID: <input type="text" name="id" id="id">
	<input type="button" id="idcheck" value="중복확인"><span id="msg"></span>
	<br>

	이름: <input type="text" name="name">
	<br>

	비민번호: <input type="password" name="passwd">
	<br>

		<center>
			<input type="submit" value="가입하기">
			<input type="button" value="취소하기">
		</center>
	</form>
	
	
</body>
</html>

 

 

 

- 키보드 입력에 따른 실시간 중복 체크

• 실시간 중복 체크도 ajax 에 관련된 방식은 동일하다. 값을 보내고, 받아온 값을 data 에 넣고 그 값에 따라서 내용을 div에 출력한다.
• 버튼을 누르는 방식과 가장 큰 차이점이 바로 keyup 메서드에 따라서 ajax 가 실행된다는 것이다. keyup 은 키보드가 눌렸다가 땔 때 - key 가 release 될 때 - 실행된다. 이 때문에 id 를 입력하는 칸에 내가 문자를 적을 때마다 ajax 가 실행되고 결과가 실시간으로 div 영역에 출력된다.

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(function(){
		
		// 버튼 누를 필요 없이 실시간 이벤트
		$("#id").on("keyup", function(){
			var $checkID = $("#id").val();
			var params = "?id="+$checkID;
			
			var $msg = $("#msg");

			//console.log($checkID);

			if($checkID == ""){
				console.log("아이디 없음")
				return;
			}
			
			$.ajax({
				type : "POST",
				url: "./checkid.jsp",
				data : { "id" : $checkID },
				dataType : "html",
				async : true,
				success : function(data){
					console.log("data : "+data)
					if(data.trim() == "true"){
						$msg.html("<h4>아이디가 이미 존재합니다</h4>");
					}else{
						$msg.html("<h4>사용가능한 아이디입니다</h4>")
					}
				}
			})
		})
	})
</script>
<style>
	* {
		margin : auto;
	}
</style>
</head>
<body>
<h1><center>회원 가입</center></h1>
<form action="registerOk.jsp" method="get">
	ID: <input type="text" name="id" id="id">
	<input type="button" id="idcheck" value="중복확인"><span id="msg"></span>
	<br>

	이름: <input type="text" name="name">
	<br>
	
	비민번호: <input type="password" name="passwd">
	<br>
		<center>
			<input type="submit" value="가입하기">
			<input type="button" value="취소하기">
		</center>
	</form>
	
	
</body>
</html>

 

실행 결과

여기에 색깔만 입히면 멋있게 될듯!

 

- AJAX JSP

• 이 JSP 의 역할은 앞에서 AJAX 로 받은 데이터를 갖고 DAO 를 이용해서 DB에 해당 ID 가 있는지 없는지 중복체크 후 그 결과를 다시 앞으로 보내주는 역할을 한다.
• 쉽게 이야기하자면 DB 작업을 해주는 DAO 와 앞쪽의 프론트 단을 유기적으로 연결하고 값을 전달하는 역할을 해준다.

<%@page import="dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("id");
	String result = "";
	
	if(id != null){
		MemberDAO dao = new MemberDAO();
		
		result = dao.isExists(id);
	}
%>
<%=result %>

---

- Reference

AJAX + springBoot + 실시간 아이디 중복검사!

https://terianp.tistory.com/118

SpringBoot 를 사용한 실시간 아이디 중복 검사(feat.ajax, jsp)

 

 

 

https://www.zerocho.com/category/HTML&DOM/post/594bc4e9991b0e0018fff5ed

https://www.zerocho.com/category/HTML&DOM/post/594bc4e9991b0e0018fff5ed

 

https://velog.io/@cocodori/ServletJSP%EC%97%90%EC%84%9C-Ajax-%EC%82%AC%EC%9A%A9

Servlet/JSP에서 Ajax 사용

[Javascript] AJAX 기본 : XMLHttpRequest를 통한 비동기 호출

[Javascript] AJAX 기본 : XMLHttpRequest를 통한 비동기 호출

https://rustywhite404.github.io/spring,/springboot,/ajax/2021/03/17/AjaxLogin/