native ajax에서 POST로 데이터 전송시

클라이언트에서 Ajax를 사용할 때 웬만해서는 jQuery나 프레임워크에서 제공하는 것을 이용하지 직접 XMLHttpRequest를 생성해서 호출하지 않을 것이다.

페이지 최초의 로깅을 위해 native ajax를 구현해서 POST요청을 했다.

처음에는 전송할 데이터가 필요없었는데, 필요하면서 특정 id를 넘겨야 했다.

서버 코드는 아래와 같고,

@ResponseBody
@RequestMapping(value = { "/formLoadStart" }, method = POST)
public boolean formLoadStart(String id) {

클라이언트는 아래와 같았다. createXMLHttpRequest() 는 IE와 기타의 XMLHttpRequest 객체를 획득하는 것을 추상화해놓은 함수이다.

<script type="text/javascript">
    try {
        var xhttp = createXMLHttpRequest();
        xhttp.open("POST", "/formLoadStart", true);
        xhttp.send("id={{someId}}");
    } catch (err) {
    }
</script>

그런데 스프링 컨트롤러로 id에 해당하는 값이 넘어오지 않는 것이었다.

분면 HTML 소스보기 하면 id값은 박혀 있었다.

이유인 즉슨 요청 해더를 지정하지 않으면 "text/plain;charset=UTF-8" 로 전송이 되기 때문이었다.

아래와 같이 setRequestHeader를 이용해서 컨텐츠 타입을 지정해주어 해결했다.

<script type="text/javascript">
    try {
        var xhttp = createXMLHttpRequest();
        xhttp.open("POST", "/formLoadStart", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
        xhttp.send("id={{someId}}");
    } catch (err) {
    }
</script>

수정한 다음 개발자 도구에서 HTTP요청을 보면 아래와 같이 바뀌었다.

참고한 stackoverflow: http://stackoverflow.com/questions/9713058/sending-post-data-with-an-xmlhttprequest