홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
운.영.자.1대1.상담
온라이브 음악방송
음악방송 앱 다운로드
보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
jQuery.getJSON, JSON 데이터를 로드
5년 전
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);
    });
추천추천 : 198 추천 목록
번호 제목
3,024
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,023
 CSS Layout 수평 & 수직 정렬
3,022
 여러 도메인들 간 쿠키 공유하기
3,021
 태그 사이에 있는 텍스트를 추출
3,020
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,019
 쿠키 생성,가져오기,삭제
3,018
 사용자 함수 모음
3,017
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,016
 [HTML5] <video> - DOM으로 제어하기
3,015
 HTML5 video 태그에서 영상 좌우반전
3,014
 PHP - 특정 태그 및 문자열 추출, 제거
3,013
 [PHP] define과 defined의 차이
3,012
 우클릭 완벽차단 스크립트
3,011
 iframe 높이 100% 맞추기
3,010
 curl 함수를 이용한 HTTP REFERER 변경
3,009
 윈도우10 시스템 파일 및 Dism 검사
3,008
 텍스트 줄바꿈, 글자자르기 CSS
3,007
 jQuery Mobile에서 유용한 코드 10가지.
3,006
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,005
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,004
 [jQuery] jQuery Quick API
3,003
 [ transition ] 링크 hover 색상 변화 속도 조절
3,002
 PHP 5.3.0 에서 사라진 함수들 대체
3,001
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,000
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
목록
환상의뽕짝카페
트로트티비
뽕짝아가씨
트롯맘
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
POP TOP BEST

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.