Jquery를 사용하여 AJAX를 사용하는 방법과 동기/비동기 처리에 대해서 알아보자
먼저 AJAX란 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)이다. 즉 비동기 처리를 위해 생겨난놈.
나는 일반적으로 Jquery를 사용하여 AJAX를 사용한다 기본적인 구조는
$.ajax({
url: "내가 보낼곳", //보낼 경로
method : "GET or POST", // 사용할 메소드
dataType : "json", // return 타입이 map일경우에는 생략
async: false, //비동기 처리할 경우 생략
data : info, // info 에는 key-value 형식의 데이터가 들어있다 , 나는 보통 var info={} 형태를 사용한다. form을 serialize 하거나 formdata를 사용하여도 무방하다
success:function(data){
//서버로부터 받아온 데이터를 동작할 메소드
}, error : function() {
//실패시 동작할 메소드
} });
위 와같은 방식을 사용한다.
spring 으로 통신하기 위해선
메소드를 POST로 맞추고 ,@ResponseBody를 아래와같이 추가해주어야하며 return type을 JSON으로 맞추어야한다
AJAX는 보통 비동기 통신을 하기위해 생긴놈이라고하였는데 비동기 통신이라는것은 예를들어 동기방식은
A메소드 와 B메소드가 순서대로 있다고 하였을때 A라는 메소드가 다동작한 후 B메소드가 동작하는게 일반적이다.
예상 결과는 plus 메소드가 다동작한 후 minus 메소드가 동작할 것이다
(1,2,3,4,5,......100,99,98,......1 )
반면 비동기방식은 plus 메소드를 실행 시키고 plus 메소드가 끝나지않아도 minus 메소드를 동작시킨다
(1,2,3,4,100,99,5,6,.........)
다른예를 들자면 웹페이지를 열었을떄 모든 처리가 동기처리가 된다고 생각해보자
웹페이지에 표시되어야하는 수많은 이미지들을 다 다운받고 페이지가 열린다면 얼마나 오래걸릴까..?
그 기다림으로인해 사용자 탈주가 발생할것이다. 이런경우 반드시 표시되어야할 부분은 동기처리를 진행한 후 너무 크거나 , 동작에 큰영향을 미치지않는 것들은 비동기로 처리해도될것이다.
( 속도가 느린환경에서 웹페이지를 열엇을경우 이미지만 안뜨는것도 비슷한 상황이다.)
AJAX에서 제공해주는 동기처리는 서버로부터 받아올 데이터가 AJAX 다음에 동작할 메소드에 영향을 줄때 사용할 수 있다.
예를들어 AJAX를 통해 사용자 이름을 물어보고 , 그다음 줄에서 불러온 사용자의 이름을 표시한다고 가정해보자
이 동작을 만약 비동기 처리한다면 AJAX를 통해 서버로부터 사용자의 이름을 받아오기전 다음 줄이 실행되어 undefined가 뜰확률이 높다 . 이럴경우 async:false를 사용하여 ajax가 다 동작한 후 이름이 표시하도록 하면된다.
-더 좋은 방법이있거나 오류가있다면 댓글로 남겨주세요 ㅠ
- 아직은 쓰는기 귀찮아서 자세하게 설명하는것보다는 하루하루 쓰는것에 의미를 더 두는...