홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
jQuery.get() HTTP GET 방식 Ajax 요청
6년 전
jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

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

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
url 정보를 요청할 URL
data 서버로 보낼 data
success(data, textStatus, jqXHR) 요청이 성공하면 실행될 콜백 함수
dataType 서버에서 반환되는 데이터의 타입. Default: 지능형 추측 (xml, json, script, html)
이 함수의 가장 간단한 사용법은 아래와 같습니다.
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 전달되어 집니다. 또한 응답상태값도 문자열로 넘어옵니다.
jQuery 1.5부터 success 콜백 함수는 "jqXHR" 객체도 받을 수 있게 되었습니다.(jQuery 1.4까지는 XMLHttpRequest 객체를 받았음). 하지만, JSONP 나 크로스도메인(cross-domain)의 GET 요청 시에는 XHR을 사용하지 못합니다. 이러한 경우에서는 (j)XHR 나 textStatus 인자는 success 콜백 함수에서 "undefined"으로 인식됩니다.
대부분 성공 시의 핸들러를 지정하여 사용하게 됩니다.
$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});
위 예제는 HTML을 받아서 처리하고 페이지에 집어넣는 것입니다. (딱 보면 아시죠?? ^^)
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() 들을 단일 요청에 사용할 수 있게 되었고, 요청이 완료된 후에도 이들 콜백을 저정할 수 있습니다. 만일 요청이 이미 완료되었다 하더라도, 다시 불러서 쓸 수 있습니다.
// 요청이 완료된 후에 핸들러를 할당하고,
  // 이 요청에 대한 jqxhr 객체는 기억되어 집니다.
  var jqxhr = $.get("example.php", function() {
    alert("success");
  })
  .success(function() { alert("second success"); })
  .error(function() { alert("error"); })
  .complete(function() { alert("complete"); });

  // 이 부분에서 다른 작업을 수행한 후에도 ...

  // 또 다른 완료에 대한 함수를 적용할 수 있습니다.
  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 이 적용되지 않습니다.
예 제  
test.php 에 요청하지만, 반환 결과는 무시합니다.
$.get("test.php");

예 제  
데이터를 포함하여 test.php 에 요청합니다.(단, 반환 결과는 무시합니다.)
$.get("test.php", { name: "John", time: "2pm" } );

예 제  
배열 형태의 데이터를 서버로 보냅니다.(여전히 반환 결과에는 신경쓰지 않습니다.)
$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

예 제  
test.php 의 요청 결과를 알림창으로 보여 줍니다.
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});

예 제  
데이터를 test.cgi 에 보내고 반환 결과를 알림창으로 보여 줍니다.
$.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

예 제  
test.php 페이지가 json 형태의 데이터 (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)를 반환하면 그 데이터를 body에 표시합니다..
$.get("test.php",
   function(data){
     $('body').append( "Name: " + data.name ) // John
              .append( "Time: " + data.time ); //  2pm
   }, "json");
추천추천 : 203 추천 목록
번호 제목
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.