본문 바로가기
Ajax

jquery 이용한 Ajax 데이터로드하기 JSON편

by 샷타이거 2010. 2. 5.

Ajax 데이터로드하기 JSON편

가장간단한 html을 로드해봤다면 이번엔 JSON파일을 로드해보겠다.

JSON이란?

JavaScript Object Notation으로 xml데이터를 대신하기위해 사용되기도 한다.중괄호 대괄호 등을 사용하여 표현한다. 예제를 보자

[
  { 
    "listN" :  "JSON ", //변수지정 기리고 값설정
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	     "JSON (JavaScript Object Notation) is a lightweight data-interchange format.",
	     "It is easy for humans to read and write.",
		 "It is easy for machines to parse and generate." 
	]//긴문장에서는 대괄호로 묽는다.
  }
]

대괄호는 크게 감사주고 중괄호로 다시 감싸고 안에 데이타가 삽입되어있다. JSON은 "변수지정" : "값" 이방식으로 간단하지만 중괄호 대괄호를 확실하게 써줘야 한다. 하나라도 오차가있으면 읽어들이지못하게 된다.

간단히요약

  • 시작은 [{ 끝맺음은}]
  • "변수지정" : "값"방식으로 입력
  • 긴 문장을 넣을때는 대괄호를 쓸수있다.
  • JSON에 대해 더자히 알고싶다면 이사이트에 가보자http://json.org

    활용

    아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 JSON 데이타를 부를것이다.

    기본적인페이지 소스

    jquery를 이용한 ajax 데이터로드_01

    로드된 데이터가 들어올자리

    그리고 약간꾸며줄 css소스.

    body{ width:960px; text-align:center;}
    #wrapper{ text-align:left;}
    #siadebar{ float:left; border:1px #000 solid; width:200px;}
    #content{ border:1px #000 solid; float:right; width:700px;}
    

    이번엔 불러올 스크립트소스를 만들어보자.html을 부를때 load를 사용했다면 json파일을 부를때는 getJSON을 사용한다

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
       });													  
         return false;
       });
     });
    

    HTML과달리 이건 어디까지나 데이타이다. 따라서 스크립트에서 HTML소스를 만들어줘야한다.다음과 같은 것일 생각하고 만들어 보자

    JSON

    JavaScript Object Notation

    어쩌고 저쩌고`~~

    사실 위와같은 완성된 모습을 생각하고 데이타 소스를 짜는게 젤 편하다.자그럼 여기서 삽입될 데이터는 JSON에서 짜주었고 HTML소스를 생성해보자

        $('#content').empty();
         //먼저 전에 있었던 삽입될 부분#content의 내용을 비운다
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; //h2엘리먼트에 listN의 데이터를 넣는다 html += '

    ' + entry['sunmmary'] + '

    '; //h3엘리먼트에 sunmmary데이터를 넣는다 html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); //append로 삽입 });

    위에서 each()메소드가 사용된것은 여러데이타가 같은 형식으로 있을경우이다. 위에서는 단순히 하나의 데이터를 내가 올렸지만 전화번호부를 생각해보자 무수히 마흔것들이 일관적 양식으로 있을것이다. 따라서 이때 이일이 검색해주면서 패턴을 생성해주는 것이다.

    완성된 최종 소스는 아래

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
        $('#content').empty();
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; html += '

    ' + entry['sunmmary'] + '

    '; html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); }); }); return false; }); });

    요약

    • 불려진 데이타 JSON역시 부른페이지의 css의 영향을 받는다.
    • 로드는 빠르고 간결하다,
    • JSON소스는 상당히 까다롭다. 만들기는 쉽지만 하나의 오류라도 있으면 실행되지않는다.

    마지막을 완성된 예제를 직접보자면 여기를 클릭

    http://sianasiatiger.cafe24.com/study/A_ajax_02.html

댓글