웹브라우저 JavaScript

JSON

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

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

결과

Asia/Seoul,America/New_York

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

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>

주목해야 할 부분은 아래와 같다.

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다
  2. JustStudy
    2016.07.18 월
    고맙습니다 3.
  3. JustStudy
    2016.07.03 일
    고맙습니다 2.
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. 이주환
    2016. 04. 28
    잘보고갑니다.
  6. JustStudy
    고맙습니다
  7. 국제표준규격
    1. 맞습니다.

    2. 쪼개질 수 있죠. 다만 JSON이나 string형식으로 바꾸어 한번에 전달해야 합니다
    대화보기
    • 국제표준규격
      검색해보니 많이 나오네요.
      http://stackoverflow.com......ost

      stackoverflow에 자세하게 설명되어 있지만 만약 영어가 어려우실 경우
      http://www.phpschool.com......772

      파싱하기 전 raw POST 데이터를 받아올때 사용하네요.
      $_POST는 오직 랩핑된 데이터만 쓰도록 되어 있고요.
      대화보기
      • 코알라
        time3.php 파일코드에서
        $data = json_decode(file_get_contents('php://input'), true);
        의 php://input 이 코드는 무슨뜻이죠?
        검색해도 잘 안나오네요.
      • 궁그미
        궁금한점이 만약 오브젝트의 값자체가 ,가 포함되어있는 문자열이면 어떻게 될까요.
        구분자로서의 쉼표와 그냥 값으로서의 쉼표가 구분이 잘되나요?
        {
        val1:",,,,",
        val2:",,,,,"
        }
        이런 객체를 JSON.parse 한다고 가정한다며요
      • Simon Lee
        아 이거 Linux/Unix안써보신 분들에게는 기술적으로는 설명하기 매우 어려운 질문이네요. :-)

        웹서버(또는 HTTP 프로토콜로 동작하는) 서버역활의 프로그램들은, 접속한 클라이언트에 대해서 통신으로 주고받는 통신채널같은 게 존재합니다. 보통 표준출력(Standard output)이라고 부르는 건데요. (참조: http://ko.perlmaven.com......ion )

        그래서 shell 스크립트에서 echo로 출력하던, php로 만들어서 무언가를 출력하던 간에, 기본적으로는"standard ouput"으로 출력이 됩니다.

        그런데 Terminal(xterm 등)에서 echo를 쓰거나 php에서 print를 하면 이 standard output이 terminal이라서 terminal로 나오는 거고,
        웹 서버에서 (shell script or php를 실행해서) standard output으로 출력시키면 이게 (네트워크 통신을 통해서)"브라우저쪽"으로 전달되는 것입니다.

        쉽게 설명하기 너무 어렵네요...-_-
        대화보기
        • 히쓰리
          안녕하세요. 의문점이 있어서 글을 남깁니다.
          현재 이해하기로 html -> php 로 데이터를 주고,
          경우를 따져 (if 같은) 데이털를 php에서 echo로 반환하는것입니다.

          이것이 맞는지 의문이고, echo가 아닌 변수값으로써 3개의 값을 반환하는것이 가능할까요?
          예를들면,
          echo $d1->format($data['format']); 문장이
          --> echo $d1->'시간';
          --> echo $d1->'분';
          --> echo $d1->'초';
          3개로 쪼깨질 수 있는지 궁금합니다.
        • 쥬슈야
          저도 오류나오길래 혹시해서 댓글 봤는데 해결법을 올려주셨네요.
          그래도 결국 저는 3번째 동영상에서 뭐가뭔지 몰라 좌절했습니다;; 제게 JSON은 좀 광범위해보이네요.
          다른 부분 쭉 배워보고 나중에 다시 도전해야겠네요.
          대화보기
          • 코딩!
            아직 100%로 이해하지 않았지만 반복하면 금방 습득할 것 같습니다!
          • taek171@daum.net
            개념이해가 잘 되네요. 감사합니다.
          • 감나무
            동영상으로 배우니 너무 쉽네요
            기초부터 고급까지 손색이 없네요
            정말 감사하고 수고하셨습니다
          • 벌써자니
            이고잉님 강좌잘봤습니다! 3번째 동영상(JSON의 적용)과 4번째 동영상(Element.classList)의 영상 섬네일에서 차례가 (4/4)로 동일하네요. 혹시나 해서 댓글달아드립니다. 수고하세요!
          • 비둘기
            JavaScript는 클라이언트에서 사용되는 프로그램 언어이고
            (요즘에는 서버용으로 NodeJS를 이용해서? JavaScript를 사용한다고합니다.)
            PHP는 서버에서 사용되는 프로그램 언어입니다.

            클라이언트에서 요청을 하면...
            서버에서 답변을 해줍니다.

            가정에서 사용하는 컴퓨터는 보통 클라이언트고...
            다음이나 네이버등은 서버입니다.
            (http://www.wampserver.com/
            자세히 모릅니다만 이곳에서 프로그램설치해서 PHP공부할 수 있습니다. 개인용 컴퓨터를 서버로 만들어주는 프로그램인 것 같습니다.)
            http://opentutorials.org......669 > 이곳에서 PHP수업하고 있군요.

            익스플로러라는 클라이언트 프로그램으로 다음같은 곳의 서버에 접속해서
            검색서비를 이용하는 것을 생각하면, 클라이언트와 서버의 관계를 알 수 있습니다.

            조금 틀린 것이 있는지 모르겠습니다. 배우고 있는 중이라서요...
            대화보기
            • twinbraid.blogspot.kr
              생활코딩의 수업을 보면
              http://opentutorials.org......233
              php의 역할에 대해 나와있습니다

              php의 존재이유는 html이 고정되어있어서 항상 같은 내용만 보여주기때문에
              일부러 몇몇 부분을 비워두고
              php에서 따로 연산을 해서 html의 비워둔 곳을 채워주는 것입니다
              그럼 그 html을 브라우저가 해석하는 것이죠.

              거기에 php의 변수가 $a 이런식으로 섞여봤자
              그게 변수란건 php만 알뿐입니다. 브라우저는 그대 $a 라고 출력합니다
              그런걸 방지하기 위해 제대로된 것으로 만들어서 출력해줄 필요가 있고
              그것중 하나가 echo 인것입니다.

              아무의미없이 그냥 보여줄려고 프린트 하는게 아니라..
              그 출력이란게 php의 진정한 본래의 목적입니다
              대화보기
              • 하늘을날다
                혹시나 해서 글 올립니다.
                호스팅을 받아서 공부하거나 테스트 하시는 분들은
                php 5.4미만 버전이라서
                아래와 같은 방법으로 배열을 올리면 에러뜹니다.
                에러문구
                ------
                Parse error: syntax error
                unexpected '[' in /home/hosting_users/homesi/www/ajax/time4.php on line 2
                ----
                $timezones = ["Asia/Seoul", "America/New_York"];


                위 부분을
                $timezones = array("Asia/Seoul", "America/New_York");
                이렇게 수정해서 사용하세요.
              • 궁금이
                근데 궁금한게 서버에서 보내는건 echo를 써야지 그것만 서버에서 보내는건가요 ? 아니면 서버에서 보내는것 그러니까 .php 에서 클라이언트로 보내는건 정확히 어떤거인가요 ??? echo가 그냥 프린트 하는걸로 알고있는데 php에서 html로 보내는건 php에 있는 모든 변수인가요 ..? 그부분이 해깔려서요 . .
              • 규빈이아빠
                놀랍네요~~
              • ㅇㅇ
                항상 감사합니다
              • david20
                개념이 바로 잡히네요. 감사합니다^^
              • Jaowl Summer Ahn
                왜 필요한지, 어떻게 적용하는지 이해가 잘 되네요~~ 잘봤습니다 감사합니다'_' !
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기