[JSP] JSON
각각의 프로그래밍 언어들의 데이터 전송방식은 다양하다.
하지만 웹 프로그래밍에 이용되는 언어가 다양하고, 데이터를 전송하는데 있어서 통일하기 위해 json을 이용한다.
JSON이란?
JSON은 데이터를 전송하는 방식이다. 하나의 언어가 아니다.
경량화된 데이터 교환 형식이다.
서로 다른 언어들 간 데이터를 주고 받을 수 있도록 만들어진 텍스트 기반의 형식이다.
프로그래밍 언어가 아닌 데이터 표기 방법 중 하나이고 기본적으로 name:value 형태의 map구조를 가지고 있다.
code.google.com/archive/p/json-simple/downloads
Google Code Archive - Long-term storage for Google Code Project Hosting.
code.google.com
위에서 json-simple.jar을 다운받아 build path의 Library에 추가해야 사용 가능하다.
JAVA
외부에서 전달받은 JSONString을 JSONObject타입으로 변환하여 DB작업을 진행한다.
DB조회의 결과를 외부에 전달할 때 JSONObject 혹은 JSONArray 타입으로 저장하고 toJSONString()을 사용하여 String타입으로 변환 후 전달한다.
.JSON
JSON데이터가 들어있는 파일
uri(REST)
URL는 주소이고, URI는 데이터다.
어떠한 데이터를 가리키고 있는 고유 주소이다.
default는 xml형식으로 데이터가 보이고, uri뒤에 .json을 붙이면 json으로 데이터를 확인할 수 있다.
객체 생성(JSONObject)
JSON은 맵 구조이기 때문에 key값과 value값이 쌍을 이뤄 저장된다.
따라서 name이라는 key와 value가 한 쌍을 이뤄 저장된다.
내부 JSON 객체에는 요소들을 put(k, v)을 사용해서 넣어주고,
외부 JSON 객체로 만든 후 하나로 묶어서 관리한다.
{
외부 JSON요소 이름 : {
내부 JSON요소 이름 : 요소 값,
내부 JSON요소 이름 : 요소 값,
내부 JSON요소 이름 : 요소 값,
...
}
}따라서 JSON은 내부에서 외부 순서대로 데이터를 생성하게 된다.
객체 파싱(JSONParser)
JSON객체에 있는 정보를 문자열로 전송받았을 때 파싱 작업이 필요하다.
이 때 데이터가 망가질 수 있기 때문에 별도의 예외처리를 해줘야 한다.
생성 시 내부에서 외부로 생성하였다면 반대로 외부에서 내부 순서대로 접근해야 한다.
JSONParser 파서객체명 = new JSONParser();
JSONObject 객체명 = (JSONObject)파서객체명.parse(JSON객체.toJSONString());
객체명.get(K) == value 값
예제 - JSON에 저장된 문구를 반복하여 출력하기
data.json
{
"test_word" : [
{"number" : "1", "name" : "JAVA"},
{"number" : "2", "name" : "HTML"},
{"number" : "3", "name" : "CSS"},
{"number" : "4", "name" : "JSP"},
{"number" : "5", "name" : "SPRING"}
]
}test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 개발 교육 과정</title>
</head>
<body>
<div id="name">언어이름</div>
</body>
<script>
//해당 윈도우가 로드될 때
window.onload = function(){
//받아올 단어를 담아줄 배열
var words = new Array();
//json object 를 담아줄 객체
var obj = "";
var name = document.getElementById("name");
var request = new XMLHttpRequest();
request.open("GET", "data.json", true);
request.send();
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
obj = JSON.parse(request.responseText);
//JSONArray의 길이만큼 반복한다.
for (var i = 0; i < obj.test_word.length; i++) {
//각각의 프로퍼티를 가져와서 words[i]에 순서대로 저장한다.
words[i] = "["+ obj.test_word[i].number+"]" + obj.test_word[i].name;
}
}
}
}
var i = 0;
//일정 밀리초마다 지정한 함수를 반복한다.
var interval = setInterval(function() {
if(i == obj.test_word.length){i = 0;}
name.innerHTML = "<h3>"+words[i]+"</h3>"
i++;
}, 500);
//지정한 시간 이후 실행되게 한다.
setTimeout(function(){
//선언된 setInterval객체를 없애준다.
clearInterval(interval);
}, 10000);
}
</script>
</html>ajax통신으로 json파일에 접근하여 값을 가져와서 지정한 문구를 반복 출력한다.
2021.03.11 - [JSP/JSP정리] - [JSP] Ajax
[JSP] Ajax
[JSP] Ajax 이전까지 배운 데이터 전송방식은 페이지 전체가 이동하며 데이터를 가공한 후 이용했다. 하지만 회원가입페이지의 경우 중복확인 버튼과 같은 현재 페이지 내에서 정보를 가공한 후
heekng.tistory.com
'JS & TS > Frontend' 카테고리의 다른 글
| [JSP] EL문과 JSTL (0) | 2021.03.23 |
|---|---|
| [JSP] Ajax (jquery) (0) | 2021.03.20 |
| [JSP] Ajax (0) | 2021.03.11 |
| [JSP] 내장 객체, 데이터 전송방식 (0) | 2021.02.27 |
| [JSP] 자바빈즈(자바 객체) (0) | 2021.02.27 |
| [JSP] JSP문서 작성 및 코드 작성 (0) | 2021.02.27 |
