728x90
반응형
[AJAX]
- 자바스크립트 라이브러리 중 하나
- 자바스크립트를 통해서 비동기처리로 서버에 데이터를 요청하여
필요한 데이터를 받아와 전체 페이지를 새로 고치지 않고 변경이 필요한 페이지 부분만 고치는 기법 - AJAX의 주목적은 화면 전환 없이 클라이언트와 서버간의 정보를 교환하기 위함
- ex) 아이디 중복검사, 인증, 좋아요, 추천/비추천, 찜하기
ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 아이디 중복검사 실습</title>
<!-- jquery를 불러오기위해서 CDN방식으로 선언 -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div id="box">
<input type="text" name="mid" id="mid">
<button class="btn" onclick="check();">중복검사</button>
<div id="result"></div>
</div>
<script type="text/javascript">
function check(){
var mid =$("#mid").val();//class 불러올경우 $(".mid")
$.ajax({
type: 'GET', // 어떤 방식으로 보낼건지 GET인지 POST요청인지
url: '${pageContext.request.contextPath}/check.do?mid='+mid, //자신이 어떤 요청을 할지 -> mid(V에서 입력한 값)라는 변수만들어서 사용자가 입력한 값을 확보한 상태
// /check.do로 경로설정해도 되지만, 톰캣에 들어가는 프로젝트 이름을 같이 넣어주는게 좋음 // DB한테 물어볼예정 "mid라는 값이 DB에 이미 있어?" => DAO(M) 거쳐야함
// C가 작업을 할 차례구나!! "서블릿"
//data: {mid:mid}, //post방식일 경우 사용
success : function(result){
//result는 String
// JS - 1 : 모든 데이터가 객체
// JS - 2 : 동적타이핑(즉각적으로 자동 형변환)
console.log("로그1 ["+result+"]");
if(result==1){// 사용가능
$("#result").text("사용가능한 아이디입니다!");
$("#result").css("color", "blue");
}
else{//사용중이라 쓸수없는 아이디
$("#result").text("이미 사용중인 아이디입니다!");
$("#result").css("color", "red");
}
},
error: function(request, status, error){ // 서블릿에서 에러 발생 시
console.log("code: "+request.status);
console.log("message: "+request.responseText);
console.log("error: "+error);
}
});
}
</script>
</body>
</html>Check.java (서블릿 파일)
package test;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Check
*/
@WebServlet("/check.do")
public class Check extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Check() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// get으로 요청했기때문에 여기에 로직을 만들어도되고 doPOST(request, response);라고하고 post에 로직 작성해도 상관없음!
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("로그1 ["+request.getParameter("mid")+"]");
TestDAO dao = new TestDAO();
TestVO vo = new TestVO();
vo.setMid(request.getParameter("mid")); //setmid하려면 param으로 부터 mid 받아와야함
int result=dao.check(vo); //인자로 vo롤 쓰기 때문에 vo / output이 int이기 떄문에 result도 int
//ArrayList<Integer> datas = new ArrayList<Integer>();
//datas.add(1);
//datas.add(23);
//datas.add(4);
//요청했던 곳으로 result값을 보낼예정
response.setContentType("application/x-json; charset=UTF-8");//
//response.getWriter().write(datas.toString());//결과값을 작성해서 보냄 - result가 int라서 string으로 바꿔서 보냄
response.getWriter().write(result+"");
}
}TestVO
package test;
public class TestVO {
private String mid;
public String getMid() {
return mid;
}
public void setMid(String mid) {
this.mid = mid;
}
@Override
public String toString() {
return "TestVO [mid=" + mid + "]";
}
}TestDAO
package test;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class TestDAO {
Connection conn;
PreparedStatement pstmt;
final private String sql="SELECT * FROM TEST WHERE MID=?";
public int check(TestVO vo) { // 1, 0, -1 output을 int로 (상황에 따라 output이 달라질 수 있음)
conn=JDBCUtil.connect();
try {
pstmt=conn.prepareStatement(sql);
pstmt.setString(1, vo.getMid());
ResultSet rs=pstmt.executeQuery();
if(rs.next()) { // 해당 데이터가 있니? 아이디가 중복이니?
return 0; // 아이디 중복 발생
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
// return -1; 에러상황 보고 가능
}finally {
JDBCUtil.disconnect(pstmt, conn);
}
return 1; // 아이디 중복 아님!
}
}728x90
반응형
'JSP' 카테고리의 다른 글
| [JSP] FrontController, MVC 패턴 활용 게시판 사이트 만들기 (0) | 2022.08.29 |
|---|---|
| [JSP] 초기화 매개변수, 리스너, 필터 (0) | 2022.08.25 |
| [JSP] FrontController 개념 (0) | 2022.08.24 |
| [JSP] 트랜잭션 commit(), rollback() (0) | 2022.08.18 |
| [JSP] 리스너 클래스, JSTL (0) | 2022.08.18 |
