JSON (JavaScript Object Notation) :
JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준이다.
JSON 구조
JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합이기에 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성된다.
1. JSON 데이터는 이름과 값의 쌍으로 이루어져 있음 .
2. JSON 데이터는 쉼표(,)로 나열.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현.
[{"name" : "aaa", "num" : 1, "tel" : "111"},
{"name" : "bbb", "num" : 2, "tel" : "222"},
{"name" : "ccc", "num" : 3, "tel" : "333"}]
1. JSON 데이터는 이름과 값의 쌍으로 이루어져 있음
이름 : 값 이름 : 값
"name" : "aaa" / "num" : 1
2. JSON 데이터는 쉼표(,)로 나열
이름 : 값 쉼표
"name" : "aaa",
3. 객체(object)는 중괄호({})로 둘러쌓아 표현
하나의 객체를 나타내는 중괄화 { }
{"name" : "aaa", "num" : 1, "tel" : "111"}
4. 배열(array)은 대괄호([])로 둘러쌓아 표현
여러 객체를 감싸는 배열인 [ ] 대괄호
[{"name" : "aaa", "num" : 1, "tel" : "111"},
{"name" : "bbb", "num" : 2, "tel" : "222"},
{"name" : "ccc", "num" : 3, "tel" : "333"}]
▶ JSON servlet 구현
package ajaxtest;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
/**
* Servlet implementation class jsonTest1
*/
@WebServlet("/json/test1")
public class jsonTest1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public jsonTest1() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
JSONObject obj1 = new JSONObject();
//json 객체를 생성을하고
obj1.put("num", 1);
//생성한 객체에 멤버를 추가 해준다.
obj1.put("name", "aaa");
obj1.put("tel", "111");
JSONObject obj2 = new JSONObject();
obj2.put("num", 2);
obj2.put("name", "bbb");
obj2.put("tel", "222");
JSONObject obj3 = new JSONObject();
obj3.put("num", 3);
obj3.put("name", "ccc");
obj3.put("tel", "333");
//값들을 json배열에 넣어주고
JSONArray arr = new JSONArray();
arr.add(obj1);
arr.add(obj2);
arr.add(obj3);
String txt = arr.toJSONString();
//json 객체를 문자열 표기로 변환
response.getWriter().append(txt);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
▶ JSON jsp에 구현하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
window.onload = function() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let txt = xhttp.responseText;
let html = " ";
let arr = JSON.parse(txt);
//JSON 파싱 하는 것
for(let obj of arr){
//(let obj of arr) = 자바 함수 중 for(String str : list) 와 비슷하다.
// list 배열에서 요소 하나씩을 꺼내서 str 에 담아준다는 의미이고
//여기서는 배열 arr 에 있는 요소들을 꺼내서 obj에 넣어준다.
document.write("num : " + obj.num +"<br/>");
document.write("name : " + obj.name +"<br/>");
document.write("tel : " + obj.tel +"<br/>");
}
let res = document.getElementById("res");
res.innerHTML = html;
}
xhttp.open("GET", "${pageContext.request.contextPath}/json/test1");
xhttp.send();
}
</script>
</head>
<body>
<div id = "res"> </div>
</body>
</html>