[JSP] Ajax로 JSON 전송

브라우저에서 댓글을 작성해 서버로 전송하는 과정 중 만난 문제와 그때의 해결방법을 기록하고자 한다.

XMLHttpRequest 'POST'

JQuery를 이용하지 않고 JS로 XMLHttpRequest를 만들어 서버로 JSON 데이터를 'POST'하는 과정에서 만난 오류는 다음과 같다.

var reply = {
    content: content,
    bid: bid
};

request.open('POST', url, true);

request.setRequestHeader("Content-Type", 'application/json; charset=UTF-8');

request.send(JSON.stringify(reply));

해당 URL로 JSON 형식의 데이터를 보냈는데, 이를 어떻게 받아야 할까? 우리는 보통

String value = request.getParameter(key);

이처럼 받는데, 이처럼 받으려면 Content-Type 헤더가 'application/x-www-form-urlencoded'이어야만 하는데, 나는 JSON으로 맞춰놓았다. 그래서 ajax로 보내면 받을 방법이 잘 떠오르지 않는다. 하지만 이마저도 해결법이 있었다.

		/* JSON 데이터 받아오는 과정 */
		StringBuffer sb = new StringBuffer();
		BufferedReader br = request.getReader();
        
		String line = null;
		
		while((line = br.readLine()) != null) {
			sb.append(line);
		}
        
		log.info(sb.toString());
		/* JSON 데이터 받아오는 과정 */

위처럼 Reader를 가져와 읽으면 데이터를 문자열로 가져올 수 있고, 이를 JSON 파싱해주는 라이브러리를 사용해 파싱해서 사용하면 된다.

		/* JSON 데이터 받아오는 과정 */
		StringBuffer sb = new StringBuffer();
		BufferedReader br = request.getReader();
		String line = null;
		
		while((line = br.readLine()) != null) {
			sb.append(line);
		}
		log.info(sb.toString());
		/* JSON 데이터 받아오는 과정 */
		
		
		JSONParser parser = new JSONParser();
		try {
			JSONObject obj = (JSONObject) parser.parse(sb.toString());
			String content = (String) obj.get("content");
			String writer = (String) request.getSession().getAttribute("email");
            
            //obj.get("bid")를 바로 읽으면 Class Case Exception이 발생한다. 이는
            //JS의 Number를 바로 int로 변경하려고 해서 그런 것이므로 String으로 변환 후 파싱해서 사용한다.
			int bid = Integer.parseInt(String.valueOf(obj.get("bid")));
			
			Reply reply = new Reply(writer, content, bid);
			
			replyService.register(reply);
		} catch (ParseException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

 

# References

 

joooahn님의 tistory