[web] Ajax로 통신하기

실전! 요약! Ajax로 서버랑 프론트 통신

• 서버 [uri] <-> 프론트 [ajax] 통해서 통신한다.

1. ajax에서 data: 부분에 서버로 전송할 데이터를 담는다. --- json형식으로 보낼 땐, 자바스크립트 객체를 직렬화 해주어야 한다. data: JSON.stringify(data)

2. APIController에서 @RequestParam이나 @RequeatBody로 받는다.

   • Body로 받을 때엔, ajax를 통해 넘어오는 데이터를 담을 객체(모델)이 필요하다. spring이 자동으로 역직렬화를 해주기 때문

3. controller에서 return [success or fail] or response 객체

4. ajax에서 datatype : text or json 을 통해 api 통신 결과를 받고,
   해당 결과에 따라 (성공/실패) 화면에서 처리 할 내용을 코드한다.

serialize()를 이용하여 Form 데이터 ajax로 쉽게 전송하기

• serialize()는 선택된 모든 하위 element를 문자열 데이터(query string)에 직렬화한다.
• 사용방법

function call() {
	var params = params = $("#폼명").serialize();
  
  $.ajax({
    url : '/test',
    type : 'POST',
    data : params,
    dataType : 'text',
    success : function(data) {
    	if(data == "SUCCESS") {
        	alert("성공이닷~");
        }
    }
    
  });
}

@Controller
class ApiController {
	
    @RequestMapping(value = "/test", method = "RequestMethod.POST)
    public String call(@RequestParam Map<String, Object> paramMap) 
	
    String data = (String)ParamMap.get("radioBtn01");
}

JSON stringify, parse

• 제이쿼리의 ajax 함수를 쓰면서, 함수에 들어가는 객체를 설정할 때 쓰이는 속성인 data를 설정하면서 JSON.stringify()이 들어간 코드들이 보여서 찾아보았다.
• JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷으로, 자바스크립트에서 사용하는 data를 가공하여 통신해야해서 쓰이는 함수이다.
  "JSON" -"JavaScript Object Notation"
• JSON.stringify(data) : JSON 형식의 객체 -> JSON 형식의 문자열
• JSON.parse(data) : JSON 형식의 문자열 -> JSON 형식의 객체

예제코드
출처 - https://curryyou.tistory.com/359

// JSON타입 배열 생성
const arr_JSON = [
    {
        "name": "원빈",
        "age": 37,
        "major": "경제학",
        "hobby": "코딩"
    },
    {
        "name": "이나영",
        "age": 31,
        "major": "경영학",
        "hobby": "디자인"
    },
    {
        "name": "curryyou",
        "age": 21,
        "major": "역사",
        "hobby": "글쓰기"
    },
];

// 1. 직렬화 : 객체 => 문자열
const str_JSON = JSON.stringify(arr_JSON);
console.log(typeof str_JSON, str_JSON);
/*
출력결과: 문자열
"[{"name":"원빈","age":37,"major":"경제학","hobby":"코딩"},{"name":"이나영","age":31,"major":"경영학","hobby":"디자인"},{"name":"curryyou","age":21,"major":"역사","hobby":"글쓰기"}]"
*/


// 2. 역직렬화 : 문자열 => 객체
const obj_JSON = JSON.parse(str_JSON);
console.log(typeof obj_JSON, obj_JSON);
/*
출력결과: 객체
[
  { name: '원빈', age: 37, major: '경제학', hobby: '코딩' },
  { name: '이나영', age: 31, major: '경영학', hobby: '디자인' },
  { name: 'curryyou', age: 21, major: '역사', hobby: '글쓰기' }
]
*/
출처: https://curryyou.tistory.com/359 [카레유:티스토리]

제이쿼리를 사용한 ajax 함수에 들어가는 객체의 속성에 대해 알아보자.

• jQuery의 $.ajax() 함수는 비동기 HTTP 요청을 만들기 위해 사용한다.

• 이때, $.ajax()에 전달된 객체의 속성을 사용하여 요청의 다양한 측면을 구성할 수 있다.

• 속성값 설명 정리

funtion test() {
  $.ajax(
    {	url : "/api/data", // 요청이 전송되는 URL을 지정한다. 
		method : "POST", // 요청 메서드를 정한다. 
		data : {key:"val", key2:"key2"}, // 서버에 보낼 데이터 [query string / object] 예시는 JSON
    	dataType : "text", // 서버에서 받아 올 데이터 유형 [json, xml, html, text]
      	contentType : "application/json; charset=utf-8" // 서버로 전송되는 데이터의 콘텐츠 유형
      	headers : { // 요청과 함께 보낼 추가 헤더 키/값 쌍의 개체
      			"Authorization" : "Bearer token$(!#@"
    			} 
      	success : funtion(response) { // 요청이 성공하면 실행되는 콜백 함수. response에는 서버에서 받아오는 data 값이 들어있다. 
  				}
  		error : funtion(xhr, textStatus, errorThrown) { // 요청이 실패하면 실행되는 콜백 함수
        		}
  		beforeSend : funtion(xhr) { // 요청이 보내지기 전 실행할 함수 
        		}
  		complete: function() { // 요청 결과가 성공이든 실패든 무조건 실행할 함수
        		}
  		timeout: 5000 //5초, 요청이 유효한 시간 지정
	}
  );
}