본문 바로가기
프로그래밍/jQuery

jQuery.getJSON, JSON 데이터를 로드

by zoo10 2012. 7. 2.

jQuery.getJSON()

원문 링크 http://api.jquery.com/jQuery.getJSON/

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )Returns : jqXHR

개요 : HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드합니다.

  • jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
  • url 정보를 요청할 URL
  • data 서버로 보낼 data
  • success(data, textStatus, jqXHR) 요청이 성공하면 실행될 콜백 함수

이 함수의 가장 간단한 사용법은 아래와 같습니다.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

서버로 보낼 Data는 URL 쿼리 스트링에 추가됩니다. 만일 data 파라미터가 object라면, 문자열과 url-encoded를 통해 변환된 후 URL에 추가되어 보내지게 됩니다.

대부분은 성공 시에 처리하는 로직을 가지고 있습니다.

$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

위 예는, 아래와 같은 JSON 형태의 응답데이터를 처리한다고 가정합니다.

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

스크립트를 설명하자면, 결과를 받아서 루프를 돌면서 데이터를 배열에 담고, 그 데이터를 ul 에 리스트화 하고, 마지막으로 body 에 추가시키는 겁니다.

success 콜백함수는 JavaScript 객체 또는 JSON 구조의 배열 형태의 데이터를 전달받을 수 있고 그 데이터를 다루는데 $.parseJSON() 함수를 사용할 수 있습니다. 또한 응답 상태값도 문자열로 넘어옵니다.

jQuery 1.5부터 success 콜백 함수는 "jqXHR" 객체도 받을 수 있게 되었습니다.(jQuery 1.4까지는 XMLHttpRequest 객체를 받았음). 하지만, JSONP 나 크로스도메인(cross-domain)의 GET 요청 시에는 XHR을 사용하지 못합니다. 이러한 경우에서는 (j)XHRtextStatus 인자는 success 콜백 함수에서 "undefined"으로 인식됩니다.

Important: jQuery 1.4 에서는, 만약 JSON 파일에 syntax 오류가 있었다면, 요청이 fail로 처리되었습니다. 이런 이유로 JSON 데이터를 손으로 자주 편집하는 것을 피해야 했습니다. JSON은 JavaScript의 객체 표기법 보다 더 강력한 구문 규칙을 가진 데이터 교환 포맷입니다. 예를 들어, JSON에서 사용되는 모든 문자들은, 속성이든 값이든, 모두 쌍따옴표(double-quotes)를 사용해야 합니다. JSON 포맷에 대해 더 알고 싶으시면 http://json.org/.

위의 얘기대로 쌍따옴표를 써야합니다만;; 요즘은 좀 루즈해지긴 했습니다. 그래도 특정한 상황에서 쌍따옴표를 사용하지 않아서 에러가 생기는 경우가 종종 발생하니 구문 규칙을 지키시는 것이 좋습니다.

JSONP

만약 URL에 "callback=?" 이라는 문자열이 포함 되었다면, 이 요청은 JSONP 로 대체됩니다. jsonp 데이터 타입에 대한 저 자세한 내용은 $.ajax() 함수에 기술되어 있습니다.

The jqXHR Object

jQuery 1.5부터, 모든 jQuery의 Ajax 함수는 XMLHTTPRequest 객체의 상위집합을 반환받을 수 있게 되었습니다. 이것을 jQuery XHR 객체 또는 "jqXHR" 라고 하며, $.get()을 사용하면 반환받을 수 있도록 구성되었습니다. 이런 약속된 인터페이스 구조는, 모든 속성들, 함수들 그리고 약속된 동작들을 포함합니다.(Deferred object 를 참고하세요). 편의성과 지속성을 위해 콜백명을 $.ajax()에서 사용할 수 있고, 여기에서 .error(), .success(), .complete() 함수들을 이용할 수 있습니다. 이런 함수들은 모두 동일한 이름으로 사용할 수 있는 인자들을 반환받아 처리할 수 있습니다.

또한, jQuery 1.5부터 $.get()을 포함하여 체인 형태로 엮어진 여러개의 .success(), .complete(), .error() 들을 단일 요청에 사용할 수 있게 되었고, 요청이 완료된 후에도 이들 콜백을 저정할 수 있습니다. 만일 요청이 이미 완료되었다 하더라도, 다시 불러서 쓸 수 있습니다.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

아래쪽에서 다시 호출해도 여전히 jqxhr은 위에서 반환된 객체와 동일하다는 것입니다. 즉, 중간에 jqxhr에 다른 반환값을 할당(Assign)하지 않았다면 언제던지 같은 결과에 대해 다룰 수 있다는 뜻인것 같습니다.(잠깐 테스트를 해 본 결과입니다.) 이해가 되시나요??

Additional Notes: 브라우저 보안 정책에 의거하여 대부분의 "Ajax" 사용 시 same origin policy를 적용받게 됩니다. Ajax 요청은 다른 도메인, 다른 서브도메인, 다른 프로토콜 간에는 성공되지 못합니다. 만일jQuery.get()를 수행하면 error 코드가 넘어오고, .ajaxError() 함수에서 다루지 않는 한 따로 처리되지 않습니다. Alternatively, as of jQuery 1.5 부터는, jqXHR 객체를 가지고 .error() 함수에서 다룰 수도 있습니다. Script 와 JSONP 요청은 same origin policy restrictions 이 적용되지 않습니다.

예 제  
Flickr JSONP API를 통해 가장 최근의 고양이 사진 4장을 가져옵니다.

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="images">

</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });</script>

</body>
</html>

미리보기

도메인이 다른 경우 JSONP를 사용합니다. 그에 대한 예제입니다.

 

예 제  
test.js 파일에서 JSON 데이터를 로드하고 name 에 접근합니다.

$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
 });

 

예 제  
데이터를 보내 test.js에서 JSON 데이터를 로드하고, name 에 접근합니다.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json) {
    alert("JSON Data: " + json.users[3].name);
    });

 

JSON 스트럭쳐를 써 보셨는지 모르겠지만, 아주 유용한 데이터 교환 방식입니다. 확장성도 좋고 직관성도 좋고 다루기도 쉽습니다. 잘 익혀두시면 두고두고 써먹으실 겁니다. 꼭 챙겨두세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.