AJAX란??
AJAX란 비동기 JavaScript와 XML을 말합니다. 간단히 말하면, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다.
서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 “비동기성”입니다.
이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.
ajax문법 (JQuery 기준)
$.ajax({
type : 'post', // 타입 (get, post, put 등등)
url : '/test', // 요청할 서버url
async : true, // 비동기화 여부 (default : true)
headers : { // Http header
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType : 'text', // 데이터 타입 (html, xml, json, text 등등)
data : JSON.stringify({ // 보낼 데이터 (Object , String, Array)
"no" : no,
"name" : name,
"nick" : nick
}),
success : function(result) { // 결과 성공 콜백함수
console.log(result);
},
error : function(request, status, error) { // 결과 에러 콜백함수
console.log(error)
}
})
ajax 옵션(jQuery 기준)
- type: GET 또는 POST 등을 지정
- url: 대상 URL 지정
- async: 동기, 비동기 지정(boolean)
- data: 요청 매개변수 지정(object, string)
- success(data, status, xhr): ajax 성공 이벤트 리스너 지정(function, array)
- error(xhr, status, error): ajax 실패 시 이벤트 리스너 지정(function)
- complete(xhr, status): ajax 완료 시 이벤트 리스너 지정(function)
최신버전의 ajax방법
Deprecation Notice: The $.success(), $.error(), and $.complete() callbacks are removed as of jQuery 3.0. You can use $.done(), $.fail(), and $.always() instead.
$.ajax( "/text",
{
method: 'get',
data : { name: "chan" },
dataType: 'json'
}
)
.done(function() { // 서버요청이 성공시의 콜백함수
alert( "success" );
})
.fail(function() { // 서버요청이 에러시의 콜백함수
alert( "error" );
})
.always(function() { // 항상 실행 (finally 같은느낌)
alert( "complete" );
});
$.getJSON() 와 $.post() (jQuery 기준)
- $.getJSON 은 get방식으로 서버에게 요청한 후 Json으로 받을때 사용
$.getJSON( url [, data] [, success] ) {
}
// $.getJSON는 아래 ajax함수의 약자 이다.
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
- $.post는 post방식으로 서버에게 요청하기 위한 메서드
$.post( url [, data ] [, success ] [, dataType ] ) {
}
// $.post는 아래 ajax 함수의 약자이다.
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});