제이쿼리 Ajax 사용법에 대해 알아보자

실무에서 폼메일 사용할때 메일서버 쪽으로 데이터를 보내는 Ajax를 사용한 경험이 있다.

 

제이쿼리 Ajax

Ajax는 웹 페이지를 다시 요청하지 않고 동적으로 서버와 HTTP 통신이 이루어져 데이터를 처리하는 방식이다.

 

 

제이쿼리 Ajax 사용법

<input type="button" id="ajaxBtn">
<div id="printText"></div>
<div id="printError" style="color:red;"></div>

<script type="text/javascript"> 
	$("#ajaxBtn").bind("click",function(){
		$.ajax({
			url : "/rest/rest.jsp",		// 서버로 통신할 URL 주소
			data : {name:"홍길동"},	// 서버로 보낼 데이터
			method : "POST",		// HTTP 요청 메서드 [ "GET", "POST" ]  
			dataType : "text",			// 서버에서 보내줄 데이터 타입 [ "json", "xml", "text", "html" ]
			success : function(data){
				// 성공 콜백 함수 
			},
			error : function(jqXHR,status,error){
				// 실패 콜백 함수 
			},
			complete : function(){
				// 처리 후 콜백 함수 
			}
		})
		
		// 성공 체이닝
		.done(function(data){  
			$("#printText").html("data : " + data);
		})  
		
		// 실패 체이닝
		.fail(function(jqXHR,status,error){ 
			$("#printError").html("xhr : " + xhr + "<br/> error : " + error + "<br/> status : " + status);
		})
		
		// 처리 후 체이닝
		.always(function(){
			alert("처리 끝");
		})				
	});
</script>

1. 성공 처리 -> 성공 콜백 함수(success) -> 처리 후 콜백 함수(complete) -> 성공 체이닝(.done) -> 처리 후 체이닝(.always)

2. 실패 처리 -> 실패 콜백 함수(error) -> 처리 후 콜백 함수(complete) -> 실패 체이닝(.fail) -> 처리 후 체이닝(.always)

 

 

Ajax 사용 옵션

url	URL 사용 주소	서버 URL 주소 또는 같은 서버 페이지 위치
data	name : 홍길동	key:value 쌍으로 된 데이터
method	"GET","POST"	서버 요청 메소드
data Type	"json","xml","text","html"	서버에서 보내주는 데이터 타입