제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩

제이쿼리(jQuery) 기초 문법 

Ajax($.getJSON())로 JSON 데이터 바인딩

바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고, 데이터 베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라 부른다.

 

데이터가 바인딩 되는 과정

 

서버언어를 사용해 데이터베이스를 요청했다는 가정하에 가상의 회원정보 데이터를 만들어 사용할 수 있는데,  mockaroo 사이트를 이용하면 데이터베이스에 데이터를 요청하여 받은 것 처럼 회원 정보 데이터 파일(JSON)을 생성할 수 있다.

 

** JSON(JavaScript Object Notation)

자바스크립트의 객체 표기법을 JSON(JavaScript Object Notation)이라고 부른다. JSON은 데이터를 전달할 때 사용하는 표준 형식으로, JSON 표기의 기본형은 {"속성1":"값1, "속성2":"값2", ... }이며 속성(key)과 값(Value)이 하나의 쌍을 이루고 있다.

 

HTML에서 $.getJSON()메소드(데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용)로 JSON의 데이터를 불러온다. 여기서는 다른 JSON 파일을 사용해 가져온다.

 

비동기식 ajax로 JSON데이터 이용하기

 

 

item.json

 

 

자바스크립트의 보안 정책과 외부 데이터 바인딩

자바스크립트의 보안 정책은 자바스크립트로 A 사이트의 데이터를 B 사이트로 불러오는 것을 허용하지 않는다. 이 정책을 동일 출처 원칙(Same-origin policy)이라 한다. 즉 ajax() 메소드로는 서로 다른 도메인의 데이터를 전송할 수 없을 뿐만 아니라 교차 도메인(Cross-Domain)도 허용하지 않는다.

 

서로 다른 사이트에서 데이터를 서로 주고받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 방법이 있다.