| jQuery.getJSON, JSON 데이터를 로드 |
|
|
  |
8년 전
|
jQuery.getJSON( url [, data] [, success(data, textStatus, 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)XHR 나 textStatus 인자는 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);
});
|
|
 추천 : 310 |
추천
목록
|
|
