▼ 더 많은 정보
https://www.oracle.com/kr/database/what-is-json/
JSON이란 무엇인가?
JSON을 이용하는 프로그래머, 개발자, IT 전문가들은 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있습니다.
www.oracle.com
https://developer-talk.tistory.com/268
[JavaScript]JSON parse 와 JSON stringify 차이
JSON이란? JSON(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JavaScript 전용으로 만들어졌지만, 현재는 Java, Python, Go, C#과 같은 다른 프로
developer-talk.tistory.com
이 위치에 json-simple-1.1.1.jar 파일 추가해야 쓸 수 있음.
1. JSON (JavaScript Object Notation)
: JavaScript에서 객체를 정의하는 문법.
JSON은 파싱 또는 직렬화 없이도 JavaScript 프로그램에서 사용할 수 있다.
JSON은 JavaScript 객체 리터럴, 배열, 스칼라 데이터를 표현하는 텍스트 기반의 방식이다.
JSON은 상대적으로 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉬움.
종종 구조화된 데이터를 직렬화해 이를 네트워크에서 교환할 때(보통 서버와 웹 애플리케이션 간) 사용.
[value, value, value] --- 배열
{ key : value } --- 객체
let arr = ['aaa', 'bbb', 'ccc']; ---- 배열
let obj = { "문자" : "문자", "숫자" : 숫자, "boolean" : true } ---- 객체
let txt = '{"name":"aaa", "num":1}'; ---- 문자열
let obj2 = JSON.parse(txt) <= 문자열을 원래 타입(객체/배열)으로 쓰고 싶을 때
<head>
<script>
window.onload = function() {
<!-- JSON(JavaScript Object Notation): js에서 데이터 표현하는 방법. -->
let arr = ['aaa', 'bbb', 'ccc']; <!-- 배열 -->
let obj = { <!-- 객체{멤버변수명:값} -->
"name":"aaa", "num":1, "tel":"111", "flag":true
};
let html = "arr values<br />";
for(i=0; i < arr.length; i++){
html += arr[i] + ", ";
}
html += "<br />";
html += "obj 속성들<br />";
html += "name: "+obj.name+"<br />";
html += "num: "+obj.num+"<br />";
html += "tel: "+obj.tel+"<br />";
html += "flag: "+obj.flag+"<br />";
let div = document.getElementById("res");
div.innerHTML = html;
}
</script>
</head>
<body>
<div id="res"></div>
</body>
* 자바스크립트 반복자 * { key, value } / [value, value, value, ..]
for ( 담을 변수 of 객체/배열 ) {} --- value를 하나씩 꺼내 변수에 담음
for ( 담을 변수 in 객체/배열 ) { --- key를 하나씩 꺼내 변수에 담음
객체명[key] --- 해당 객체의 key
}
- document.write() 로 값을 받으면 새 창에서 열린다.
<head>
<script type="text/javascript">
window.onload = () => {
let arr = ['aaa', 'bbb', 'ccc'];
let obj = {"name":"aaaa", "num":1}; // 객체
let txt = '{"name":"aaaa", "num":1}'; // 문자열
let obj2 = JSON.parse(txt);
// {key, value}
// for문을 of으로 돌리면 value를 하나씩 꺼냄.
for (let val of arr) {
document.write(val+"<br/>");
}
//for문을 in으로 돌리면 key를 하나씩 꺼냄.
// obj[key]: 해당 key의 값
for (let key in obj) {
document.write(key + ": " + obj[key]+"<br/>");
}
for (let key in obj2) {
document.write(key + ": " + obj2[key]+"<br/>");
}
for (let key in txt) {
document.write(key + ": " + txt[key]+"<br/>");
}
}
</script>
</head>
2. AJAX + JSON
: 객체나 배열을 서버로부터 받아와서 웹 뷰에 비동기 방식으로 보여준다.
: 비동기 방식으로 폼파라메터 값을 받아와서 웹뷰에 뿌려주고 싶을 때 쓴다.
- 동기 방식으로 Servlet이 폼파라메터 값을 request에 담아 JSP로 보내면 새 사이트가 로드되고 새로고침이 발생한다.
- 비동기 방식으로 웹뷰에 데이터를 보여주려면, Servlet에서 String 형식의 데이터를 JSON 형태로 변환한 뒤 다시 문자열 형태로 변환해 response로 보내고, JSP에서 JavaScript 함수에서 비동기 요청 객체를 생성해 서버에서 보낸 값을 responseText로 받아 JSON.parse해 문자열을 JSON 형태로 바꿔 인식한 값을 배열에 담는다.
파싱 : 구문분석. 문장을 문법적 부분으로 나누고 식별함.
int num = Integer.parseInt(request.getParameter("num"));
// request.getParameter 는 자동으로 String으로 값을 받아옴.
// 그 값을 int로 변환하고 싶을 때 parse 함.
JSON.parse는 JSON 문자열을 <key> : <value> 관계로 식별한다.
클라이언트-서버 간 통신에서 서버가 클라이언트에게 전달하는 데이터는 문자열이다. 파싱 하기 전에는 단순 문자열이어서 문자열에 인코딩 된 데이터에는 접근할 수 없다. JSON.parse()를 사용하면, 데이터를 파싱 하여 JavaScript 객체로 변환해 데이터를 처리할 수 있다. 데이터에 접근하기 위해서는 JSON.parse()의 결과인 JavaScript Object를 이용합니다. (JSON.parse()는 배열로 결과값을 반환함.)
{"num":1, "name":"aaa", "tel":"111"} --- JSON 표기법 --- key-value 쌍이 3개 들어간 객체
{\"num\":1, \"name\":\"aaa\", \"tel\":\"111\"} --- parse 되지 않은 String --- {, ", n, u, m, ", :, 1, ", n, a, m, e, " .....
< JSON 파싱 순서 >
-- Servlet --
1. JSON 배열 또는 객체를 생성한다.
2. 값을 담는다.
* JSON 객체 생성 {} -> 멤버 추가
JSONObject obj1 = new JSONObject();
obj1.put("num", 1); //{"num":1}
obj1.put("name", "aaa"); //{"num":1, "name":"aaa"}
obj1.put("tel", "111"); //{"num":1, "name":"aaa", "tel":"111"}
* JSON 배열 생성 [] -> 저장
JSONArray arr = new JSONArray();
arr.add(obj1);
arr.add(obj2);
arr.add(obj3);
3. JSON 객체를 JSON 표기 형태의 문자열로 변환한다. --- 문자열만 전달할 수 있음.
String txt = arr.toJSONString();
{"num":1, "name":"aaa", "tel":"111"}
▶ {\"num\":1, \"name\":\"aaa\", \"tel\":\"111\"}
4. 클라이언트에게 데이터를 전달한다.
response.getWriter().append(txt);
--- JSP ---
5. 서버가 보낸 값을 받아서 파싱한다. --> 필요에 따라 뒷작업을 한다!
- 문자열로 받은 데이터는 바로 데이터로 접근할 수 없다. 문자열을 문법에 맞게 파악해 값을 인식하려면 parse가 필요하다.
let arr = JSON.parse(xhttp.responseText);
▼ JSP
<head>
<script>
window.onload = function(){
const xhttp = new XMLHttpRequest(); //1. 비공기 요청 객체 생성
//2. 서버로부터 비동기 요청 응답이 왔을 때 자동 실행될 핸들러 등록
xhttp.onload = function(){
// .responseXml -- xml 데이터를 받아옴
let txt = xhttp.responseText; //서버의 응답값 (문자열)
// JSON 문법 안맞으면 파싱 안됨.
let arr = JSON.parse(txt); // 문자열 -> JSON([],{})형태로 변환됨 => 배열에 담김
let html = '';
for(let obj of arr){ // arr배열에서 요소 하나({})씩 꺼내 obj에 담음.
html += "num: "+obj.num+"<br/>";
html += "name: "+obj.name+"<br/>";
html += "tel: "+obj.tel+"<br/>";
}
let res = document.getElementById("res");
res.innerHTML = html; //responseText: 서버로부터 텍스트 형태로 받은 응답값
}
//3. 비동기 요청의 전송방식, 서버페이지url 설정 -- get방식인 경우 url 뒤에 파라메터 붙여 값을 같이 전송함.
xhttp.open("GET", "${pageContext.request.contextPath}/json/test1");
//4. 요청 보냄
xhttp.send();
}
</script>
</head>
<body>
<div id="res"></div>
</body>▼ Servlet
@WebServlet("/json/test1")
public class JsonTest1 extends HttpServlet {
private static final long serialVersionUID = 1L;
public JsonTest1() {}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//String txt = "[{\"num\":1, \"name\":\"aaa\", \"tel\":\"111\"}, {\"num\":2, \"name\":\"bbb\", \"tel\":\"222\"}, {\"num\":3, \"name\":\"ccc\", \"tel\":\"333\"}]";
// JSON 객체 생성 {}
JSONObject obj1 = new JSONObject();
// 생성한 객체에 멤버 추가
obj1.put("num", 1); //{"num":1}
obj1.put("name", "aaa"); //{"num":1, "name":"aaa"}
obj1.put("tel", "111"); //{"num":1, "name":"aaa", "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);
}
}