코딩/4-JSP & SERVLET

D02_session_async

tree0505 2025. 7. 7. 15:13
반응형
  • 비동기란? 
    • 웹에서 특별한 상황이 있다. 
    • 웹페이지가 있는데. 버튼이 여러개다. db를 다녀와야할 버튼이 
    • db를 다녀오면 초기화가 된다. 웹페이지에 있는 정보가 지워진다. 
    • db를 다녀와도 깜박이지 않아야 한다. 
    • 버튼을 누를때 페이지를 더 만드는 것이다. 
    • 프로그램을 더 켜는 거다. 
  • 회원가입은 이야기가 다르다. 
  • 비동기를 사용하는 상황 
    • 1. 현재 페이지에. db를 다녀오는 버튼이 여러개 있는 경우 . 
    • 2. 지워지면 안되는 내용이 있는 경우 
    • 그래서 게시판은 비동기를 사용할 필요가 없는것. 
    • 아이디 중복확인.
      • db에 다녀와서 있는지 없는지 확인하면 
      • 회원가입에 적은 내용들이 전부 사라지는 거다. 그래서 비동기가 필요한것  
      • 비동기를 사용하는 경우는 거의 드물다. 
  • 비동기 사용하는 법 
    • 1번. 제이쿼리 라이브러리 하기
    • 2번. 
      • $.ajax( ) ; 
        • 비동기 함수 
      • 옵션 넣기 
        • $.ajax( { 1, 2, 3, 4, 5 }); 
        • $.ajax ( { 
          • type : "post" ,
          • url : "url" , //다녀올 곳 
          • data : { 키 : 벨류 , 키 : 벨류 ,.... } //request 
          • success : function ( result) { } // 성공하면 이곳으로 들어온다. 
            • result에 url의 html이 담겨져서 들어옴 
          • error : function ( ) { } //실패하면 들어온다. 
            • 실패하면 alert ( " 실패 " ); 
        • }); 
  • D02_session_async
  • 01_비동기ajax
  • 01_testForm.jsp
<%@ 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>

  <style>
        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        #content-join {
            margin: 0 auto;
            width: 600px;
        }
        #title, #joinPro {
            text-align: center;
        }
    </style>
    
</head>
<body>
	
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>	
	<!-- 비동기 라이브러리 사용  -->
	
	<table id="content-join">
        <tr>
            <td colspan="3" id="title"><h2>테스트1</h2></td>
        </tr>
        <tr>
            <td rowspan="2">아이디</td>
            <td><input id="input-memberId" type="text" placeholder="아이디를 입력해주세요" value="test1234"></td>
            <td><button id="button-memberIdCheckPro">중복확인</button></td>
        </tr>
        <tr>
            <td id="msg-memberId" colspan="2"></td>
        </tr>
    </table>

    <script>  	
   		 /* 아이디 유효성 검사 */
           let inputMemberIdInput = (event) => {
               let $msgMemberId = document.querySelector("#msg-memberId");

               let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);
               if(regExp.test($inputMemberId.value)) {
                   $msgMemberId.innerHTML = "";
               } else {
                   $msgMemberId.innerHTML = "<span style='color:#F03F40; font-size:12px;'>6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합</span>";
               }
           }

           /* 아이디 중복검사 */
           let buttonMemberIdCheckProClick = (event) => {
               let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);

               if($inputMemberId.value == "") {
                   alert("아이디를 입력해주세요.");
                   $inputMemberId.focus();
               } else if(!regExp.test($inputMemberId.value)) {
                   alert("6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합");
                   $inputMemberId.value = "";
                   $inputMemberId.focus();
               } else {
                   idCheck = true;
                  	
                   $.ajax({
	   					type: "post",
	   					url: "01_testPro.jsp",
	   					data: {
	   						id: $inputMemberId.value
	   					},
	   					success: function(result) {  						
	   						console.log("result = " + result); // html 파일이 문자열로 넘어온다. 
	   						alert(result);
	   					},
	   					error: function() {
	   						alert("joinForm error");
	   					}
   					});	                                 
               }
           }     
           //--------------------------------------------------------------------------------------


           let $inputMemberId = document.querySelector("#input-memberId");
           $inputMemberId.addEventListener("input", inputMemberIdInput);

           let $buttonMemberIdCheckPro = document.querySelector("#button-memberIdCheckPro");
           $buttonMemberIdCheckPro.addEventListener("click", buttonMemberIdCheckProClick);
   	
    </script>
	
	
</body>
</html>
  • 01_testPro.jsp
<%@ 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>
</head>
<body>
	여기는 testForm 입니다.
</body>
</html>
  • 02_testForm.jsp
<%@ 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>
  <style>
        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        #content-join {
            margin: 0 auto;
            width: 600px;
        }
        #title, #joinPro {
            text-align: center;
        }
    </style>
    
    
</head>
<body>
	
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
			
	<table id="content-join">
        <tr>
            <td colspan="3" id="title"><h2>테스트2</h2></td>
        </tr>
        <tr>
            <td rowspan="2">아이디</td>
            <td><input id="input-memberId" type="text" placeholder="아이디를 입력해주세요" value="test1234"></td>
            <td><button id="button-memberIdCheckPro">중복확인</button></td>
        </tr>
        <tr>
            <td id="msg-memberId" colspan="2"></td>
        </tr>
    </table>

    <script>
    	
    		 /* 아이디 유효성 검사 */
            let inputMemberIdInput = (event) => {
                let $msgMemberId = document.querySelector("#msg-memberId");

                let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);
                if(regExp.test($inputMemberId.value)) {
                    $msgMemberId.innerHTML = "";
                } else {
                    $msgMemberId.innerHTML = "<span style='color:#F03F40; font-size:12px;'>6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합</span>";
                }
            }

            /* 아이디 중복검사 */
            let buttonMemberIdCheckProClick = (event) => {
                let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);

                if($inputMemberId.value == "") {
                    alert("아이디를 입력해주세요.");
                    $inputMemberId.focus();
                } else if(!regExp.test($inputMemberId.value)) {
                    alert("6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합");
                    $inputMemberId.value = "";
                    $inputMemberId.focus();
                } else {
                    idCheck = true;
                   	
                    $.ajax({
    					type: "post",
    					url: "02_testPro.jsp",
    					data: {
    						id: $inputMemberId.value
    					},
    					success: function(result) {
    						/*
    							html 이 통채로 넘어오기때문에 원하는 데이터를 잘 파싱해야한다. 
    						*/
    						
    						console.log(result);
    						
    						let str = '<p id="check">';
    						let length = str.length;
    						let startIndex = result.indexOf(str);
    						//<p id="check">여기의 <의 인덱스
    						// 자른것 
    						
    						//substr < 의 인덱스 + <p id="check"> 길이를 잘라내면 1, -1 찾아올 수 있다. 
    						let checkValue = result.substr(startIndex + length);
    						// 1, -1 이 들어온다. 
    						console.log("result = " + result);
    						console.log("length = " + length);
    						console.log("startIndex = " + startIndex);
    						console.log("checkValue = " + checkValue);
    						
    						// 아이디가 중복되면
    						if(checkValue.trim() === "-1") {
    							alert("중복된 아이디입니다.");
    							$inputMemberId.value = "";
    							$inputMemberId.focus();
    						} else {
    							alert("사용할 수 있는 아이디입니다.");
    							
    							
    						}
    						
    						
    					},
    					error: function() {
    						alert("joinForm error");
    					}
    				});	
                    
                    
                }
            }

         
            //--------------------------------------------------------------------------------------

            let idCheck = false;
            let emailCheck = false;

            let $inputMemberId = document.querySelector("#input-memberId");
            $inputMemberId.addEventListener("input", inputMemberIdInput);

            let $buttonMemberIdCheckPro = document.querySelector("#button-memberIdCheckPro");
            $buttonMemberIdCheckPro.addEventListener("click", buttonMemberIdCheckProClick);
    	
    </script>
	
	
</body>
</html>
  • 02_testPro.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	<%
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");		
		/*
			0 1 -1 등으로 원하는 결과를 체크한다. 
			우리는 아래 p태그로 확인할예정이며, 태그나 값은 자유로 설정한다. 
		*/
		int check = 1; 
		if(id.equals("test1234")){
			check = -1; //아이디가 있으면 -1 
		}else{
			check = 1;
		}
	%>    
	
	
<p id="check"><%= check %>
<!-- 확인용  -->
<!--<p id="check"> 을 잘라내는것   -->
  • 02_비동기회원가입
반응형

'코딩 > 4-JSP & SERVLET' 카테고리의 다른 글

D04_session_API => 01_통계  (3) 2025.07.09
D03_session_upload  (3) 2025.07.07
C22_dao_board_re  (0) 2025.07.03
C12_db_gisatest => 01_골프장  (1) 2025.06.30
C02_session_cart  (0) 2025.06.30

'코딩/4-JSP & SERVLET'의 다른글

  • 현재글D02_session_async

관련글

티스토리툴바