JSON이란?
JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다. JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조한다.
http://www.json.org/json-ko.html
JSON API
ECMAscript 5에는 JSON을 공식적으로 지원하는 API가 포함되었다.
JSON.parse()
인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다.
JSON.stringify()
인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.
Ajax와 JSON
JSON의 진가는 서버와 통신을 할 때 드러난다. Ajax 수업의 내용을 조금 개조해서 타임라인의 항목을 리스트로 표현하는 에플리케이션을 만들어보자.
우선 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다.
time.php
1 2 3 4 | <?php$timezones = ["Asia/Seoul", "America/New_York"];echo implode(',', $timezones);?> |
결과
1 | Asia/Seoul,America/New_York |
클라이언트 측에서는 이를 받아서 처리한다.
demo2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <p id="timezones"></p><input type="button" id="execute" value="execute" /><script>document.querySelector('input').addEventListener('click', function(event){ var xhr = new XMLHttpRequest(); xhr.open('GET', './time.php'); xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ var _tzs = xhr.responseText; var tzs = _tzs.split(','); var _str = ''; for(var i = 0; i< tzs.length; i++){ _str += '<li>'+tzs[i]+'</li>'; } _str = '<ul>'+_str+'</ul>'; document.querySelector('#timezones').innerHTML = _str; } } xhr.send(); }); </script> |
주목해야 할 부분은 아래와 같다.
1 2 3 | var _tzs = xhr.responseText;var tzs = _tzs.split(',');var _str = ''; |
메소드 split는 인자의 값을 기준으로 문자를 잘라서 배열로 만든다. 서버에서 전송한 Asia/Seoul,America/New_York를 split(',')하면 배열 ['Aasia/Seoul','America/New_York']가 만들어진다.
PHP의 배열을 클라이언트로 전송하기 위해서 콤마로 구분된 문자열을 만들었다. 자바스크립트에서는 이를 받아서 콤마를 구분자로 다시 배열로 만들었다.
만약 PHP의 배열을 그대로 자바스크립트에서 사용할 수 있다면? 반대로 자바스크립트의 배열을 그대로 PHP에서 사용할 수 있다면 얼마나 편리할까? 이 때 사용하는 것이 JSON이다.
위의 예제를 JSON화시켜보자.
time2.php
1 2 3 4 5 | <?php$timezones = ["Asia/Seoul", "America/New_York"];header('Content-Type: application/json');echo json_encode($timezones);?> |
json_encode는 PHP의 데이터를 JSON 형식으로 전환해주는 PHP의 내장함수다.
결과
1 | ["Asia\/Seoul","America\/New_York"] |
이를 처리하는 JavaScript 코드를 보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <p id="timezones"></p><input type="button" id="execute" value="execute" /><script>document.querySelector('input').addEventListener('click', function(event){ var xhr = new XMLHttpRequest(); xhr.open('GET', './time2.php'); xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ var _tzs = xhr.responseText; var tzs = JSON.parse(_tzs); var _str = ''; for(var i = 0; i< tzs.length; i++){ _str += '<li>'+tzs[i]+'</li>'; } _str = '<ul>'+_str+'</ul>'; document.querySelector('#timezones').innerHTML = _str; } } xhr.send(); }); </script> |
아래 코드를 통해서 서버에서 전송한 JSON 데이터를 JavaScript의 배열로 만들수 있었다.
1 | var tzs = JSON.parse(_tzs); |
서버로 데이터 전송
서버로 JSON 데이터를 전송하는 것도 가능하다. 아래 예제를 참고하자.
demo4.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <p>time : <span id="time"></span></p><select id="timezone"> <option value="Asia/Seoul">asia/seoul</option> <option value="America/New_York">America/New_York</option></select><select id="format"> <option value="Y-m-d H:i:s">Y-m-d H:i:s</option> <option value="Y-m-d">Y-m-d</option></select><input type="button" id="execute" value="execute" /><script>document.querySelector('input').addEventListener('click', function(event){ var xhr = new XMLHttpRequest(); xhr.open('POST', './time3.php'); xhr.onreadystatechange = function(){ document.querySelector('#time').innerHTML = xhr.responseText; } var data = new Object(); data.timezone = document.getElementById('timezone').value; data.format = document.getElementById('format').value; xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify(data)); });</script> |
time3.php
1 2 3 4 5 6 | <?php$d1 = new DateTime;$d1->setTimezone(new DateTimezone($data['timezone']));echo $d1->format($data['format']);?> |
