네트워크 : JSON

JSON ( JavaScript Object Notation )

* Javascript에서 객체를 만들 때 사용하는 일종의 데이터 표준을 의미한다.

* 사람이 읽고 쓰기가 쉽고, 기계도 분석과 생성이 용이하다. 데이터의 용량도 작다.

* 설정의 저장이나 데이터 전송 등에 많이 사용된다.

* JSON이 지원하는 데이터 형식 등 자세한 내용은 이쪽 ->>> http://www.json.org/json-ko.html

• JSON API

* JSON.parse();

인자로 전달된 문자열을 JavaScript의 데이터로 변환.

* JSON.stringify();

인자로 전달된 JavaScript 데이터를 문자열로 변환.

• JSON을 이용한 AJAX 통신

* AJAX를 이용한 타임라인 항목을 리스트로 표현하는 예제

<!--  timezones.php -->
<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo implode(',', $timezones);    // 1)
?>
<!-- ajax.html --><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', './timezones.php');
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            var _tzs = xhr.responseText;
            var tzs = _tzs.split(',');    // 2) 서버에서 전송한 데이터를 배열로 만듬
            var _str = '';                // 3)
            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>

- implode    :    문자열로 배열 원소를 결합한다.

- split        :    인자의 값을 기준으로 문자를 잘라 배열로 만든다.     

=> 서버에서 전송된 Asia/Aeoul, America/New_York을 split(',')를 하면 ['Aasia/Seoul','America/New_York']가 만들어진다.

=> 여기까지 배열을 클라이언트로 전송하기 위해 콤마(,)로 구분된 문자열을 JavaScript에서 이를 받아 다시 콤마로 구분된 배열로 만들었다.  

- 결과적으로 PHP의 배열을 그대로 JavaScript에서 사용할 수 있도록,

        JavaScript의 배열을 그대로 PHP에서 사용할 수 있다록 JSON을 사용한다.

* JSON을 이용해 타임라인의 항목을 리스트로 표현 (서버에서 전송한 Json 데이터를 출력)

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



<!-- demoJson1.html -->

<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', './j_timezones.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> 

- header 부분    :    전송할 데이터 타입의 형식을 지정하기 위해

- json_encode    :    PHP의 데이터를 JSON 형식으로 전환해주는 PHP 내장함수

- ajax의 var tzs = _tzs.split(','); 부분이  var tzs = JSON.parse(_tzs); 로 변경되었다.

=> 서버에서 전송한 PHP 배열 데이터를 JavaScript의 배열로 만들 수 있다.

•  결과

* 서버로 JSON 데이터 전송 

<!-- timezones2.php -->

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



<!-- demoJson2.html -->

<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', './timezones2.php');
    xhr.onreadystatechange = function(){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }

	//데이터 형식 (ajax와 다른 부분)
    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_decode    :    JSON 문자열 디코드, 문자열을 받아 PHP 변수로 변환한다. true이면 Object는 연관 배열로 변환.

- file_get_contents('php://input')    :    $_POST는 헤더에 포함된 POST 데이터를 파싱해서 가져가지만 이 코드를 작성하게 되면

파싱하기 전의 POST 데이터를 가져가게 된다.