JSP with JSON

JSON객체, JSON배열을 클라이언트와 서버가 문자열로 통신하는 예

json_simple-1.1.jar

서버측에서 JSON문자열을 클라이언트측으로 응답하는 예

<%-- json_str.jsp--%>
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="EUC-KR"%>
{empno:7369, ename:"SMITH", deptno:10}

서버(json_str.jsp)에서 응답한 JSON문자열을 받아서 JSON객체로 변환하여 사용하는 예

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>서버로부터 JSON문자열을 받아서 JSON객체로 변환</title>
<script type="text/javascript" src="../xhr.js"></script>
<script type="text/javascript" src="../json2.js"></script>
<script type="text/javascript">
var xhr;

</body>
</html>

클라이언트가 서버측으로 JSON 문자열을 전송하는 예

    function updatePage(){
    if(xhr.readyState==4 && xhr.status==200){
       alert("JSON문자열을 성공적으로 전송했습니다")
    }
    }

    function req(){
    xhr = createRequest();

    var jsonObj = {};
    jsonObj.empno=7369;
    jsonObj.ename="SMITH";
    jsonObj.deptno=10;
    jsonObj.phone="2354-6543-345";

    var url = "json_str_receive.jsp?emp="+jsonObj.toJSONString();

    xhr.open("GET", url, true);
    xhr.onreadystatechange = updatePage;
    xhr.send(null);
    }
</script>
</head>
<body onLoad="req();">

</body>
</html>

서버측에서 JSON문자열을 파라미터로 받는 예
json_simple_1-1.jar 필요함, 아래에서 사용된 JSONObject 는 Map을 기반으로 작성된 클래스이므로 put(), get() 사용함

<%-- json_str_receive.jsp--%>
<%@page import="org.json.simple.*"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
String jsonStr = request.getParameter("emp");
JSONObject jobj = (JSONObject)JSONValue.parse(jsonStr);
System.out.println(jobj.get("empno"));
%>

서버측(jsonarray_receive.jsp)으로 JSON배열을 전송하는 예

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>서버로부터 JSON문자열을 받아서 JSON객체로 변환</title>
<script type="text/javascript" src="../xhr.js"></script>
<script type="text/javascript" src="../json2.js"></script>
<script type="text/javascript">
var xhr;

</body>
</html>

클라이언트(위의 코드)에서 전달된 JSON배열을 서버측에서 다루는 예
json_simple_1-1.jar 필요함, 아래에서 사용된 JSONArray 는 ArrayList를 기반으로 작성된 클래스이므로 add(), get() 사용함

<%@page import="org.json.simple.*"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
String jsonStr = request.getParameter("emp");
System.out.println(jsonStr);
  JSONArray jarray = (JSONArray)JSONValue.parse(jsonStr);

for(int i=0;i<jarray.size();i++){
  JSONObject jobj = (JSONObject) jarray.get(i);
  System.out.println(jobj.get("ename"));
}
%>

서버측에서 JSON배열을 생성하여 클라이언트에게 응답하는 예
클라이언트가 부서번호를 전달하면 소속부터의 전 사원의 정보를 JSON배열로 작성하여 문자열로 응답한다

<%--jsonarray_send.jsp--%>
<%@page import="java.util.ArrayList"%>
<%@page import="db.*"%>
<%@page import="org.json.simple.*"%>
<%@ page language="java" contentType="text/plain; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<jsp:useBean id="dao" class="db.EmpDAO">
<jsp:setProperty name="dao" property="deptno" param="deptno"/>
</jsp:useBean>
<%
JSONArray jarr = new JSONArray();
ArrayList<EmpDTO> list = dao.getEmpByDeptno();
for(int i=0;i<list.size();i++){
  JSONObject jobj = new JSONObject();
  jobj.put("empno",list.get(i).getEmpno());
  jobj.put("ename", list.get(i).getEname());
  jobj.put("deptno", list.get(i).getDeptno());
  jarr.add(jobj);
}
String jsonStr = jarr.toJSONString();
%>
<%=jsonStr%>

위의 JSP에 요청하여 응답된 JSON문자열을 수신하고 JSON배열로 변환하여 화면에 사원정보를 출력하는 클라이언트 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>XML, DOM API를 이용한 사원정보 테이블</title>
<script type="text/javascript" src="../xhr.js"></script>
<script type="text/javascript" src="../json2.js"></script>
<script type="text/javascript">

var xhr;

function createTable(jsonArray){
  var table = "<table border='1' cellspacing='0' width='400' height='200'>";
  table += "<tbody>";
  table += "<tr style='background-color:#dddddd;'><th>사번</th><th>이름</th><th>부서</th></tr>";
/* JSON 배열에서 JSON객체를 얻고 객체의 속성값을 사용한다 */
  for(var i=0;i<jsonArray.length;i++){
   jsonObj = jsonArray[i];
   table += "<tr><td>"+jsonObj.empno+"</td>";
   table += "<td>"+jsonObj.ename+"</td>";
   table += "<td>"+jsonObj.deptno+"</td></tr>";
  }
  table += "</tbody></table>";
  return table;
}

    function updatePage(){
    if(xhr.readyState==4){
      /* 먼저 기존 테이블을 삭제한다 */
      var tbList = document.getElementsByTagName("table");
      if(tbList!=null && tbList.length>0){
       var old = tbList.item(0);
       var p = old.parentNode;
       p.removeChild(old);
      }
      var jsonArray = eval('('+xhr.responseText+')');
      var table = createTable(jsonArray);
      var div01 = document.getElementById("div01");
      div01.innerHTML = table;
    }
    }

    function req(deptno){
    xhr = createRequest();
    var url = "jsonarray_send.jsp?deptno="+deptno;
    xhr.open("GET", url, true);
    xhr.onreadystatechange = updatePage;
    xhr.send(null);
    }
</script>
<style>
tr{ vertical-align:middle; }
tr.title{ background-color:#CCCCCC; }

</style>
</head>
<body><br/><br/><center>
<h2>사원정보</h2>
<div id="div01"></div>
<hr width="400"/>
<input type="button" value="사원정보(부서:10)" onClick="req(10)"/>
<input type="button" value="사원정보(부서:20)" onClick="req(20)"/>
<input type="button" value="사원정보(부서:30)" onClick="req(30)"/>
<hr width="400"/>
</center>
</body>
</html>

사용된 xhr.js의 내용

/**
* xhr.js
* XMLHttpRequest 객체를 생성하는 함수
*/
function createRequest() {
var request = null;
try {
   // MS IE 이외의 브라우저에 적용되는 방식
   request = new XMLHttpRequest();
}
catch (trymicrosoft) {
   try {
// MS IE의 새로운 버전에 적용되는 방식
     request = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (othermicrosoft) {
     try {
       // MS IE의 구버전에 적용되는 방식
       request = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (failed) {
       request = null;
     }      // end of catch
   }     // end of catch
}      // end of catch
return request;
}

Programming

JSP with JSON

티스토리툴바