제이쿼리에서 JSON 사용하기

PC 브라우저와 서버 그리고 Ajax를 연동할 때는 XML 형식으로 데이터를 주고받습니다. 모바일 사용량이 많은 요즘은 모바일에서도 서버와 Ajax로 연동할 경우 내부적으로 여러 단계의 처리 과정을 거치게 되므로 자원이 열악한 모바일 환경은 속도 면에서 불리합니다. 따라서 모바일에서는 대부분 XML보다 형식이 단순한 JSON으로 데이터를 주고받습니다. 이번에는 JSON을 이용해 Ajax 기능을 사용해 보겠습니다.

 

JSON은 name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식입니다. 비동기 브라우저/서버 통신(Ajax)를 위해 XML을 대체하는 데이터 전송 형식 중 하나라고 이해하면 됩니다. 근본은 자바스크립트에서 파생된 것으로 자바스크립트의 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이여서 쉽게 사용할 수 있습니다.

 

JSON에 사용하는 기본 자료형은 아래 표와 같습니다.

템플릿	종류	예
수(Number)	정수	76.197.750,-11,-234
	실수(고정소수점)	3.14, -2.717,45.78
	실수(보동소수점)	1e4, 2.5e34, 5.67e-9, 7.66E-3
문자열	문자열	"1234" "true" "apple-num" "사람" "\"JSP\""
	제어 문자	\b (백스페이스) \f (폼 피드) \n (개행) \r (캐리지 반환) \t (탭) \" (따옴표) \/ (슬래시) \\ (역슬래시)
배열	배열은 대괄호[]로 나타냅니다. 배열의 각 요소는 기본 자료형이거나 배열 객체입니다. 각 요소들은 콤마(,)로 구별합니다.	"name": ["홍길동", "이순신", "임꺽정"] // 대괄호 안에 배열 요소를 콤마(,)로 구분해서 나열합니다.
객체	JSON 객체는 중괄호()로 둘러싸서 표현합니다. 콤마(,)를 사용해 여러 프로퍼티를 포함할 수 있습니다.	{    "name": "홍길동",    "age": 16,    "weight": 67, } // 중괄호 안에 name/value 쌍을 콤마(,)로 구분해서 나열합니다.

 

다음은 배열 이름이 members이고 JSON 객체를 배열 요소로 가지는 JSON 배열의 예시입니다.

"members": [       {"name": "홍길동", "age": 22, "gender": "남", "nick": "날센돌이"},       {"name": "손흥민", "age": 30, "gender": "남", "nick": "탱크"},       {"name": "김연아", "age": 24, "gender": "여", "nick": "갈치"} ]