JSON

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

JSON이란?

서로 다른 언어들간에 데이터를 주고 받는 여러 방법이 있다. 대표적인 것이 XML인데, XML은 문법이 복잡하고, 엄격한 표현규칙으로 인해서 json 대비 데이터의 용량이 커진다는 단점이 있다.

JSON은 경량의 데이터 교환 형식으로 JavaScript에서 숫자와 배열등을 만드는 형식을 차용해서 이것을 다른 언어에서도 사용할 수 있도록 한 텍스트 형식이다.

홈페이지

예제

JavaScript와 PHP는 서로 다른 언어다. 그렇기 때문에 배열이나 객체를 주고 받는 것이 쉽지 않다. 이럴 때 JSON을 사용하면 편리하다. 아래는 예제는 JavaScript와 PHP가 객체를 주고 받는 방법을 보여준다.

JSON은 최신 브라우저에서 기본적으로 제공되기 때문에 특별한 처리가 필요 없다. 하지만 오래된 브라우저는 JSON을 지원하지 않는다. json2 라이브러리를 사용하면 오래된 브라우저에서도 JSON을 사용할 수 있다. https://github.com/douglascrockford/JSON-js

json.html - (github)

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"/>
		<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
		<script>
			function login(){
				var userid = document.getElementById('userid').value;
				var pwd = document.getElementById('pwd').value;
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				    xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
				    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
				    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var resp = JSON.parse(xmlhttp.responseText);
					var str = '<ul>';
					for(name in resp){
						str += '<li>'+name+' : '+resp[name]+'</li>';
					}
					document.getElementById("list").innerHTML = str;
				    }
				}
				var userObj = new Object();
				userObj.userid = userid;
				userObj.pwd = pwd;
				xmlhttp.open("GET", './json.php?data='+JSON.stringify(userObj), true);
				xmlhttp.send();
				return false;
			}
		</script>	
	</head>
	<body>
		<form>
			<input type="text" id="userid" />
			<input type="text" id="pwd" />
			<input type="button" onclick="login()" value="조회" />
		</form>	
		<div id="list">
			
		</div>
	</body>
</html>

아래 예제는 위의 예제에서 전송한 데이터를 받아서 몇가지 부가정보를 추가해서 json으로 인코드한 후에 다시 반환하는 PHP 코드다.

json.php - (github)

<?php
$userinfo = json_decode($_GET['data']);
$userinfo->address = 'seoul';
$userinfo->phonenumber = '01023456789';
echo json_encode($userinfo);
?>

json의 형식

object

객체는 아래와 같은 문법을 가지고 있다.

예제

{"userid":"egoing","pwd":"12345567"}

array

배열은 아래와 같은 문법을 가지고 있다.

예제

[1,2,3,4]

Value

위에서 사용된 Value는 값을 의미하는데 큰 따옴표로 묶인 문자나 숫자, 불린 값이 사용된다.

예제

문자 : "헬로우 월드"
숫자 : 1
불린 : true

String

문자열은 아래와 같은 문법을 가지고 있다.

number

각 언어별로 JSON을 사용하는 방법

JSON의 홈페이지를 참고 한다.

코스 전체목록