개발노트 :: 제이쿼리(Jquery) Ajax 사용법

1. 제이쿼리(Jquery) Ajax

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

Ajax는 또한 프레임워크 중에서도 많이 사용을 하는 편이여서 알아뒀다가 사용을 하면 편하게 작업을 진행을 할 수 있습니다.

 

 

2. 제이쿼리(Jquery) 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)

 

 

3. Ajax 사용 옵션

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