FireDrago

[jQuery] 제이쿼리 Ajax 사용하기 본문

프로그래밍/JavaScript

[jQuery] 제이쿼리 Ajax 사용하기

화이용 2023. 7. 18. 17:37

Ajax 

  • Ajax (비동기 자바스크립트  + XML) 의 합성어를 뜻한다. 
  • 페이지의 이동없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않는 비동기 요청이 가능하다.
    이와달리 JSP 혹은 Servlet 에서 처리를 요청하는 경우 서버의 응답이 오면 페이지가 바뀌게 되다.

제이쿼리 AJAX 사용하기

  1. 제이쿼리를 사용하기위한 Script 태그를 삽입한다. 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  2.  Ajax를 사용하기 위해 $ 기호 다음에 ajax를 써주고 속성에 대한 값을 써준다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$.ajax({
	type: "post 또는 get",    // 전달방식
    async: "true 또는 false", // 비동기, 동기 방식
    url: "요청할 URL",
    data: {서버로 전송할 데이터},
    dataType: "서버에서 전송받을 데이터형식",
    success: {
    	// 정상 요청시 시행
    },
    error: function(xhr, statust, error){
    	// 오류 발생시 시행
    },
    complete: function(data,tetStatus){
    	// 작업 완료 후 처리
    }
});
</script>

제이쿼리 Ajax 활용 (ID 중복체크)

  1. ajax3.html 에서 ajax 요청을 통해 입력된 id를 Servlet으로 전달한다.
  2. MemberServlet 컨트롤러는 전달받은 id를 데이터베이스와 연결된 MemberDAO의 overlappedID( )의 인자로 전달
  3. MemberDAO는 overlappedID 메서드를 통해 데이터베이스에 입력된 id가 존재하는지 확인하고 존재하면 true , 
    없다면 false 값을 반환한다.
  4. 다시 ajax3.html로 돌아와서 true 면 사용할 수 없는 id, 
    false면 사용할 수 있는 id 임을 알린다.

 

ajax3.html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function fn_process() {
		var _id = $('#t_id').val();
		if (_id == '') {
			alert("ID를 입력하세요");
			return;
		}
		$.ajax({
			type : "post",
			async : true,
			url : "http://localhost:8080/pro16/mem",
			dataType : "text",
			data : {
				id : _id
			},
			success : function(data, textStatus) {
				if (data == 'usable') {
					$('#message').text("사용할 수 있는 ID입니다.");
					$('#btn_duplicate').prop("disabled", true);
				} else {
					$('#message').text("사용할 수 없는 ID입니다.");
				}
			},
			error : function(data, textStatus) {
				alert("에러가 발생했습니다.");
				
			},
			complete : function(data, textStatus) {
				//alert("작업을완료 했습니다");
			}
		});
	}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text" id="t_id" />
	<input type="button" id="btn_duplicate" value="ID 중복체크하기"
		onClick="fn_process()" />
	<br>
	<br>
	<div id="message"></div>
</body>
</html>

 

MemberServlet.java


@WebServlet("/mem")
public class MemberServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request,response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request,response);
	}
	protected void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		PrintWriter writer = response.getWriter();
		String id = (String)request.getParameter("id");
		System.out.println("id= "+id);
		MemberDAO memberDAO = new MemberDAO();
		boolean overlappedID = memberDAO.overlappedID(id);
		
		if (overlappedID == true) {
			writer.print("not_usable");
		} else {
			writer.print("usable");
		}
	}
}

 

MemberDAO


public class MemberDAO {
	private Connection con;
	private PreparedStatement pstmt;
	private DataSource dataFactory;

	public MemberDAO() {
		try {
			Context ctx = new InitialContext();
			Context envContext = (Context) ctx.lookup("java:/comp/env");
			dataFactory = (DataSource) envContext.lookup("jdbc/mySQL");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public boolean overlappedID(String id){
		boolean result = false;
		try {
			con = dataFactory.getConnection();
			String query = "select count(*) as result from t_member where id=?";
			System.out.println("prepareStatememt: " + query);
			pstmt = con.prepareStatement(query);
			pstmt.setString(1, id);
			ResultSet rs = pstmt.executeQuery();
			rs.next();
			String num =rs.getString("result");
			if (num.equals("1")) {
				result = true;
			} else {
				result = false;
			}
			pstmt.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return result;
	}
}

 

'프로그래밍 > JavaScript' 카테고리의 다른 글

[js] 페이지네이션 만들기  (0) 2024.06.18
[jQuery] Ajax 로 JSON 데이터 주고받기  (0) 2023.07.19
[JavaScript] 회원가입 필수입력  (0) 2023.06.18
[JavaScript] 장바구니 구현  (0) 2023.06.15
[JavaScript] 슬라이드 구현하기 (javascript)  (0) 2023.06.13
'프로그래밍/JavaScript' Related Articles more