[ JavaScript ] JS JSON이란? (feat. Ajax)

 

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

-  JSON

 

 

 

 

JSON은 JavaScript Object Notation의 약자로,

 

JavaScript에서 객체를 만들 때 사용하는 표현식을 의미합니다.

 

 

이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작습니다.

 

이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용됩니다.

 

 

JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조하면 됩니다.

 

 

 

www.json.org/json-ko.html

JSON

 

 

 

- 자주쓰이는 JSON API

 

 

ECMAscript 5에는 JSON을 공식적으로 지원하는 API가 포함되었습니다.

 

 

JSON.parse()

 

인자로 전달된 문사열을 자바스크립트의 데이터로 변환하는 API입니다.

 

 

JSON.stringify()

 

인자로 전달된 자바스크립트의 데이터를 문자열로 변환하는 API입니다.

 

 

 

- JSON API

 

 

JSON 은 서버와 통신할 때 진가가 드러납니다.

 

바로 전 포스팅인 Ajax 내용을 조금 수정해서,

 

타임라인의 항목을 리스트로 표현하는 애플리케이션을 구현하는 코드를 작성해보도록 하겠습니다.

 

 

 

 

우선, 서버 측에서는 타임라인 리스트를 콤마(,) 로 구분해서 전달합니다.

 

 

 

 

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo implode(',', $timezones);
?>

 

 

 

결과로,  Asia/Seoul,America/New_York 문자열이 출력됩니다.

 

 

 

클라이언트 측에서는 이를 받아 아래와 같이 처리합니다.

 

 

 

 

<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>

 

 

 

우리가 이 코드에서 유심히 봐야할 부분은, 바로 이 부분입니다.

 

 

 

var _tzs = xhr.responseText;
var tzs = _tzs.split(',');
var _str = '';

 

 

split 메소드는 인자의 값을 기준으로 해 문자를 잘라 배열로 만들어주는 메소드입니다.

 

서버에서 전송한 문자열을 split 메소드로 배열로 만들면

 

 

['Aasia/Seoul','America/New_York']

 

 

 

위와 같은 배열이 만들어집니다.

 

 

 

 

PHP의 배열을 클라이언트로 전송하기 위해서 콤마로 구분된 문자열을 만들었고,

자바스크립트에서는 이를 받아서 콤마를 구분자로 다시 배열로 만들었습니다.

 

 

만약 PHP의 배열을 그대로 자바스크립트에서 사용할 수 있다면 어떨까요?

 

반대로 자바스크립트의 배열을 그대로 PHP에서 사용할 수 있다면 얼마나 편리할까요?

 

 

 

이 때 사용하는 것이 JSON인 것입니다.

 

 

위의 예제를 JSON 화 시켜보도록 하겠습니다.

 

 

 

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
header('Content-Type: application/json');
echo json_encode($timezones);
?>

 

 

json_encode 는 PHP 의 데이터를 JSON 형식으로 전환해주는 PHP의 내장함수 입니다.

 

 

php 에서 echo 된 출력 결과는 아래와 같습니다.

 

 

 

["Asia\/Seoul","America\/New_York"]

 

 

 

이를 처리하는 JavaScript 코드를 살펴봅시다.

 

 

<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> 

 

 

 

var tzs = JSON.parse(_tzs);

 

 

바로 위와 같은 코드를 통해서 서버에서 전송한 JSON 데이터를

 

javascript 의 배열로 만들 수 있게되는 것입니다.

 

 

 

 

서버로 JSON 데이터를 전송하는 것도 가능합니다.

 

 

아래의 예제를 봅시다.

 

 

 

<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>

 

 

JSON.stringfy() 메소드가 자바스크립트를 JSON 형식으로 바꿔주는 역할을 합니다.

 

 

 

<?php
$data = json_decode(file_get_contents('php://input'), true);
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($data['timezone']));
echo $d1->format($data['format']);
?>

 

 

서버측(php) 에서는 json_decode 를 통하여 JSON 을 php로 변경할 수 있습니다.

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.