Ajax 활용

woom·2023년 1월 11일
ajax

AJAX

목록 보기
3/5
post-thumbnail

🌼 1. 회원가입

  • DB연동 시 필요

  1. 라이브러리 : ojdbc11.jar (oracle 서버에 접속 가능한 driver 제공)

  2. meta-inf의 context.xml (oracle driver 에 있는 connection pool 생성)

  3. JdbcDAO 생성 (JDBC 기능 구현)

    • DataSource 객체로부터 Connection 객체를 제공받아 반환하는 메소드
    • 매개변수로 JDBC 관련 객체를 제공받아 제거하는 메소드

📌 ajax_member table 생성

create table ajax_member(id varchar2(20) primary key, passwd varchar2(50), name varchar2(50), email varchar2(100));

📕 AjaxMemberDTO

package xyz.itwill.dto;

public class AjaxMemberDTO {
	private String id;
	private String passwd;
	private String name;
	private String email;
	
	public AjaxMemberDTO() {
		// TODO Auto-generated constructor stub
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
	
	
}

📕 AjaxMemberDAO

  1. 회원정보를 전달받아 AJAX_MEMBER 테이블에 삽입하고 삽입행의 갯수를 반환하는 메소드

  2. 아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 해당 아이디의 회원정보를 검색하여 반환하는 메소드



package xyz.itwill.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import xyz.itwill.dto.AjaxMemberDTO;

public class AjaxMemberDAO extends JdbcDAO {
	private static AjaxMemberDAO _dao;
	
	private AjaxMemberDAO() {
		// TODO Auto-generated constructor stub
	}
	
	static {
		_dao=new AjaxMemberDAO();
	}
	
	public static AjaxMemberDAO getDAO() {
		return _dao;
	}
	
	//회원정보를 전달받아 AJAX_MEMBER 테이블에 삽입하고 삽입행의 갯수를 반환하는 메소드
	public int insertAjaxMember(AjaxMemberDTO ajaxMember) {
		Connection con=null;
		PreparedStatement pstmt=null;
		int rows=0;
		try {
			con=getConnection();
			
			String sql="insert into ajax_member values(?,?,?,?)";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, ajaxMember.getId());
			pstmt.setString(2, ajaxMember.getPasswd());
			pstmt.setString(3, ajaxMember.getName());
			pstmt.setString(4, ajaxMember.getEmail());
			
			rows=pstmt.executeUpdate();
		} catch (SQLException e) {
			System.out.println("[에러]insertAjaxMember() 메소드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return rows;
	}
	
	//아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 해당 아이디의 회원정보를 검색하여 반환하는 메소드
	public AjaxMemberDTO selectAjaxMember(String id) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		AjaxMemberDTO ajaxMember=null;
		try {
			con=getConnection();
			
			String sql="select * from ajax_member where id=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, id);
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				ajaxMember=new AjaxMemberDTO();
				ajaxMember.setId(rs.getString("id"));
				ajaxMember.setPasswd(rs.getString("passwd"));
				ajaxMember.setName(rs.getString("name"));
				ajaxMember.setEmail(rs.getString("email"));
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectAjaxMember() 메소드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt, rs);
		}
		return ajaxMember;
	}
}

💡 복잡한 sql 작성시 참고

  • sql문이 길어저 + 로 결합시 띄어쓰기 하나로 에러 발생 가능성

 String sql = "a "
+"b"
  • 이를 방지하기 위해 StringBuffer를 이용해 결합 가능
StringBuffer sql;
sql.append("a");
sql.append("b");

📙 회원가입 form

  • 회원정보를 입력받기 위한 JSP 문서

  • [회원가입] 태그를 클릭한 경우 form 태그를 이용하여 회원정보 삽입페이지(member_join_action.jsp)을 POST 방식으로 요청하여 이동

    • 사용자 입력값(회원정보) 전달

  • 회원정보 삽입페이지 요청 전 사용자 입력값에 대한 검증

    • 입력검증, 형식검증, 중복검증(AJAX) 등

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<style type="text/css">
.title {
	width: 100px;
	padding-right: 10px;
	text-align: center;
	font-weight: bold;
}
.input {
	width: 200px;
}
.message {
	width: 500px;
	color: red;
}
.msg {
	display: none;
}
#btn {
	text-align: center;
}
</style>
</head>
<body>
	<h1>회원가입</h1>
	<hr>
	<form action="member_join_action.jsp" method="post" id="joinForm">
	<table>
		<tr>
			<td class="title">아이디</td>
			<td class="input"><input type="text" name="id" id="id"></td>
			<td class="message">
				<span id="idNullMsg" class="msg idMsg">아이디를 입력해 주세요.</span>
				<span id="idValidMsg" class="msg idMsg">아이디를 형식에 맞게 입력해 주세요.</span>
				<span id="idDuplMsg" class="msg idMsg">이미 사용중인 아이디입니다.</span>
			</td>
		</tr>
		<tr>
			<td class="title">비밀번호</td>
			<td class="input"><input type="password" name="passwd" id="passwd"></td>
			<td class="message">
				<span id="passwdNullMsg" class="msg">비밀번호를 입력해 주세요.</span>
				<span id="passwdValidMsg" class="msg">비밀번호를 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이름</td>
			<td class="input"><input type="text" name="name" id="name"></td>
			<td class="message">
				<span id="nameNullMsg" class="msg">이름을 입력해 주세요.</span>
				<span id="nameValidMsg" class="msg">이름을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이메일</td>
			<td class="input"><input type="text" name="email" id="email"></td>
			<td class="message">
				<span id="emailNullMsg" class="msg">이메일을 입력해 주세요.</span>
				<span id="emailValidMsg" class="msg">이메일을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" id="btn"><button type="submit">회원가입</button></td> 
		</tr>
	</table>	
	</form>
	
	<script type="text/javascript">
	document.getElementById("id").focus();
	
	document.getElementById("joinForm").onsubmit=function() {
		//모든 메세지 관련 엘리먼트를 미배치
		var msgList=document.querySelectorAll(".msg");
		for(i=0;i<msgList.length;i++) {
			msgList.item(i).style.display="none";
		}
		
		//입력값 검증 결과를 저장하기 위한 변수
		// => false : 검증 실패(Submit 이벤트 취소), true : 검증 성공 
		var validResult=true;
		
		var id=document.getElementById("id").value;
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			document.getElementById("idNullMsg").style.display="block";
			validResult=false;
		} else if(!idReg.test(id)) {
			document.getElementById("idValidMsg").style.display="block";
			validResult=false;
		} else if(!idCheckResult) {//아이디가 중복된 경우
			document.getElementById("idDuplMsg").style.display="block";
			validResult=false;
		}
		
		var passwd=document.getElementById("passwd").value;
		var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
		if(passwd=="") {
			document.getElementById("passwdNullMsg").style.display="block";
			validResult=false;
		} else if(!passwdReg.test(passwd)) {
			document.getElementById("passwdValidMsg").style.display="block";
			validResult=false;
		}
		
		var name=document.getElementById("name").value;
		var nameReg=/^[가-힣]{2,10}$/g;
		if(name=="") {
			document.getElementById("nameNullMsg").style.display="block";
			validResult=false;
		} else if(!nameReg.test(name)) {
			document.getElementById("nameValidMsg").style.display="block";
			validResult=false;
		}
		
		var email=document.getElementById("email").value;
		var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\.[-a-zA-Z0-9]+)+)*$/g;
		if(email=="") {
			document.getElementById("emailNullMsg").style.display="block";
			validResult=false;
		} else if(!emailReg.test(email)) {
			document.getElementById("emailValidMsg").style.display="block";
			validResult=false;
		}
		
		return validResult;
	}
	//아이디 중복 검증에 대한 결과값을 저장하기 위한 전역변수 선언
	// => false : 아이디 사용 불가능, true : 아이디 사용 가능
	var idCheckResult=false;
	
	//아이디 입력태그에서 키보드를 누른 경우 호출되는 이벤트 처리 함수 등록
	document.getElementById("id").onkeyup=function() {
		//alert("Keyup Event");
		
		idCheckResult=false;
		
		var id=document.getElementById("id").value;
		if(id.length<6) return;
		
		//사용자로부터 입력받은 아이디의 중복 검사를 위한 웹프로그램(member_id_check.jsp)을 
		//AJAX 기능을 이용하여 요청하고 실행결과를 XML 문서로 응답받아 처리
		new xyz.itwill.Ajax("get", "member_id_check.jsp", "id="+id, function(xhr) {
			if(xhr.readyState==4) {
				if(xhr.status==200) {
					var xmlDoc=xhr.responseXML;
					
					var code=xmlDoc.getElementsByTagName("code").item(0).firstChild.nodeValue;
					
					if(code=="possible") {//아이디가 중복되지 않는 경우
						idCheckResult=true;	
					}
				} else {
					alert("에러코드 = "+xhr.status);
				}
			}
		});
	}
	</script>
</body>
</html>

📒 아이디 중복검사

  • 아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 기존 회원정보의 아이디와 비교하여 아이디 중복 검사 결과값을 XML 데이타로 응답하는 JSP 문서

<?xml version="1.0" encoding="utf-8"?>
<%@page import="xyz.itwill.dao.AjaxMemberDAO"%>
<%@page import="xyz.itwill.dto.AjaxMemberDTO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id=request.getParameter("id");
	if(id==null || id.equals("")) {
		response.sendError(HttpServletResponse.SC_BAD_REQUEST);
		return;
	}
	
	//아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 해당 아이디의 회원정보를 검색하여 반환
	//하는 DAO 클래스의 메소드 호출
	// => 반환값 - null : 회원정보 미검색(아이디 사용 가능) 
	// => 반환값 - AjaxMemberDTO 객체  : 회원정보 검색(아이디 사용 불가능 - 중복)
	AjaxMemberDTO ajaxMember=AjaxMemberDAO.getDAO().selectAjaxMember(id);
%>
<result>
	<% if(ajaxMember==null) {//검색된 회원정보가 없는 경우 - 아이디 사용 가능 %>
	<code>possible</code>
	<% } else {//검색된 회원정보가 있는 경우 - 아이디 사용 불가능 %>
	<code>impossible</code>
	<% } %>
</result>

📙 회원가입 action

  • 회원정보를 전달받아 AJAX_MEMBER 테이블에 삽입하고 회원가입 출력페이지(member_join_result.jsp)로 이동하기 위한 URL 주소를 클라이언트에게 전달하는 JSP 문서

<%@page import="xyz.itwill.dao.AjaxMemberDAO"%>
<%@page import="xyz.itwill.dto.AjaxMemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	if(request.getMethod().equals("GET")) {
		response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED);
		return;
	}
	request.setCharacterEncoding("utf-8");
	
	String id=request.getParameter("id");
	String passwd=request.getParameter("passwd");
	String name=request.getParameter("name");
	String email=request.getParameter("email");
	
	AjaxMemberDTO ajaxMember=new AjaxMemberDTO();
	ajaxMember.setId(id);
	ajaxMember.setPasswd(passwd);
	ajaxMember.setName(name);
	ajaxMember.setEmail(email);
	
	AjaxMemberDAO.getDAO().insertAjaxMember(ajaxMember);
	
	response.sendRedirect("member_join_result.jsp");
%>

📙 회원가입 성공

  • 회원가입 메세지를 클라이언트에게 전달하는 JSP 문서
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<h1>회원가입 성공</h1>
	<hr>
	<p>회원가입을 축하합니다.</p>
</body>
</html>

🌼 2. 검색기능

📌 suggest table 생성

create table suggest(word varchar(50) primary key, url varchar2(100));
  
insert into suggest values('AJAX','http://www.itwill.xyz/');
insert into suggest values('AJAX 예제','http://www.itwill.xyz/');
insert into suggest values('AJAX 프로그래밍','http://www.itwill.xyz/');
insert into suggest values('AJA','http://www.itwill.xyz/');
insert into suggest values('자바','https://www.oracle.com/');
insert into suggest values('자바교재','http://www.itwill.xyz/');
insert into suggest values('자장가','http://www.itwill.xyz/');
insert into suggest values('자유','http://www.itwill.xyz/');
insert into suggest values('Spring','https://spring.io/');
insert into suggest values('Spring Framework','https://spring.io/');
insert into suggest values('Servlet','https://www.servlets.com/');
insert into suggest values('네이버','https://www.naver.com/');
insert into suggest values('다음','https://www.daum.net/');
insert into suggest values('구글','https://www.google.com/');
commit;
select * from suggest;

select rownum,temp.* from (select * from suggest where upper(word) like '%'||upper('')||'%' 
    order by word) temp where rownum<=10;

📕 SuggestDTO

package xyz.itwill.dto;

public class SuggestDTO {
	private String word;
	private String url;
	
	public SuggestDTO() {
		// TODO Auto-generated constructor stub
	}

	public String getWord() {
		return word;
	}

	public void setWord(String word) {
		this.word = word;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	
	
}

📕 SuggestDAO

  1. 검색어를 전달받아 SUGGEST 테이블에서 해당 검색어가 포함된 제시어 관련 정보를 모두 검색하여 반환하는 메소드


package xyz.itwill.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import xyz.itwill.dto.SuggestDTO;

public class SuggestDAO extends JdbcDAO {
	private static SuggestDAO _dao;
	
	private SuggestDAO() {
		// TODO Auto-generated constructor stub
	}
	
	static {
		_dao=new SuggestDAO();
	}
	
	public static SuggestDAO getDAO() {
		return _dao;
	}
	
	//검색어를 전달받아 SUGGEST 테이블에서 해당 검색어가 포함된 제시어 관련 정보를 모두 
	//검색하여 반환하는 메소드
	public List<SuggestDTO> selectSuggestList(String keyword) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		List<SuggestDTO> suggestList=new ArrayList<>();
		try {
			con=getConnection();
			
			String sql="select rownum,temp.* from (select * from suggest where upper(word) "
				+ "like '%'||upper(?)||'%' order by word) temp where rownum<=10";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, keyword);
			
			rs=pstmt.executeQuery();
			
			while(rs.next()) {
				SuggestDTO suggest=new SuggestDTO();
				suggest.setWord(rs.getString("word"));
				suggest.setUrl(rs.getString("url"));
				suggestList.add(suggest);
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectSuggestList() 메소드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt, rs);
		}
		return suggestList;
	}
}

📙 검색 form

  • 검색어를 입력받아 검색어가 포함된 제시어를 클라이언트에게 전달하는 JSP 문서 (keyword 입력받아 url제공)

  • 검색어가 입력될 경우 suggest_two.jsp 문서를 AJAX 기능으로 요청하여 검색어가 포함된 제시어 관련 정보를 XML 문서로 응답받아 출력되도록 처리

										↓   ↓   ↓


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<style type="text/css">
#keyword {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 300px;
	font-size: 16px;
}
#suggest {
	position: absolute;
	top: 120px;
	left: 10px;
	width: 300px;
	border: 1px solid black;
	cursor: pointer;
	font-size: 16px;
	z-index: 999;
	background: rgba(255,255,255,1);
	display: none;	
}
#choice {
	position: absolute; 
	top: 150px;
	left: 10px;	
}
</style>
</head>
<body>
	<h1>제시어 기능</h1>
	<hr>
	<div>
		<%-- 검색어를 입력받기 위한 태그 --%>
		<input type="text" id="keyword">
		
		<%-- 제시어를 제공받아 출력하기 위한 태그 --%>
		<div id="suggest">
			<div id="suggestList"></div>
		</div>
		
		<%-- 선택된 제시어 관련 정보를 출력하기 위한 태그 --%>
		<div id="choice"></div>
	</div>
	
	<script type="text/javascript">
	document.getElementById("keyword").focus();
	
	document.getElementById("keyword").onkeyup=function() {
		var keyword=this.value;
		//alert(keyword);
		
		if(keyword=="") {
			document.getElementById("suggest").style="display: none;";
			return;
		}
		
		new xyz.itwill.Ajax("post", "suggest_two.jsp", "keyword="+keyword, function(xhr) {
			if(xhr.readyState==4) {
				if(xhr.status==200) {
					var xmlDoc=xhr.responseXML;
					
					var code=xmlDoc.getElementsByTagName("code").item(0).firstChild.nodeValue;
					
					if(code=="success") {
						var data=xmlDoc.getElementsByTagName("data").item(0).firstChild.nodeValue;
						
						var suggestList=JSON.parse(data);
						
						var html="";
						for(i=0;i<suggestList.length;i++) {
							html+="<a href=\"javascript:selectSuggest('"+suggestList[i].word
								+"','"+suggestList[i].url+"');\">"+suggestList[i].word+"</a><br>";
						}
						document.getElementById("suggestList").innerHTML=html;
						
						document.getElementById("suggest").style="display: block;";
					} else {
						document.getElementById("suggest").style="display: none;";
					}
				} else {
					alert("에러코드 = "+xhr.status);
				}
			}
		});
	}
	
	function selectSuggest(word, url) {
		//alert(word+" = "+url);
		
		document.getElementById("keyword").value=word;//입력태그의 입력값 변경
		document.getElementById("choice").innerHTML="<a href="+url+">"+word+"</a>";//태그 변경
		document.getElementById("suggest").style="display: none;";
	}
	</script>
</body>
</html>

📒 xml 데이터

  • 검색어를 전달받아 SUGGEST 테이블에서 검색어가 포함된 제시어 관련 정보를 검색하여 XML데이타로 응답하는 JSP 문서

<?xml version="1.0" encoding="utf-8"?>
<%@page import="xyz.itwill.dao.SuggestDAO"%>
<%@page import="xyz.itwill.dto.SuggestDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String keyword=request.getParameter("keyword");
	
	List<SuggestDTO> suggestList=null;
	if(keyword!=null && !keyword.equals("")) {//전달값(검색어)이 있는 경우
		suggestList=SuggestDAO.getDAO().selectSuggestList(keyword);
	}
%>
<result>
	<% if(suggestList!=null && !suggestList.isEmpty()) {//검색된 제시어 관련 정보가 있는 경우 %>
	<code>success</code>
	<data><![CDATA[
		[
		<% for(int i=0;i<suggestList.size();i++) { %>
			<% if(i>0) { %>,<% } %>
			{"word":"<%=suggestList.get(i).getWord()%>","url":"<%=suggestList.get(i).getUrl()%>"}			
		<% } %>	
		]
	]]></data>
	<% } else {//검색된 제시어 관련 정보가 없는 경우 %>
	<code>empty</code>
	<% } %>
</result>
profile
woom
Study Log 📂
이전 포스트

XML (인터넷 환경에서 구조화된 문서를 전송 가능하도록 설계된 표준 마크업 언어)

다음 포스트

jQuery를 이용한 Ajax

0개의 댓글