jQuery.get() HTTP GET 방식 Ajax 요청

jQuery.get()

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

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

개요 : 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");

 

드뎌, 핵심이네요. 다른 건 다 필요없고 제일 마지막 예제가 실사용에 가장 근접할 것 같습니다. 서버 페이지에서 특정한 데이터를 반환하면 받아서 처리하고 화면에 뿌려주는 것이 일반적인 로직이겠죠. 물론 덧붙이자면 test.php 페이지에 어떤 데이터를 보내는 것도 추가되겠지만요. 잘 응용해서 사용하십시용...

그럼 즐프하세요.

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