ajax 기본 기능
- jQuery.ajax();
- jQuery.get();
- jQuery.post();
jQuery.ajax();
ajax 기본 예제
<script>
$(document).ready(function() {
jQuery.ajax({
type:"GET",
url:"/test",
dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
success : function(data) {
// 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.
// TODO
},
complete : function(data) {
// 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.
// TODO
},
error : function(xhr, status, error) {
alert("에러발생");
}
});
});
</script>
ajax 함수 안의 settings
| 설정 | 설명 | default | type |
| url | request를 전달할 url명 | N/A | url string |
| data | request에 담아 전달할 data명과 data값 | N/A | String/Plain Object/Array |
| contentType | server로 데이터를 전달할 때 contentType | 'application/x-www-form-urlencoded; charset=UTF-8' | contentType String |
| dataType | 서버로부터 전달받을 데이터 타입 | xml, json, script, or html | xml/html/script/json/jsonp/multiple, space-separated values |
| statusCode | HTTP 상태코드에 따라 분기처리되는 함수 | N/A | 상태코드로 분리되는 함수 |
| beforeSend | request가 서버로 전달되기 전에 호출되는 콜백함수 | N/A | Function( jqXHR jqXHR, PlainObject settings ) |
| error | 요청을 실패할 경우 호출되는 함수 | N/A | Function( jqXHR jqXHR, String textStatus, String errorThrown ) |
| success | 요청에 성공할 경우 호출되는 함수 | N/A | Function( PlainObject data, String textStatus, jqXHR jqXHR ) |
| crossDomain | crossDomain request(jsonP와 같은)를 강제할 때 설정(cross-domain request설정 필요) | same-domain request에서 false, cross-domain request에서는 true | Boolean |
jQuery.get();
jQuery.get()은 ajax를 GET요청하는 함수이며 jqXHR을 반환받는다. 따라서 $.ajax()와 동일하게 done, fail, always콜백함수를 쓸 수 있다.
get 함수 설정
| 설정 | 설명 | default | type |
| url | request를 전달할 url명 | N/A | url String |
| data | request에 담아 전달할 data명과 data값 | N/A | String/Plain Object |
| dataType | 서버로부터 전달받을 데이터 타입 | xml, json, script, or html | String |
| success | 요청에 성공할 경우 호출되는 함수 | N/A | Function( PlainObject data, String textStatus, jqXHR jqXHR ) |
예제 1
url만 호출하고 결과값은 무시하는 경우
$.get( "example.do" );
예제 2
url로 데이터만 보내고 결과는 무시하는 경우
$.get( "example.do", { name: "gil-dong", location: "seoul" } );
예제 3
url를 호출하고 결과값을 Alert창으로 띄우는 경우
$.get( "test.php", function( data ) {
alert( "Data Loaded: " + data );
});
예제 4
url를 호출하고 결과값을 Alert창으로 띄우는 경우
$.get( "example.do", { name: "gil-dong", location: "seoul" } )
.done(function( data ) {
alert( "Data Loaded: " + data );
});
jQuery.post();
jQuery.post()은 ajax를 POST요청하는 함수이며 jqXHR을 반환받는다. 따라서 ajax(), get()와 동일하게 done, fail, always콜백함수를 쓸 수 있다.
jQuery.post 함수 설정은 get함수와 동일하다.(jQuery.post( url [, data ] [, success ] [, dataType ] ))
예제 1
url만 호출하고 결과값은 무시하는 경우
$.post( "example.do" );
예제 2
url로 데이터만 보내고 결과는 무시하는 경우
$.post( "example.do", { name: "gil-dong", location: "seoul" } );
예제 3
url를 호출하고 결과값을 console log를 남기는 경우
$.post( "example.do", function( data ) {
console.log( data.name );
console.log( data.location );
});
예제 4
url로 데이터를 호출하고 결과값을 Alert창으로 띄우는 경우
$.post( "example.do", { name: "gil-dong", location: "seoul" } )
.done(function( data ) {
alert( "Data Loaded: " + data );
});
Hello world
