티스토리 뷰

WEB/ajax

[ajax] ajax 기초

춘햄 2021. 6. 7. 17:57

우선 AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.

 

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

 

지금까지 공부한 jQuery 프레임워크에서 해당 비동기 통신을 지원하도록 ajax() 함수를 제공하기 때문에 해당 카테고리의 대부분의 예제는 jQuery를 사용하여 구현할 예정이다. 

 

그럼 빠른 이해를 위해 간단한 기초 예제로, 비동기 통신을 이용하여 아이디 중복 확인 기능을 구현해보자.

1. 우선, 데이터를 보낼 html 쪽에서 jQuery를 이용하여 비동기 데이터를 전송한다.

 

◎ 01_ajaxTest.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest.html</title>
	
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			
				jQuery 가 JSP 에게 데이터를 직접 전달 => ajax()
				ajax() : JSP 응답 성공 => done()
				ajax() : JSP 응답 실패 => fail()
				
			*/
			
			$('#idCheckBtn').click(function() {
				var input = $('#memberId');
				
				var request = $.ajax({
					url: "./ajaxCallTest.jsp", // 호출(요청) 대상
					method: "POST", // 전송 방식
					data: {
						memberId : input.val() // jsp가  읽어낼 파라미터명: 전송값 
					},
					dataType: "json"  // 응답받을 타입
				});
				
				// 응답에 성공했을 경우
				request.done(function(data) { 
					console.log(data);
					var result = data.result;
					
					if(result == "0") {
						alert("사용 가능한 아이디입니다.");
					} else {
						alert("중복된 아이디입니다");
					}
				}); 
				
				// 응답에 실패했을 경우
				request.fail(function(jqXHR, textStatus) {
					alert("request failed: " + textStatus);;
				})
				
			});
			
		});	
	</script>
</head>

	<!--
		문제1. 회원아이디 체크 폼과 확인 버튼을 만들고 확인을 눌렀을 경우 ajax를 통하여
		아이디 중복 확인을 할 수 있는 기능(ajaxCallTest.jsp)을 만들어주세요.
		단, 아이디는 임의의 값과 비교...(DB를 통해 조회한다고 가정~~)
	 -->
<body>
	<input type="text" id="memberId">
	<button type="button" id="idCheckBtn">중복확인</button>
</body>
</html>

2. 데이터를 받는 jsp쪽에서 데이터를 활용하도록 코드를 작성해줘야 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<% 	// ajaxCallTest.jsp

	//응답 요청 타입 설정
	response.setContentType("application/json");

	//반응 타입(브라우저 : inline or 팝업: attachment)	
	response.setHeader("Content-Disposiont", "attachment");
	
	//memberId를 ajaxTest.html에서 받는다.
	String memberId = request.getParameter("memberId");
	
	//Map타입으로 응답 데이터 저장
	Map<String, Object> map = new HashMap<String, Object>();

	//Gson을 할용하여 json 포맷방식으로 반환
	Gson gson = new Gson(); // google에서 만든 클래스

	//db에서 조회했다는 가정하에 조건 처리
	if(memberId.equals("id002") || memberId.equals("id005")) {
		map.put("result", "1"); 
	} else {
		map.put("result", "0");
	}
	
	// 반환
	out.println(gson.toJson(map));
	
	

%>

이렇게 두개의 파일을 작성해주고, html 파일을 run해주면,

위와 같이 비동기식 통신이 원활하게 되는 것을 확인할 수 있다.

아직은 조금 생소한 구조라 다른 예제를 몇 개 더 접해봐야 익숙해질 거 같다.

'WEB > ajax' 카테고리의 다른 글

[ajax] ajax 기초 예제 <select 배열을 이용한 예제>  (0) 2021.06.08
[ajax] ajax 기초 예제 <input에 따른 배열 생성>  (0) 2021.06.08
[ajax] 비동기 요청 & 응답 기본 형식 정리  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more