제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. getJSON() 메소드는 언제 사용할까요? getJSON()은 비동기식으로 서버와 접속해 데이터를 불러올 때 사용하는 점은 같으나 JSON 타입의 데이터를 불러옵니다. 이는 ajax() 메소드의 dataType: 'json' 과 동일한 역할을 수행합니다.

$.ajax({dataType: 'json', ... }) // 왼쪽의 축약형 getSON() 메소드

일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.

getJSON(url, data[Option], callback function)
위에서 보는 바와 같이 ajax()의 축약 형태는 대부분 위와 같은 방식으로 사용된다. 위에서 data는 옵션값으로 선택이 가능하며 전달할 쿼리스트링 값을 의미한다. 그렇다면 아래에서는 getJSON()을 실제로 사용한 예제를 알아보도록 하자.


! getJSON() 예제소스 코드보기


$.getJSON("test.json", function (data) {
var words = []; // 받아올 데이터를 저장할 words 배열 선언
$.each(data, function (key, value) {
words.push(value);
});

         var wordsStr = words.join();
$('body').html(wordsStr);
}


/* test.json 파일 */
{
   'name': 'who',
   'job': 'soldier',
   'age': '28';
}


위 예제를 설명하면 아래와 같다.

1. getJSON() 메소드를 사용하여 test.json 파일을 읽어와 콜백함수로 전달
2. 전달된 콜백함수의 값들을 미리 선언한 배열 words에 배열값으로 각각 추가 // each() 반복문을 사용
3. 배열 값을 join()을 통해 모두 합친 후 body 태그에 삽입


위 과정을 통해 정상적으로 비동기 방식으로 json 파일을 불러다. 참고로 아래에 위에 사용된 each() 메소드는 배열 또는 객체가 가진 값을 사용해 반복문을 만들어 주는 제이쿼리 메소드로 가져온 json값을 배열에 넣기 위하여 사용되었으며 each()는 for() 반복문으로 바꾸어 수행할 수 있으나 배열 및 객체 등의 값을 사용할 경우 each()를 사용하면 매우 편리하다.