역사..?

• 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라고 부른다! 원래 XMLHttpRequest API를 통해 주고받는 것에 불편함을 느끼기 시작해 제이쿼리로 구현하다 fetch, Axios가 등장함

Ajax

• Asynchronous JavaScript And XML ⇒ 자바스크립트로 XML 데이터를 주고받는 비동기 방식
• XMLHttpRequest(XHR) 객체를 이용해서 비동기 통신 구현
• 응답초과 시간을 조절할 수 있다. response timeout
• jQuery를 이용하면 브라우저 호환성이 뛰어나다.

1. 초기 방식

   const xhr = new XMLHttpRequest(); 
   // Method
   xhr.open('POST', url, true);
   // 요청 Type 
   xhr.responseType = 'json'; 
   // 서버로 보내는 형태
   xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8;');
   // 서버 응답을 받으면 실행
   xhr.onload = function(e) { 
   	if (this.status == 200) { 
   		alert('성공'); } 
   	} 
   // Jackson ObjectMapper를 통해 Java Object로 변환 하기 위해 
   // Javascript Object를 json 데이터로 변환하여 전송
   xhr.send(JSON.stringify(data));
   
   출처: [https://aljjabaegi.tistory.com/520](https://aljjabaegi.tistory.com/520) [알짜배기 프로그래머]

2. jQuery 이용

   // 외부에서 jQuery 사용하기 위해 연결
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
       
       <script>
       function jqueryAJAX(){
       
       $.ajax({
      
   		// data 옵션
       data : { type1 : type1, 
       		 type2 : type2,
       },
   		// server로 보낼 url
       url : "/ajax/ajaxController"
   		// 서버 응답을 받으면 실행
   		// function(data)의 data는 서버에서 return 해준 값
       success:function(data){ 
       console.log(data.length);
       }
       
       })
       
       }
       </script>
   
   ----------------------------------------------------------------------------------
   
   // server
   @Controller
   @RequestMapping("ajax/*")
   public class JqueryController {
   
   @RequestMapping("ajax/ajaxController")
   	public @ResponseBody List<serverData> getServerData(String type1,String type2) {
   		List<serverData> result = menuservice.getServerData(type1,type2);
   		return result;
   	}
   
   }
   
   출처 : [https://java119.tistory.com/4](https://java119.tistory.com/4)

Fetch

• 자바스크립트 내장 라이브러리
• promise 기반
• 지원하지 않는 브라우저가 존재
• 코드예제

  const res = await fetch("http://localhost:5000/atelier/insert", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "http://localhost:3000",
        },
        credentials: "include",
        body: JSON.stringify({
          at_seq,
          at_name,
          at_subname,
          at_addr,
          at_open,
          at_site,
          at_hashtag,
          at_thumbnail,
          at_image,
          at_content,
        }),
      });

Axios

• Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• Json 데이터 형식으로 자동 변환해서 return
• 응답초과 시간을 조절할 수 있다. response timeout
• 브라우저 호환성이 좋다.
• XSRF Protection 보안 기능 제공 ⇒ 이건 알아봐야함
• 코드예제

  axios({
    method: 'post',
    url: '/user/12345',
    data: {
      firstName: 'Yongseong',
      lastName: 'Kim'
    }
  });
  
  출처 : [https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch](https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch)

참고

[개발상식] Ajax와 Axios 그리고 fetch
Axios | Cracking Vue.js
[React / React Naive TIPS] axios 와 fetch 어떤 것을 사용할까?
https://namu.wiki/w/AJAX
Axios | Cracking Vue.js