jQuery를 통한 Ajax 사용
문제점 😅
Web 개발을 하면 Ajax1는 마주칠 수 밖에 없다. 비동기식 처리를 통해 화면의 갱신(새로고침)없이 서버에 필요한 데이터를 요청 및 응답받아 필요한 부분만 변경해주는 이 기술은 반드시 사용법을 알아야한다. 기본적인 와꾸만 좀 정리해두자.
해결책 😏
Ajax는 순수 자바스크립트보다는 jQuery를 이용하여 손쉽게 사용한다. Ajax를 이용하여 사용자 정보를 저장하는 함수를 보자.
function saveUserInfo() {
// 1-1. 객체 리터럴 + 대문자 표기법
let userInfo = {};
userInfo['name'] = $("#userInfoForm input[name='name']").val();
userInfo['age'] = $("#userInfoForm input[name='age']").val();
userInfo['job'] = $("#userInfoForm input[name='job']").val();
/*
// 1-2. 객체 생성자
let userInfo = new Object();
userInfo.name = $("#userInfoForm input[name='name']").val();
userInfo.age = $("#userInfoForm input[name='age']").val();
userInfo.job = $("#userInfoForm input[name='job']").val();
*/
$.ajax({
contentType: 'application/json; charset=utf-8',
type: 'POST',
url: '/user/saveUserInfo.do',
dataType: 'json',
data: JSON.stringify(userInfo),
async: false,
cache: true,
beforeSend: function(xhr, settings) {
// do something...
},
success: function(data, status, xhr) {
// do something...
},
error: function(xhr, status, error) {
// do something...
},
complete: function(xhr, status) {
// do something...
}
});
}
userInfo라는 객체 변수를 생성하는데 2가지 방식을 적어놓았다. 또한 상기 방식으로 데이터 통신을 하게된다면, Java측 서버에서는 @RequestBody와 @ResponseBody을 사용해야겠다!
contentType
contentType은 서버로 보내는 데이터의 타입, 기본값은 application/x-www-form-urlencoded; charset=utf-8이다.
type
HTTP 메서드 전송방식. 보통 POST와 GET 사용하며 기본값은 GET이다.
url
데이터를 전송할 요청 URL.
dataType
서버에서 받는 데이터의 타입. xml, html, script, json, text가 있다.
data
서버로 전송할 파라미터. JSON.stringify()은 JSON을 String으로 변환한다.
async
기본값은 true(비동기)이며, false 설정 시 동기 통신 처리한다.
cache
캐시 사용 여부로, 기본값은 true. 만약 HTML 동적 변경이 목적이라면 false로 설정하여 브라우저의 캐시를 사용하지 않고 서버에서 새로 받아오도록 한다.
beforeSend: function(xhr, settings) {…}
function( jqXHR jqXHR, PlainObject settings ) {...}
서버로 요청을 전송하기 전에 실행되는 콜백 함수.
- jqXHR2: xhr 객체.
- settings: Ajax 호출 시, 설정값.
success: function(data, status, xhr) {…}
function( Anything data, String textStatus, jqXHR jqXHR ) {...}
요청이 성공했을 때 실행되는 콜백 함수. try-catch-finally 구문의 try 부분.
- data: 서버로부터 응답받은 데이터.
- textStatus: 요청 상태 정보를 문자열로 전달받는 매개변수.(success)
- jqXHR: xhr 객체.
error: function(xhr, status, error) {…}
function( jqXHR jqXHR, String textStatus, String errorThrown ) {...}
요청이 실패했을 때 실행되는 콜백 함수. try-catch-finally 구문의 catch 부분.
- jqXHR: xhr 객체.
- textStatus: 요청 상태 정보를 문자열로 전달받는 매개변수.(timeout, error, abort 등)
- errorThrown: 에러 정보를 문자열로 전달받는 매개변수.
complete: function(xhr, status) {…}
function( jqXHR jqXHR, String textStatus ) {...}
요청이 성공/실패 상관 없이, 완료됐을 때 실행되는 콜백 함수. try-catch-finally 구문의 finally 부분.
- jqXHR: xhr 객체.
- textStatus: 요청 상태 정보를 문자열로 전달받는 매개변수.
마무리 😎
자주 쓰는 파라미터만 적어 놓았다. 이 외에도 여러가지 있으니 확인하고 쓰자.
참고문헌 📝
https://api.jquery.com/jquery.ajax/
https://sjparkk-dev1og.tistory.com/27
https://knowledge-warehouse-jun.tistory.com/8
https://kdevkr.tistory.com/663
https://moonhy7.tistory.com/entry/Ajax-10-Ajax-콜백-함수
https://namu.wiki/w/AJAX