JQuery Ajax 사용법에 대해 포스팅하겠습니다.
먼저 Ajax란 Asynchronous Javascript And Xml (비동기식 Javascript And Xml)의 약자로
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 기능입니다.
기본 사용법: JQuery.ajax({Settings})
Settings에 들어가는 옵션들을 살펴보겠습니다.
대표적인 옵션만 기술합니다.
| 옵션 | 타입 | 기본값 | 설명 |
| url | String | HTTP Request 보낼 주소 | |
| method | String | GET | HTTP Request 메소드 (GET, POST 등) |
| data | Object or String or Array | 요청과 함께 보낼 데이터 | |
| dataType | String | Intelligent Guess (추측) (xml, json, script, or html) |
서버에서 응답받을 데이터타입 |
| async | Boolean | true | 비동기 진행여부 |
| beforeSend | Function(jqXHR jqXHR, Object settings) | 요청보내기 전 진행할 함수 | |
| success (jQuery 3.0↓) done (jQuery 3.0↑) |
Function(anyThing data, String status, jqXHR jqXhr) | 요청이 성공했을때 진행할 함수 | |
| error (jQuery 3.0↓) fail (jQuery 3.0↑) |
Function(jqXHR jqXHR, String textStatus, STring errorThrown ) | 요청에서 에러가 발생했을때 진행할 함수 | |
| complete (jQuery 3.0↓) always (jQuery 3.0↑) |
Function(jqXHR jqXHR, String textStatus) | 요청이 모두 완료되고난후 진행할 함수 (성공/실패 관계없이) |
외에도 세부 옵션들은 공식 홈페이지 Documents에서 확인 가능합니다.
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
예제 코드를 한번 보겠습니다.
$.ajax({
url: "/ajaxRequest.do" // Http 요청보낼 서버Url
, method: "GET" // http 요청 메소드(GET, POST 등)
, async: true // 비동기여부
, data: {
ID: "A32"
, NAME: "Aiden"
}
, dataType: "json" // 서버에서 응답하여 보내줄 데이터타입
, beforeSend: function() { // 요청보내기전 실행할 함수
$("#loading").show();
}
, done: function(data, status) { // 요청성공하면 실행될 함수
console.log(data);
console.log(status);
}
, fail: function(jqXhr, status, errorThrown) { // 요청실패하면 실행될 함수
alert("실패했습니다. (error : " + errorThrown + " )");
}
, always: function(jqXhr, status) { // 성공,실패와 상관없이 항상 실행되는 함수, done/fail 함수 먼저 실행됩니다.
$("#loading").hide();
}
});