제이슨(JSON), 에이작스(Ajax) 예제.

제이슨은 데이터의 전송형태이다. 각종 브라우저 뿐 아니라 모든 언어에서 제이슨 객체(JSON)를 지원하기 때문에 서버에서 데이터를 제이슨 형태로만 전송한다면 클라이언트의 언어에 구애받지 않고 parse 함수를 이용해 데이터를 추출해 사용할 수 있는 것이다. 데이터 전송 형태의 표준정도로 생각해도 큰 무리가 없다고 생각한다. 에이작스 또한 제이슨을 이용해 데이터를 제어하는 대표적 비동기통신 기법이다.

에이작스는 Asynchronous JavaScript And XML의 약어로 자바스크립트를 이용해 서버와 비동기통신을 지원하기 위한 클라이언트 통신기법이다. 비동기통신이란 일반적으로 코드의 라인대로 실행되는 함수들과 달리 실행되는 때를 알 수 없는 경우를 제어하기 위해 제공되는 통신기법을 말한다.
대표적인 것이 아이디 중복검사이다. 브라우저는 사용자가 아이디를 적어갈 때마다 사용할 수 있는지 없는지를 확인한 후 그 결과를 브라우저에 전송해준다. 이를 정확하게 말하면 키보드가 떼지는(keyUp)  이벤트가 발생하는 순간마다 텍스트 필드에 있는 값을 서버에 전송하고 응답을 돌려받아 그 결과를 브라우저에 보여주는 것이다. 여기서 Ajax의 중요한 강점은 페이지 전환을 하지 않는다는 점이다. 페이지 전환은 페이지가 깜빡거리며 새로고쳐지는 것을 말한다. 이를 통해 페이지 전환을 최소화하는 SPA(Single Page Application) 개발이 트렌드화 되어가고 있다.

※ 웹 서버에서 제이슨 사용 패턴
1. 자바로 서버의 경우 서블릿에서 데이터를 제이슨 형태의 String 타입 으로 response에 담아 브라우저에 전송한다. 
2. 브라우저는 JSON.parse(resonse) 함수를 통해 resonse에 담긴 String을 제이슨 포맷으로 분리시켜 웹페이지를 제어한다.

코드를 보도록 하자. 하기 코드는 서블릿, jsp, javascript, 에이작스(Ajax) 등에 대한 전반적인 이해 없이 의미를 파악하기 힘들수도 있다.

public class DoCheckDuplicateUserIdServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    private UserService userService;   
	
	// 입력할때마다 호출되어 userId가 USR 테이블의 USR_ID 에 중복되는 값이 있는지 확인
	
    public DoCheckDuplicateUserIdServlet() {  
    	userService = new UserServiceImpl();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String userId = request.getParameter("userId");
		boolean isDuplicated = userService.isDuplicatedUserId(userId);
		
		StringBuffer json = new StringBuffer();
		json.append(" { ");
		json.append(" \"status\" : \"success\", "); // 요청한 것 잘 처리했고,
		json.append(" \"duplicated\" : " + isDuplicated); // 그 결과는 isDuplicated이다.
		json.append(" } ");
		
		// json 내용을 브라우저에 전송
		// 지금 내용은 json 형태의 String을 브라우저에 전송하는 것뿐.
		// JSON.parse() 함수 통해 json 형태로 변환해 사용해야 한다.
		PrintWriter writer = response.getWriter();
		writer.write(json.toString());
		writer.flush();
		writer.close();
	}
}

제이슨 서블릿. StringBuffer 객체를 이용해 제이슨 포맷에 맞도록 작성해 String형태로 전송한다.
userService.isDuplicatedUserId는 MVC 패턴에 기반해 url 매개변수 중 userId에 해당하는 사용자가 데이터베이스에 있는지 여부를 확인하는 메소드이다. keyUp 이벤트 발생시마다 서블릿이 호출되어 userId를 받아와 데이터베이스와 비교하는 원리로 생각하자.
이때 보낸 문자열은
{ "status" : "success", "duplicated" : true or false }이다.
{ 괄호 안에 "변수명" : "결과값" 의 형태로 담는 것이다. , 를 통해 여러 변수를 담을 수 있다.

서버를 켜 해당 역할 수행하는 서블릿의 url로 요청 보내면

다음과 같은 결과가 나온다. 하지만 아직 브라우저는 서버에서 응답객체 ( response.getWriter() )  에 담긴 결과를 문자열로 출력하기만 해주는 상태이기 때문에 의미가 없다. 이를 의미있게 사용하기 위해서는 JSON.parse(response) 함수를 이용해 JSON  포맷으로 변환해야 한다. 이를 사용한 자바스크립트 코드를 보자

$("#userId").keyup(function(){
			$.post("/melon/user/checkDuplicate",
					{
						"userId" : $("#userId").val()
					},
					function(response){
						var jsonObj = JSON.parse(response);
						console.log(jsonObj);
						
						if(jsonObj.duplicated) {
							$("#duplicated").text("중복되는 아이디란다.");
						}else{
							$("#duplicated").text("사용할 수 있는 아이디이다.");
						}
					});
		});

키보드의 keyUp 이벤트에 콜백함수를 걸어놓았다. 키보드를 눌렀다 떼는 순간을 keyUp이벤트라 하며 그때마다 해당 함수가 Ajax를 통해 비동기로 수행된다. 의미를 해석하면

$("#userId").keyup(function(){  // userId라는 id를 갖고 있는 태그에서 keyup 이벤트가 발생한다면 이후 콜백함수 function을 수행해라!

$.post()  : Ajax 통신 명령어. 매개변수는 3개로 처음에 해당 요청을 처리해줄 url, 요청 수행을 위해 필요한 데이터, 요청 수행 후 받은 응답을 이용한 콜백함수 function이다. url로 데이터들과 함께 요청을 보내고, 그에 대한 응답을 받은 response 객체의 데이터를 이용해 적절한 동작을 하도록 만드는 패턴이다. 예로 들었던 아이디 중복검사를 여기에 적용시킨다면 
중복검사를 하는 서블릿이 등록된 url로 post함수를 보내고, 2번째 매개변수로 그때의 아이디를 보낸다. 중복된 것이 있는지 여부를 boolean으로 response 객체에 JSON 타입으로 담아와 중복되는 경우와 그렇지 않은 경우 각각 다른 문장을 text() 함수를 통해 보내주는 것이다.

JSON에서 중요한 부분은 var jsonObj = JSON.parse(response); 이다.
해당 라인을 통해 response로 들어온 String에 대해 JSON 포맷의 형태로 사용할 수 있도록 하는 것이다. 해당 결과를 담은 jsonObj에서는 맵과 같은 형태로 키를 통해 그 값에 접근할 수 있도록 한다. 키로 설정한 "duplicated" 에 접근해 값을 확인하고 그에 따라 중복되는 아이디인지 검사를 하는 로직을 완성시킬 수 있는 것이다.

그 결과

다음과 같이 DB에 있는 아이디를 적는 순간 중복되는 아이디라고 사용자에게 알려준다.