pc 브라우저와 서버 그리고 Ajax를 연동할 때는 xml 형식으로 데이터를 주고 받음. 모바일 사용량이 많은 요즘은 모바일에서도 서버와 Ajax로 연동해 작업을 많이 함. 그런데 xml로 연동할 경우 내부적으로 여러 단계의 처리 과정을 거치게 되므로 자원이 열악한 모바일 환경은 속도 면에서 불리함.
따라서 모바일에서는 대부분 xml보다 형식이 단순한 json으로 데이트럴 주고 받음. 이번에는 json을 이용해 Ajax 기능을 사용해 보겠음.
json은 name / value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식.
비동기브라우저/서버통신(ajax)을 위해 xml을 대체하는 데이터 전송 형식 중 하나라고 이해하면 됨.
근본은 자바스크립트에서 파생된 것이므로 자바스크립트의 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이어서 쉽게 사용할 수 있음.
json의 여러가지 자료형
-
정수 : 76,197,750,-11,-234
-
실수(고정소수점) : 3.14, -2.717, 45.78
-
실수(부동소수점) : 1e4, 2.5e34, 5.67e-9, 7.66E-3
-
문자열 : "1234", "true", "apple-num", "사랑", "\"jsp\"
-
제어 문자 : \b(백페이스), \f(폼 피드), \n(개행), \r(캐리지 반환), \t(탭), \"(따옴표), \/(슬래시), \(역슬래시)
-
배열 : 배열은 대괄호[]로 나타냄. 배열의 각 요소는 기본 자료형이거나 배열, 객체임. 각 요소들을 콤마(,)로 구별함. "name":["홍길동", "이순신", "임꺽정"] // 대괄호 안에 배열 요소를 콤마(,)로 구분해서 나열함.
-
객체 : json 객체는 중괄호{}로 둘러싸서 표현함. 콤마(,)를 사용해 여러 프로퍼티를 포함할 수 있음. {"name":"홍길동", "age":16, "weight":67} 중괄호 안에 name/value 쌍을 콤마(,)로 구분해서 나열함.
배열 이름이 memebers이고 json 객체를 배열 요소로 가지는 json 예시
'members' : [
{'name' : '홍길동', 'age': '22'},
{'name' : '손흥민', 'age' : '30'}
]예제 1 )
- json1.jsp
json 배열에 문자열을 저장한 후 웹 페이지에 출력하는 내용임.
<%@ 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 src = "http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#checkJson").click(function() {
// 이름을 저장하는 json 배열을 name으로 선언함.
var jsonStr = '{"name" : ["홍길동", "이순신", "임꺽정"]}';
// 제이쿼리의 json 기능인 parse() 메서드를 이용해 json 자료형을 가져옴.
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 이름<br>";
output += "=======<br>";
// 배열 이름 name으로 배열 요소에 반복 변수를 이용해 차례로 접근하여 값을 가져옴.
for(var i in jsonInfo.name) {
output += jsonInfo.name[i] + "<br>";
}
$("#output").html(output); // 회원 이름을 출력함.
});
});
</script>
</head>
<body>
<a id = "checkJson" style = "cursor:pointer">출력</a><br><br>
<div id = "output"></div>
</body>
</html>
출력을 클릭하면 배열 요소의 값을 출력함.
예제2)
- json2.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 src = "http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#checkJson").click(function(){
// 정수형 데이터를 가지는 이름이 age인 배열을 선언함.
var jsonStr = '{"age" : [22, 33, 44]}';
// pars() 메서드로 배열을 구함.
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 나이<br>";
output += "========<br>";
// 배열 요소(나이)를 차례대로 출력함.
for(var i in jsonInfo.age) {
output += jsonInfo.age[i] + "<br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id = "checkJson" style = "cursor:pointer">출력</a><br><br>
<div id = "output"></div>
</body>
</html>
예제3)
- json3.jsp
이번에는 json 객체에 회원 정보를 저장한 후 다시 회원 정보를 출력해 보겠음.
<%@ 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 src = "http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#checkJson").click(function() {
var jsonStr = '{"name" : "박지성", "age" : 25, "gender" : "남자", "nickname" : "날센돌이"}';
var jsonObj = JSON.parse(jsonStr); // parse() 메서드로 json 데이터를 가져옴.
var output = "회원 정보<br> ";
output += "=======<br>";
// 문자열에서 json 객체의 속성을 가져옴.
output += "이름 : " + jsonObj.name + "<br>";
output += "나이 : " + jsonObj.age + "<br>";
output += "성별 : " + jsonObj.gender + "<br>";
output += "별명: " + jsonObj.nickname + "<br>";
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id = "checkJson" style = "cursor:pointer">출력</a><br><br>
<div id = "output"></div>
</body>
</html>
예제4)
- json4.jsp
이번에는 json 배열의 요소에 json 객체를 저장한 후 다시 배열에 접근해 json 객체의 속성 값을 출력해 보겠음.
<%@ 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 src = "http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#checkJson").click(function() {
var jsonStr =
'{"members" : [{"name" : "박지성", "age" : "25", "gender" : "남자", "nickname" : "날센돌이"}'
+ ', {"name" : "손흥민", "age" : "30", "gender" : "남자", "nickname" : "탱크"}]}';
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 정보<br>";
output += "=======<br>";
for(var i in jsonInfo.members) {
// 각 배열 요소에 접근하여 객체의 name으로 value를 출력함.
output += "이름 : " + jsonInfo.members[i].name + "<br>";
output += "나이 : " + jsonInfo.members[i].age + "<br>";
output += "성별 : " + jsonInfo.members[i].gender + "<br>";
output += "별명 : " + jsonInfo.members[i].nickname + "<br><br><br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id = "checkJson" style = "cursor:pointer">출력</a><br><br>
<div id = "output"></div>
</body>
</html>
