[Jquery] 제이쿼리, $.ajax() 함수 활용. 비동기 통신

AJAX

ajax를 사용해서 서버와 데이터를 주고 받는다. 
 1. 브라우저 -> (데이터 + 요청) -> 서버 
 2. 브라우저 -> (요청) -> 서버 -> (데이터) -> 브라우저 
 3. 브라우저 -> (데이터 + 요청) -> 서버 -> (데이터) -> 브라우저 

 

ajax 구현 방법 
1. 순수 자바스크립트로 구현 
 ajax 객체(서버와 통신하는 무전기, 소켓) 
 var ajax = new XMLHttpRequest(); 

2. jQuery Ajax 구현(O) 
 jQuery Ajax를 사용해서 서버에게 데이터를 주고 & 서버로부터 데이터를 받아라 

 

Ajax 기본 예제

$.ajax({
	type: "GET", //요청 메소드 방식
	url:"/AjaxTest/ex01.do",
	dataType:"text", //서버가 요청 URL을 통해서 응답하는 내용의 타입
	success : function(result){
		//서버의 응답데이터가 클라이언트에게 도착하면 자동으로 실행되는함수(콜백)
		//result - 응답데이터
		//$('#result').text(result);
		alert(result);
	},
	error : function(a, b, c){
		//통신 실패시 발생하는 함수(콜백)
		alert(a + b + c);
	}
});

 

Ajax 활용 예제

$('.likeyhate').click(function(){
	var hdboardSeq = $($(this).find("input[type=hidden]")[0]).val();
	var hdtype = $($(this).find("input[type=hidden]")[1]).val();
	$.ajax({
		url:'/threeminutessul/likeyhateAjax.tmssul',
		data : 'type='+hdtype+'&boardSeq='+hdboardSeq,
		type:'GET',
		dataType:'json',
		success:function(data){
			if(data.result==1){
				if(hdtype==1){ //좋아요
					$("#likecount_"+hdboardSeq).text(data.count);
				}else{ //싫어요
					$("#hateecount_"+hdboardSeq).text(data.count);
				}
			}else{
				alert("오류가 발생하였습니다. 잠시뒤 다시 진행해주세요.");
			}
		},error:function(a,b,c){
			console.log(a,b,c);
		}
	});
    <!-- AAA -->
  });

- ajax 객체를 이용하여 비동기통신을 진행하는데 url과 data를 결합하여 querystring 형식의 Get 방식으로 데이터를 해당 URL로 매핑된 Controller 메소드에 전달하며, return dataType을 Json으로 하였다. json 데이터인 data라는 콜백함수의 매개변수로 리턴값을 던져주며 success 콜백함수에서 이를 활용하여 비동기통신으로 가져온 다음의 코드를 작성하면 된다.

 

Ajax 비동기통신 사용 시 주의해야할 사항.

비동기 통신을 포함한 모듈로 자바스크립트 함수를 구성할 경우(자바스크립트 function에 ajax객체로 비동기 통신할 경우) 현재 코드 흐름과 ajax success 콜백함수의 흐름은 다르다. success 콜백함수로 return data를 받아오고 나서 특정 행동을 하기 위해 사용자가 위의 코드에서 AAA 부분에 코드를 작성할 경우 AAA부분에 작성된 코드는 return data를 받아오기 전에 실행될 가능성이 높다. 이말인 즉슨, success function과 자바스크립트의 흐름은 서로 다른 흐름을 가지게 되고 return data를 가져온 ajax 객체의 success 콜백함수는 자기대로, 기존 자바스크립트 코드는 자바스크립트 코드대로 각자의 흐름을 가지게 된다는 것을 명심하자. 또한, 여러가지 ajax 객체의 비동기 통신이 여러번 실행될 경우 먼저 실행된 1번째 비동기통신이 2번 비동기통신의 return 보다 먼저 일어난다고 보장할 수 없다. 왜냐하면 비동기 통신이고 1번째에서 return할 값(만약 db를 거쳐 어떤 레코드셋을 반환한다면)의 크기가 무거워질수록 속도는 느려지기 때문에 2번째 비동기 통신이 훨씬 가볍다면 2번째 return 값이 먼저 반환되어 실행될 가능성도 있다.