JSON으로 데이터 파싱하고 view로 전달하기

Ajax로 비동기 데이터 처리를 하는데 있어 XML과 JSON 등을 이용하는 방법이 있다고 합니다.
책에서 보니 XML은 그닥 추천하는 편이 아니라고 JSON으로 파싱하는 법을 공부해 봤습니다.

우선 json라이브러리가 필요하겠네요.. http://json.org에서 json-simple.jar를 다운 받습니다. (받으면 웹애플리케이션 lib에 추가합니다.)

ajax.js
비동기로 데이터를 요청합니다.

function pageSelect() {
 var param = "page="+""
 sendRequest("deptList_Ajax.jsp",param,pageResult,"POST");
}

프레임워크를 쓴다면 deptList_Ajax.jsp의 경로를 클래스명으로 연결시켜도 된다고 하더군요.. action이나 do같은거 말이죠..

DeptPage.java
추가시킨 JSON라이브러리를 임포트하고 객체를 선언하여 사용합니다.

 public String createJSONObject(ArrayList<LogonDataBean> arlist){
  JSONArray jarray = new JSONArray(); //배열타입선언
  JSONObject jo;
  for(int i=0; i<arlist.size(); i++){
   LogonDataBean gdb= arlist.get(i);
   jo = new JSONObject();  //싸이즈만큼 생성
   jo.put("name", gdb.getDepartment()); //key ,value 의 맵 형식입니다.
   jo.put("id", gdb.getId());
   jo.put("pwd", gdb.getPasswd());
   jo.put("up", gdb.getSuperdepartment());
   jarray.add(jo);
  }
  JSONObject out = new JSONObject();
  out.put("list", jarray); 
  return out.toString(); 
  
 }

{"list"
 [{"key","value"} , {"key","value"} ....]
} 이런식으로 출력이 됩니다.

deptList_Ajax.jsp
DAO에서 갖고 온 값을 뿌려주는 view역할을 하는 페이지입니다.
중요한 사항은, html태그를 전부 지우고 <%=json%>의 변수만 뿌려줘야 한다는 거...

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="career.logon.LogonDataBean"%>
<%@page import="career.logon.DeptPage"%>
<%
DeptPage dp = new DeptPage();
DeptPage jp = new DeptPage();
String json = jp.createJSONObject(dp.getJsonList());

%>
<%=json %>

ajax.js
다시 js파일로 돌아와서 view페이지에서 뿌려준 text데이터를 받아옵니다.
eval()이 메소드를 만들어주는 함수라나 뭐라나.. 여튼 eval로 감싸줍니다.

function pageResult() {
 if(httpRequest.readyState==4){
  if(httpRequest.status==200){
   var result = document.getElementById("result");
    var ar = httpRequest.responseText;
   var json = eval('('+ar+')');
  
  alert(json.list[0].name);
  }
 }
}