| jQuery.get() HTTP GET 방식 Ajax 요청 |
|
|
  |
10년 전 |
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");
|
|
 추천 : 537 |
추천
목록
|
|
