[jQuery] Ajax사용하기

jQuery에서 Ajax사용하기

웹 프론트에서 가장 중요한 기능을 물어본다면 고민을 해봐야겠지만 지금 당장 대답한다면 저는 아마도 Ajax라고 대답할것 같습니다. 그만큼 Ajax는 많이사용하고 중요하고 또 웹페이지를 멋지게 해주는 기능입니다.

ajax를 사용하는 방법은 여러가지가 있겠지만 이 포스팅에서는 JSP에서 jQuery를 이용한 Ajax로 Spring 백엔드와 통신하는 방법에 대해서 설명하고자 합니다.

1. Ajax란?

과거의 웹은 모든것이 동기화방식으로 운영되어 졌습니다. 예를들어 페이스북의 좋아요 버튼을 누르게되면 단지 좋아요 카운트만 올려주면 되는데 좋아요 카운트 한개를 화면에서 변경하기 위해 전체페이지를 리로딩하는 것이 바로 동기화 방식입니다. 하지만 곰곰히 생각해보면 페이스북의 좋아요기능 뿐만 아니라 채팅이라던가 댓글등 많은 웹페이지에서 전체페이지가 다시 로딩되는 것이 아니라 특정 부분만 업데이트 되는 모습을 볼수 있습니다. 이게 바로 비동기방식인 Ajax통신을 하기 때문에 가능한 것입니다.

이렇게 비동기방식으로 특정 부분만 데이터를 가져와서 병겅할 수 있다면 서버에서는 필요한 만큼만 데이터를 보내서 좋고 사용자(클라이언트)또한 적은 데이터로 렌더링하기 때문에 컴퓨터의 부하를 감소시킬 수 있습니다.

이러한 비동기통신의 특징을 가지고 있는 Ajax의 약자는 Asynchronous JavaScript and XML의 약자로서 풀어서 해석하면 비동기적으로 JavaScript와 XML을 이용한 통신방식이라고 이야기 할 수 있습니다. 물론 약자와는 다르게 실제로는 XML을 이용하여 사용하는 경우는 별로 없습니다. 굳이 XML이 아니더라도 JSON, String과 같은 더 사용하기 편하 데이터 타입도 지원하기 때문입니다.

여러 라이브러리 마다 Ajax를 사용하는 방식이 조금씩 다르지만 결국 모든 Ajax의 근본은 XMLHttpRequest를 활용하여 만들어 졌습니다. jQuery와 같은 라이브러리 없이 순수 자바스크립트로 Ajax를 사용하고 싶다면 XMLHttpRequest를 활용한 Ajax통신을 하면 되지만 이 포스팅에서는 jQuery를 이용한 방식으로 사용할 예정입니다.

2. Ajax의 기본구조

var data = $('#loginForm').serialize();

$.ajax({
    url: "login.do",
    type: "POST",
    async: true, // true(비동기), false(동기)
    dataType: "", //서버로부터 넘겨받을 데이터 타입
    data: data, //서버로 전달할 데이터(key:value 형태의 객체 or String)
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    beforeSend:function(){
	alert("ajax통신 전 무조건 실행");
    	xhr.abort(); // ajax 중단함수
    },
    success : function(arg) {
	alert("통신성공시에만 실행");
    }, 
    error : function(xhr, status, error){
	alert("통신실패시에만 실행");
    },
    complete:function(){
	alert("ajax통신 후 무조건 실행");
    }
});

위의 코드는 jQuery에서의 Ajax 기본구조입니다.

당연히 사용하기 위해서는 jQuery를 추가해야 하는데 그 방법은 여기서 생략하도록 하겠습니다.

$.ajax({
    url: "login.do",
    type: "POST",
    data: data, //서버로 전달할 데이터
    success : function(arg) {
	alert("통신성공시에만 실행");
    }, 
    error : function(arg){
	alert("통신실패시에만 실행");
    }
});

Ajax함수의 구조에서 여러가지 속성과 속성값들이 있는데 꼭 모든 속성을 사용할 필요는 없습니다. 사용하지 않는 부분은 제외하고 필수적을 설정해 줘야 하는 부분도 기본적으로 세팅된 Default값이 있기 때문에 디폴트값과 다른 값을 사용하는 경우가 아니라면 굳이 적어주지 않아도 사용하는 문제는 없습니다. 위에 있는 코드처럼 짧게 필요한 부분만 사용하셔도 전혀 문제가 없습니다.

var json = { name : "사과", type : "과일" };

$.ajax({
    url: "login.do",
    type: "POST",
    data: JSON.stringify(json),
    contentType: "application/json; charset=UTF-8",
    success : function(arg) {
	alert("통신성공시에만 실행");
    }, 
    error : function(arg){
	alert("통신실패시에만 실행");
    }
});

Ajax의 속성값중에 조금 조심해야하는 부분이 있는데 그건 바로 ContentType입니다.

Default값은 'application/x-www-form-urlencoded; charset=UTF-8'이기 때문에 평상시에는 그냥 따로 설정할 필요없이 Default값으로 사용하면 되지만 만약 백앤드로 보내고자하는 데이터 타입이 JSON이라면 ContextType을 'application/json; charset=UTF-8'으로 해줘야 합니다.

하지만 여기서 끝이 아닙니다. request에 담겨져 있는 JSON형태의 데이터는 보통 컨트롤러에서 VO나 DTO형태로 다시재가공하여 사용하는데 ajax는 데이터를 문자열화 해주지 않기 때문에 보낼 데이터를 JSON.stringify()로 감싸주어 JSON객체를 String으로 변환해야 하며 그렇게 하지 않을 경우 JSON데이터의 key : value형태의 패턴을 서버의 컨트롤러에서 인식하지 못합니다.

3. 서버로부터의 응답

Ajax에서 일방적으로 데이터를 전달하는 경우도 있지만 데이터 전달후에 서버로부터 응답받는 데이터가 있는 경우도 있습니다. 위에서 이야기한 바와 같이 이번에는 Spring의 컨트롤러에서 데이터를 응답받는 코드를 살펴보겠습니다.

	@RequestMapping(value = "login.do", method = {RequestMethod.GET, RequestMethod.POST})
	public void login(UserVO userVO, HttpServletResponse response) throws Exception {
    
            //response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write("{ message : 로그인에 성공하였습니다 }");  
	}

var data = { id : "id", pw : "pw" }

$.ajax({
    url: "login.do",
    type: "POST",
    data: JSON.stringify(json),
    contentType: "application/json; charset=UTF-8",
    dataType: "JSON",
    success : function(arg) {
    	alert(JSON.stringify(arg));
	alert(arg.message);
    }, 
    error : function(arg){
	alert("통신실패시에만 실행");
    }
});

컨트롤러는 요청에 대한 결과를 response객체에 담아서 보내줍니다. setContentType을 통해서 응답할 데이터의 형태와 캐릭터셋을 설정하며 그냥 일반적인 String데이터를 보낼경우에는 그냥 setCharacterEncoding에서 UTF-8만 설정해도 됩니다.

응답할 데이터의 헤더를 설정했다면 실질적으로 보내는 데이터는 response객에에서 getWriter().write함수를 이용합니다. 만약 응답할 데이터가 JSON이라 하더라도 ContentType에서 JSON으로 설정만 잘 해줬다면 String형태로 보내면 알아서 JSON으로 파싱처리를 해주기 때문에 String형태로 보내주시면 되는데 만약 직접작성한 JSON이 아니라 JAVA의 객체를 리턴하고 싶은 경우가 있을 수 있습니다. 그럴경우 Gson이나 JackSon과 같은 라이브러리를 이용하여 자바의 객체를 String형태로 파싱하여 보내주면 됩니다. 이 포스팅에서 자바의 객체를 JSON형태의 String으로 파싱하는 방법에 대해서는 생략하도록 하겠습니다.

https://coupa.ng/bnukep

COUPANG

쿠팡은 로켓배송

www.coupang.com

저작자표시 비영리 변경금지

'웹프로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] 기본 세팅방법(CND, 직접선언 등) (0)	2019.05.14

미니멀 개발자