[Ajax] Chap 2. Ajax 구현

jQuery Ajax

• 크로스브라우징의 문제를 jQuery가 알아서 해결해 줌
  • 크로스브라우징 : 다양한 브라우저들이 같은 화면을 동일하게 보여주는 것
• jQuery Ajax에서 가장 중요한 API : "$.ajax"

👨‍🎓 $.ajax의 기본 문법

jQuery.ajax( [settings ] );

ex)
$.ajax({
  속성1 : 값1
  속성2 : 값2
  속성3 : 값3 ...
});

참고 API : http://api.jquery.com/jquery.ajax/

Ajax 주요 속성

속성	의미
url	데이터를 전송할 URL
type	서버로 전송하는 메소드의 타입(POST,GET)
data	서버에 전송할 데이터, key/value 형식의 객체(json)
dataType	서버가 리턴하는 데이터 타입 (xml, json, script, html)
success	ajax통신에 성공했을 때 호출될 이벤트 핸들러
error	ajax통신에 실패했을 때 호출될 이벤트 핸들러
complete	ajax통신 시 무조건 호출될 이벤트 핸들러

참고 API : http://api.jquery.com/jquery.ajax/

---

1. 버튼 클릭시 전송값을 서버로 전송하고, 서버에서 출력

ajax.jsp

	
<input type="text" id="userId" placeholder="ID를 입력해보세요"><br>
<input type="password" id="userPwd" placeholder="PW를 입력해보세요"><br>
<button id="btn">전송</button><br>
	
<script>
	$('#btn').click(function(){
			
		// 서버로 전송할 데이터 찾기
		var userId=$('#userId').val();
		var userPwd=$('#userPwd').val();
			
		if(userId.length==0 || userPwd.length==0){
			alert('데이터는 무조건 입력하셔야 합니다.');
			return;
		}else{
				
			$.ajax({
				url : "/ajax/ajax1.do",
				data :{"userId":userId, "userPwd":userPwd},
				type : "get",
				success : function(){
					//ajax 통신이 정상 처리 되었을때 불러오는 콜백 함수
					alert('ajax 통신 성공');
				},
				error : function(){
					//ajax 통신에 문제 발생하였을때 불러오는 콜백 함수
					alert('ajax 통신 실패');
				},
				complete : function(){
					//ajax 통신 성공, 실패이든 무조건 콜백되는  함수
					alert('ajax 통신이 성공/실패이든 불려지는 함수');
				}
			});
			
		}
			
	});
</script>

Ajax1Servlet.java

// ajax로 전달한 데이터 받기
String userId= request.getParameter("userId");
String userPwd= request.getParameter("userPwd");
	
// 데이터 출력
System.out.println("userId : "+userId);
System.out.println("userPwd : "+userPwd);

---

2. 버튼 클릭시 서버에서 보낸값을 수신하여 View Page에서 출력

Ajax2Servlet.java

// 응답값 인코딩
response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

// View Page로 출력
out.print("까꿍[서버에서 전송한 값]");

ajax.jsp

<div id="print">
  // Servlet에서 받아온 데이터 출력할 공간
	
</div>
<button id="btn">가져오기</button>
	
<script>
	$('#btn').click(function(){
			
		$.ajax({
			url : "/ajax/ajax2.do",
			type:"post",
			success: function(result){
  
  				// 데이터 통신 성공했다면  Servlet에서 받아온 값 div태그 안에 출력
  
				var data = $('#print').html()+result+"<br>";
					
				$('#print').html(data);
			},
			error : function(){
				console.log('ajax2.do 서버 호출 실패');
			}
		});
	});	
</script>

---

3. 버튼 클릭시 전송 값을 서버로 보내고, 응답값을 수신하여 출력하기

ajax.jsp

<style>
#print{
	width:300px;
	height:400px;
	border:1px solid red;	
	overflow:auto;
}

</style>

<input type="text" id="su1">
<select id="yun">
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>
<input type="text" id="su2">
<button id="btn">계산</button>
	
<h3>연산 결과</h3>
<div id="print">
<!-- 데이터 출력 공간 -->
</div>
	
	
<script>
	$('#btn').click(function(){
  		// url로 보낼 데이터 세팅
		var su1 = $('#su1').val();
		var yun = $('#yun').val();
		var su2 = $('#su2').val();
			
		$.ajax({
			url:"/ajax/ajax3.do",
			type:"post",
  
  			// url로 보낼 데이터 설정
			data:{"su1":su1, "yun":yun, "su2":su2},
			success: function(result){
  				// url에서 처리하고 보낸 데이터 div태그 안에 출력
				var data =$('#print').html()+result+"<br>";
				$('#print').html(data);
			},
			error: function(){
				alert('실패');
			}
				
		});
		
  		// input 태그 비우기
		$('#su1').val("");
		$('#su2').val("");
			
	});
	
</script>

Ajax3Servlet.java

// Ajax로 전달한 데이터 받기
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String yun = request.getParameter("yun");
		
String result = null;
switch (yun) {
case "+":
	result = su1 + yun + su2 + "=" + (su1 + su2);
	break;
case "-":
	result = su1 + yun + su2 + "=" + (su1 - su2);
	break;
case "*":
	result = su1 + yun + su2 + "=" + (su1 * su2);
	break;
case "/":
	result = su1 + yun + su2 + "=" + (su1 / (double) su2);
	break;
}

// 출력
PrintWriter out = response.getWriter();
out.print(result);

---

ex. ID 입력 후 ID 중복확인 처리하기

idCheck.jsp

ID : <input type="text" id="userId"><br>
<span id="msg"></span>
	
<script>
	$('#userId').blur(function(){
	
		var userId= $('#userId').val();
			
		$.ajax({
				
			url:"/member/memberIdCheck.do",
			type:"get",
			data: {"userId":userId},
			success: function(result){
  
				// Servlet에서는 boolean타입이 었으나 전달할때 String타입으로 전환
				if(result=='true'){
					$('#msg').html('사용 불가[이미 사용중입니다.]').css("color","red");
				}else{
					$('#msg').html('사용 가능').css("color","blue");
				}
			},
			error: function(){
				console.log('ajax 통신 실패');
			}
				
		});
			
	});
	
</script>

AjaxMemberIdCheckServlet.java

// userId 값을 받아서, 비즈니스 로직 처리로 해당 ID가 중복 유무 판단
		
String userId = request.getParameter("userId");
MemberService mService = new MemberServiceImpl();

// 비즈니스로직( <->Service <-> DAO <-> DB) 처리후 결과값 받기
// true : 중복O
// false : 중복X
boolean result = mService.selectIdCheck(userId);
		
PrintWriter out = response.getWriter();
		
out.print(result);

---