Ajax VS Fetch VS Axios

nana1005·2022년 2월 11일
0

기타

목록 보기
1/1

역사..?

  • 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 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

profile
열심히 하는 중

0개의 댓글