AJAX통신의 종류 > 개발

1. JQuery Ajax
- 제이쿼리와 Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은개발 환경이며,현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리 이다.

- XMLHttpRequest가 사용되다가 불편함과 호환성을 이유로 jQuery 내에서 Ajax를 사용하는 것이 대세가 되었다.

- jQuery를 사용하기 위해서는 cdn을 import해야하거나 API파일을 직접 다운받아서 사용해야 한다.

    $.ajax({
        url: "요청을 보낼 서버의 URL 주소",
        data: {"넘겨줄 데이터" },
        type: "요청 방식(GET, POST)",
        dataType: "서버에서 보내줄 데이터의 타입"
    });

2. fetch API
- HTTP request 전송 기능을 제공하는 클라이언트 사이드 Web API 라이브러리인 axios와 달리 브라우저에 내장된 함수
- 내장 라이브러리이기 때문에 import없이 사용 가능하다.
- fetch API는 Promise기반으로 동작한다.
- React Native같은 잦은 업데이트에도 잘 적용이 된다.
- 기본 응답 결과는 Response 객체이다 -> json으로 바꾸거나 text로 바꾸는 처리 과정이 필요하다.
- 구형 브라우저에서는 지원을 안한다.
- 네트워크 에러 발생시 계속 기다려야한다.
- API 요청을 취소 할 수가 없다

fetch('주소', 설정객체)
.then(콜백)
.catch(콜백);

3. Axios
- 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
- Axios도 Promise 기반이다.
- 크로스 브라우징 기반으로 브라우저 호환성이 뛰어나다.
- 자동으로 JSON데이터 형식으로 변환된다.
- 요청 취소 및 타임아웃 설정이 가능
- fetch에 존재하지 않는 기능이 좀 더 많다.
- React에서 주로 사용.
- XSRF 해킹 기법에 비교적 안전하다.
- 라이브러리 설치가 필요.

const axios = require('axios')

// ID로 사용자 요청
axios
.get('url~~')
// 응답(성공)
.then(function(response) {
console.log(response)
})
// 응답(실패)
.catch(function(error) {
console.log(error)
})
// 응답(항상 실행)
.then(function() {
// ...
})