AJAX - JSP에서 가공한 JSON 파싱하기

var xhr;

//이 함수가 실행되면

function startAjax(){ 

xhr = new XMLHttpRequest(); 

xhr.open("get","json_test1.jsp?dummy=" + new Date().getTime(), true); 

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){ 

if(xhr.status === 200){ 

process();

}else{

document.write("요청 실패: " + xhr.state);

}

}

};

xhr.send(null);

}

function process(){

var data = xhr.responseText;

//var evalData = eval("(" + data + ")");  //eval()함수로 텍스트를 json 객체로 만듬, 보안에 문제가 있음.

var pData = JSON.parse(data);

var makeData = "<table border='1'>";

makeData += "<tr><th>번호</th><th>부서명</th><th>위치</th><th>전화</th><th>이미지</th></tr>";

for(var i=0; i < pData.busers.length; i++){

makeData += "<tr>";

makeData += "<td>" +pData.busers[i].no + "</td>";

makeData += "<td>" +pData.busers[i].name + "</td>";

makeData += "<td>" +pData.busers[i].loc + "</td>";

makeData += "<td>" +pData.busers[i].tel + "</td>";

makeData += "<td><img src='../image/" +pData.busers[i].img + "' width=50%/></td>";

makeData += "</tr>";

}

makeData += "</table>";

document.getElementById("showData").innerHTML = makeData;

}

=======================================================================================================================

<%@page import="pack.BuserBean"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>

<jsp:useBean id="buserDao" class="pack.BuserDao" />

<%

ArrayList<BuserBean> list = buserDao.getDataAll2(); //DB 데이터 불러옴

String ss = "{\"busers\":[";

for(int i=0; i < list.size(); i++){

BuserBean bean = (BuserBean)list.get(i);

//JSON 형태로 가공

 ss += "{";

       ss += "\"no\":" + "\"" + bean.getBuser_no() + "\",";

       ss += "\"name\":" + "\"" + bean.getBuser_name() + "\",";

       ss += "\"loc\":" + "\"" + bean.getBuser_loc() + "\",";

       ss += "\"tel\":" + "\"" + bean.getBuser_tel() + "\",";

       ss += "\"img\":" + "\"" + bean.getBuser_img() + "\"";

       ss += "},";

}

ss = ss.substring(0, ss.length() - 1); //마지막 콤마 제거

String str = ss + "]}";

out.print(str); // 현재 jsp의 출력결과물은 str이 된다.

// 결과적으로 JSON형태의 텍스트가 ajax에서 XMLHttpRequest 객체의 responseText로 넘겨 받아 

// responseText로 json 형식의 데이터에 접근하게된다.

%>