[Js] JSON | Ajax와 JSON

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

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#

웹브라우저 Javascript (자바스크립트) - 인프런

---

 JSON이란?

JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다.

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

 

객체를 만들 때는 { }안에다가 값을 넣어야 되며, 하나씩 구분하는 것은 , 로 한다.

또한, 하나의 객체는 키: 값 형식으로 작성한다.

 

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

 

JSON에 대한 자세한 내용은 아래 주소를 참조하면 된다.

( http://www.json.org/json-ko.html )

---

 JSON API 

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

 JSON.parse() 

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

 JSON.stringify() 

인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.

---

 Ajax와 JSON 

JSON의 진가는 서버와 통신을 할 때 드러난다.

---

time.php

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

[ 실행 결과 ]

Asia/Seoul,America/New_York

위와 같이 서버쪽에서 timezones라는 배열을 콤마로 구분해서 전달한다.

클라이언트 측에서는 이를 받아서 처리한다.

---

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

위 소스 코드중 아래 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

<?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"]

이와 같이 배열로 전송되는 것을 확인할 수 있다.

---

이를 처리하는 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> 

아래 코드는 서버에서 전송한 JSON 데이터를 JavaScript의 배열로 만들수 있었다.

var tzs = JSON.parse(_tzs);

---

 서버로 데이터 전송 

서버로 JSON 데이터를 전송하는 것도 가능하다. 아래 예제를 참고하자.

 

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

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