[Servlet] Ajax란? Ajax를 이용해서 이메일 중복검사하기

➰ Ajax란?

: JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식

- 전체 페이지를 갱신하지 않고 일부분만 업데이트 가능
- 사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공 가능
- ActiveX나 플러그인 프로그램 설치 없이 이용 가능
- JavaScript 방식, jQuery 방식으로 구현 가능

 

• XML : DB 연결 
• 동기 

• 비동기 : 바뀌는부분에 서버와 통신해서 수정한다 (화면의 일부분만 바뀌는 경우)

📍 자바스크립트는 사용하기 복잡하기 때문에 jQuery를 사용한다 

 

➰ jQuery방식 Ajax란

: - $.ajax( url [, settings] )  jQuery에 내장되어 있는 Ajax 통신을 위한 가장 기본적인 함수

→ URL은 무조건 있어야한다! 서버와 통신하려면 URL 주소가 있어야한다. 

 

---

1.js에서 jQuery 사용을 위해 signUp.jsp에서 jQuery 연결하기 

 

- 추가하는 방법 

https://releases.jquery.com/

jQuery CDN

- js 읽기전에만  jQuery 라이브러리 추가해주면된다! 

💡 js 보다 먼저 추가 해주기( 이유는 해석 순서 때문에!)

이메일 입력을 추가할때마다 콘솔에 요청이 계속 쌓여 부하가 계속된다. 

그래서, DB에 접근하는 부분만 Ajex를 사용해서 나머지는 동기 해당 부분은 비동기로 바꿔준다. 

$.ajax({K:V , K,V}) : jQuery ajax 기본형태
url은 필수 작성!

// 이메일 유효성 검사 

const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");

memberEmail.addEventListener("input", function () {

//입력이 되지 않은 경우 
if (memberEmail.value.trim().length == 0) {
    emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해주세요."
    emailMessage.classList.remove("confirm", "error")

    //유효하지 않은 상태임을 기록
    checkObj.memberEmail = false;
    return;
}

//입력된 경우 
const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;

if (regExp.test(memberEmail.value)) {


    // **************** 이메일 중복 검사(ajax) 진행 예정 ****************

    // $.ajax({K:V , K,V}) : jQuery ajax 기본형태

    // 입력된 이메일 == memberEmail.value
    $.ajax({
        url : "emailDupCheck", // 필수 속성 url
        // 현재 주소 : /community/member/signUp
        // 상대 주소 : /community/member/emailDupCheck

        data: { "memberEmail" : memberEmail.value},
        //date 속성 : 비동기 통신 시 서버로 전달할 값을 작성(JS 객체 형식)
        // -> 비동기 통신 시 input에 입력된 값을 
        //    "memberEmail"이라는 Key값(파라미터)으로 전달 

        type : "GET", //데이터 전달 방식 type > servlet으로 보내! (서버까지 다 처리!) > 응답용 스트림을 이용해서 result를 가지고 vs 다시와!


        success : function(result){
            // 비동기 통신 (ajax)가 오류 없이 요청/응답 성공한 경우
            // 매개변수 result : servlet에서 출력된 result 값이 담겨있음 

            //console.log(result);

            if(result==1){ //중복 O

                emailMessage.innerText = "이미 사용 중인 이메일 입니다.";
                emailMessage.classList.add("error");
                emailMessage.classList.remove("confirm");

                //유효한 상태임을 기록 (가입 못하도록 false!)
                checkObj.memberEmail = false;

            }else{ // 중복 X
                emailMessage.innerText = "사용 가능한 이메일 입니다.";
                emailMessage.classList.add("confirm");
                emailMessage.classList.remove("error");

                //유효한 상태임을 기록 
                checkObj.memberEmail = true;
            }


        },
        error :function(){
            // 비동기 통신 (ajax) 중 오류가 발생한 경우 
            console.log("에러발생");
        }

    });



} else {
    emailMessage.innerText = "유효하지 않은 이메일 형식입니다.";
    emailMessage.classList.add("error");
    emailMessage.classList.remove("confirm");

    //유효하지 않은 상태임을 기록
    checkObj.memberEmail = false;

}

})

 

2. 자바에 가서 vs에서 작성한 url 처리해줄 Servlet 만들기 

package edu.kh.community.member.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import edu.kh.community.member.model.service.MemberService;

@WebServlet("/member/emailDupCheck")
public class EmailDupCheckServlet extends HttpServlet{

	//이메일 중복 검사 (비동기 통신)
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//비동기 통신으로 전달 된 파라미터(data 속성인 Key 값) 얻어오기 
		String memberEmail = req.getParameter("memberEmail");
		
		try {
			//이메일 중복 검사 서비스 호출 후 반환 받기 
			MemberService service = new MemberService();
			
			int result = service.emailDupCheck(memberEmail);
			
			//보통 동기식 코드 작성 시 
			//forward 또는 redirect를 이용해서 새로운 페이지가 보이게 동작함
			
			//*** 비동기 통신 시 응답은 화면이 아닌 데이터(String, XML, JSON, int, ...)
			// -> 응답용 스트림을 이용해서 단순데이터 전달만 하면된다. 
			
			//응답 스트림을 이용해서 result를 출력 ..작성한 것을 우리가 가져온 내용을 가지고 출력하겠다. 
			resp.getWriter().print(result);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
	}
	
}

3. service 만들기 

/**이메일 중복 검사 서비스 
	 * @param memberEmail
	 * @return result
	 */
	public int emailDupCheck(String memberEmail) throws Exception{
		
		//DBCP에서 만들어둔 커넥션 얻어오기
		Connection conn = getConnection();
		
		int result = dao.emailDupCheck(conn,memberEmail);
		
		close(conn);
		
		return result;
	}

4. dao 만들기 

/**이메일 중복 검사 
 * @param conn
 * @param memberEmail
 * @return result
 * @throws Exception
 */
public int emailDupCheck(Connection conn, String memberEmail) throws Exception{

    int result = 0;

    try {

        //SQL 얻어오기 
        String sql = prop.getProperty("emailDupCheck");
        // pstmt 생성
        pstmt = conn.prepareStatement(sql);
        // 위치 홀더에 알맞은 값 세팅 
        pstmt.setString(1, memberEmail);

        //SQL(SELECT)수행 후 결과 반환 받기 
        rs =pstmt.executeQuery();

        //rs.next()로 조회 결과 확인(한줄이면 if / 여러줄이면 while) 
        if(rs.next()){
            result = rs.getInt(1); //1번 컬럼 결과를 result에 대입 
        }

    }finally {
        close(rs);
        close(pstmt);
    }

    return result;
}

5. xml (DB에서 비교해올 내용 적기)

<!-- 이메일 중복 검사 -->
<entry key="emailDupCheck">
    SELECT COUNT(*) FROM MEMBER
    WHERE MEMBER_EMAIL = ?
    AND SECESSION_FL = 'N'
</entry>