javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

javascript 수업 HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

JSON

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

JSON이란?

서로 다른 언어들간에 데이터를 주고 받는 여러 방법이 있다. 대표적인 것이 XML인데, XML은 문법이 복잡하고, 엄격한 표현규칙으로 인해서 json 대비 데이터의 용량이 커진다는 단점이 있다.

JSON은 경량의 데이터 교환 형식으로 JavaScript에서 숫자와 배열등을 만드는 형식을 차용해서 이것을 다른 언어에서도 사용할 수 있도록 한 텍스트 형식이다. 

홈페이지

json.org

예제

JavaScript와 PHP는 서로 다른 언어다. 그렇기 때문에 배열이나 객체를 주고 받는 것이 쉽지 않다. 이럴 때 JSON을 사용하면 편리하다. 아래는 예제는 JavaScript와 PHP가 객체를 주고 받는 방법을 보여준다. 

JSON은 최신 브라우저에서 기본적으로 제공되기 때문에 특별한 처리가 필요 없다. 하지만 오래된 브라우저는 JSON을 지원하지 않는다. json2 라이브러리를 사용하면 오래된 브라우저에서도 JSON을 사용할 수 있다. https://github.com/douglascrockford/JSON-js

json.html - (github)

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"/>
		<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
		<script>
			function login(){
				var userid = document.getElementById('userid').value;
				var pwd = document.getElementById('pwd').value;
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				    xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
				    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
				    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var resp = JSON.parse(xmlhttp.responseText);
					var str = '<ul>';
					for(name in resp){
						str += '<li>'+name+' : '+resp[name]+'</li>';
					}
					document.getElementById("list").innerHTML = str;
				    }
				}
				var userObj = new Object();
				userObj.userid = userid;
				userObj.pwd = pwd;
				xmlhttp.open("GET", './json.php?data='+JSON.stringify(userObj), true);
				xmlhttp.send();
				return false;
			}
		</script>	
	</head>
	<body>
		<form>
			<input type="text" id="userid" />
			<input type="text" id="pwd" />
			<input type="button" onclick="login()" value="조회" />
		</form>	
		<div id="list">
			
		</div>
	</body>
</html>

아래 예제는 위의 예제에서 전송한 데이터를 받아서 몇가지 부가정보를 추가해서 json으로 인코드한 후에 다시 반환하는 PHP 코드다. 

json.php - (github)

<?php
$userinfo = json_decode($_GET['data']);
$userinfo->address = 'seoul';
$userinfo->phonenumber = '01023456789';
echo json_encode($userinfo);
?>

json의 형식

object

객체는 아래와 같은 문법을 가지고 있다.

예제

{"userid":"egoing","pwd":"12345567"}

array

배열은 아래와 같은 문법을 가지고 있다. 

예제

[1,2,3,4]

Value

위에서 사용된 Value는 값을 의미하는데 큰 따옴표로 묶인 문자나 숫자, 불린 값이 사용된다.

예제

  • 문자 : "헬로우 월드"
  • 숫자 : 1
  • 불린 : true

String

문자열은 아래와 같은 문법을 가지고 있다. 

number

각 언어별로 JSON을 사용하는 방법

JSON의 홈페이지를 참고 한다. 

참고

댓글

댓글 본문
작성자
비밀번호
  1. 감나무
    강의 정말 짱이네요
    기초도 몰랐는데 많은 도움 되었습니다
    감사합니다
  2. 조명기
    json.html에서 input 조회버튼이 눌르면 jsp.php갔다가 데이터 내용을 가지고 와서 div에 나와야되는데
    조회버튼을 누르면 이동되는 모습이 하나도 보여지지 않고 출력조차 되지 않습니다,
    이유가 뭔지 잘몰라 계속 찾아보고 있지만...알고 계신다면 답변좀 주세요.
  3. 샤핀
    클라이언트부터 시작했던 제가 답답해 했던 모르던 개념들이 생활코딩을 통해서 서버사이드 쪽을 공부해 나가니 조금씩 풀리네요.
    기초 책에는 xml에 관한 파서 같은 것도 너무 조금만 언급되어 있어서 정말... 뭔지 몰라서 엄청 힘들었었는데 말이죠 ^^;;
    좋은 강의 감사합니다.
  4. 나무마루
    JSON을 알게 되었네요.
  5. 호지니
    정말 잘 읽었습니다 ~ ^^
    도움 많이 됐어요.

    참고로 읽으면서
    아래는 예제는(이전) = > 아래 예제는(수정)
    오타 있어서 알려드려요.
  6. 구글맵레드닷맨
    이런것이었군요! 감사합니다 !
  7. HwangTY
    xml이 무엇이고 그안에 json이 무엇인지 알게되었네요.
  8. 포스만빵
    표가 머리에 쏙 박히네요.. ㅋㅋ 그치만 어렵다는...쩝
  9. 서리
    json 말은 많이 들어 봤는데 이게 뭔가 생각했는데 쉽게 말하자면 데이터를 변환,저장하는 라이브러리 였군요...ㅎㅎ
    많이 배우고 갑니다^^
  10. 박지인
    자바스크립트 수업 잘 들었습니다. 좋은 강의 감사드립니다.+_+
  11. 상주 이
    감사합니다.
  12. Chris
    세상엔 천재들이 참 많네요...
  13. egoing
    그렇다면 json 모듈이 설치되어 있지 않아서 일 수 있습니다. 제 답변이 어렵게 느껴지시면 후속 질문 주세요. 지금 모바일 환경이라 무언가 대응하기가 마땅치가 않네여.
    2013년 3월 3일 일요일에 Disqus님이 작성:
    대화보기
    • Jae Young Park
      json_decode 명령어만 먹히지않는것 같은데...
      대화보기
      • Jae Young Park
        다른 컴퓨터에서는 해보니까 또 되는데 이게 php나 그런데서 설정을 해줘야 되나요?윈도운 환경에서 apmsetup을 사용하고 있는데 ㅠ맥에서는 mamp를 쓰고 있는데 되구 apmsetup은 안되네요
        대화보기
        • Guest
          2번째 동영상 강의 중에서 코드를 그대로 옮겨서 실행해 봤는데왜 json.php로 넘기지 못하는 걸까요 alert 명령어를 넣어보니까 json은 작동하는 것 같은데 ㅠㅠ 알려주세요 ㅠ
        • 누렁이
          좋은 강의 감사합니다! =D
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기