Ajax

1. AJAX(Asynchronous Javascript and XML)란

웹의 흐름에서는 새로운 URL로 호출 되면서 페이지가 새로 뿌려지지만, 그래서 화면이 깜빡거린다.
AJAX를 사용하면 일부만을 로드해올 수 있다.

2. 원리

브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다.
서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다.
이게 보통 웹의 흐름이라면, AJAX는 AJAX 자체가 브라우저라고 생각하면 된다. 

3. 예제

jQuery를 사용하면

스크립트 단에서 다음과 같이 ajax를 만들어준다. 여기서 주의할 점은 contentType을 "application/json; charset=UTF-8"으로 설정해주지 않고 json데이터를 던지게 되면 인코딩이 서로 맞지않아서 Controller단에서 데이터를 제대로 받을수가 없어서 415에러가 뜨게 된다. 아래 예제에서는 Controller단에서 데이터를 Object형식으로 던지게 되는데, 이를 ajax Success는 json형식으로 받아오게 된다.
이를 위해서 jackson을 사용하였다.

pom.xml에 아래와 같이 jackson을 추가해서 Controller단에서 던지는 객체를 json형태로 변환해주도록 하자.

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>{Setting Version}</version>
</dependency>
 

json data를 만드는 방법은 다음과 같다

var data = new Object();
data.A = "a";
data.B = "b";

결과값 >> {"A":"a", "B":"b"}

$.ajax({
   url  : "...",
   type : "POST",
   contentType : "application/json; charset=UTF-8",
   data : JSON.stringify(data),
   success : function(data){
       A(data);
   },
   error : function(request, status, error){
       alert(error);
   }
});

JSON.stringify(data)는 JSON객체를 String으로 변환해주는 메소드이다.

private static final Logger logger = LoggerFactory.getLogger(PostController.class);
 
@ResponseBody
@RequestMapping(value = "...", method = RequestMethod.POST)
public List<Comment> InsertComment(@RequestBody HashMap<String,Object> commandMap) throws Exception{
 
 logger.info(commandMap.toString());
 
 return commentService.insertComment(commandMap);
}

정리

ajax가 json을 String형식으로 던지게 되면 Controller는 @RequestBody으로 연결해준곳에 HashMap으로 받아와서 로직을 실행하고, 그 다음 결과값을 return해줄때, 객체 형태로 던지는데 이때, jackson덕분에 이를 json형태로 자동으로 변환해 주고, 이를 ajax에서 success로 받아서 원하는 형태의 html로 변환해주면 된다.

여기서 주의할 점은 @ResponseBody인데 이는 결과값을 return할때 DispatcherServlet이 ModelAndView와 같은 객체를 가지고 ViewResolver에게 넘겨준다음 리턴되는 View를 찾는 것이 아니라 return값그대로 HttpResponse Body에 직접 쓰여지게 되는 어노테이션이다.