Javascript 네트워크 통신 - JSON

 

 

JSON

 

 

SON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 

 

 

 

 

 

 

 

JSON API

 

 

• JSON.parse() : 인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다.

 

• JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.

 

 

 

 

 

 

 

 

 

Ajax와 JSON

 

 

 

우선 아래 코드와 같이 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다.

<?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는 인자의 값을 기준으로 문자를 잘라서 배열로 만들고 서버에서 전송한 Asia/Seoul,America/New_York를 split(',')하면 배열 ['Aasia/Seoul','America/New_York']가 만들어진다.
• PHP의 배열을 클라이언트로 전송하기 위해서 콤마로 구분된 문자열을 만들었다. 자바스크립트에서는 이를 받아서 콤마를 구분자로 다시 배열로 만들었다. 

 

 

 

 

 

 

 

 

하지만 이때 더 편리하게 PHP의 배열을 그대로 자바스크립트에서 사용할 수 있고 반대로 자바스크립트의 배열을 그대로 PHP에서 사용할 수 있게 사용하는 것이 JSON이다. 

↓

서버 PHP

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

위의 코드 중 json_encode는 PHP의 데이터를 JSON 형식으로 전환해주는 PHP의 내장함수다.

 

 

↓

결과

["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', './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 데이터 전송

 

 

클라이언트

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

xhr.send(JSON.stringify(data)); 부분을 보면 JSON 데이터를 서버로 보낸 것을 확인 할 수 있다.

 

 

 

↓

 

 

서버 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']);
?>

JSON 데이터를 받은 서버에서 PHP을 통해 처리하는 과정을 담고 있다.

 

 

 

 

 

 

 

 

 

 

 

jQuery JSON 처리

 

 

$.ajax를 이용해서 JSON을 처리할 수 있다.

 

 

 

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

↓

<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time3.php',
            dataType:'json',
            success:function(data){
                var str = '';
                for(var name in data){
                    str += '<li>'+data[name]+'</li>';
                }
                $('#timezones').html('<ul>'+str+'</ul>');
            }
        })
    })
</script>

jQuery 덕분에 더 간결하게 JSON 데이터를 처리할 수 있게 되었다.