본문 바로가기
Programming/JavaScript

JSON이란?

by 한 땀; 한 땀; 2021. 8. 4.

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다.

 

위와 같이 쓰면 무슨 소리인지 모르니 예제를 통해 설명하겠다.

 

아래는 서버 측에서 실행되는 언어인 PHP이다.

<?php 
  $number=[1,2,3,4,5];
?>

 위의 PHP로 작성된 number 배열을 웹브라우져로 전송하고 싶지만 배열을 전송할 수 있는 방법은 없다.

하지만 JSON을 이용하면 배열도 객체도 전송할 수 있다. 또한 JSON은 C, JAVA, Perl 등 거의 모든 언어에서 사용할 수 있다. 

 

만약 php의 배열을 자바스크립트에 전달하고 싶다면 아래와 같이 php함수인 implode 함수를 통해 문자열로 변경해준 후 자바스크립트에서 문자열을 받아 배열로 변환해 사용하면 된다. 

<?php 
  $number=[1,2,3,4,5];
  echo implode(',' ,$number); 
  // implode 함수를 통해 각각의 배열 요소를 ,(콤마) 형식의 문자열로 저장한다.
?>
<script>
  var PhpString = "1,2,3,4,5"; // php에서 받은 문자열
  var JsArray = PhpString.split(','); // split 함수를 통해 ,(콤마)를 기준으로 배열 원소에 담는다.
</script>

위와 같이 JSON을 사용하지 않고도 php에서 문자열로 변환하고 js에서 다시 배열로 만들어 사용할 수 있지만 코드가 복잡해지고 객체와 다차원 배열 등을 사용하면 위처럼 간단하게 해결할 수가 없다.

 

따라서 JSON을 이용해 아래와 같이 php을 배열로 전송해 js에서 배열로 받을 수 있다.

<?php
  $number=[1,2,3,4,5];
  echo json_encode(',', $number); // 데이터 형식을 JSON 형식 데이터로 변환해준다.
?>
<script>
  var PhpString = php에서 받은 문자열
  var JsArray = JSON.parse(PhpString); // JSON 객체의 parse 메소드를 통해 배열로 저장한다.
</script>

 

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

 

위의 JSON 홈페이지를 통해 JSON의 문법과 지원하는 Type, 지원하는 언어와 라이브러리를 확인할 수 있다.

'Programming > JavaScript' 카테고리의 다른 글

Open API 가져오기  (0) 2021.08.08
Node.js 웹서버 구축  (0) 2021.08.08
Ajax 통신이란? (PHP)  (0) 2021.08.04

댓글