동적 폼 전송 방법 3가지

1. Ajax

 

Asynchronous JavaScript And XML

자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신

JQuery를 이용해 쉽게 구현이 가능하며, Error, Success, Complete의 상태를 통해 실행 흐름을 조절함

Jquery를 사용해야만!! 간편하고 호환성이 보장된다. ( xml 사용은 복잡 )

Promise 기반이 아니다.

 

2. Axios

Node.js와 브라우저를 위한 Promise API를 활용

비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.

Promise 기반으로 만들어졌으며, 브라우저 호환성이 뛰어나다.

하지만 모듈 설치 or 호출을 해줘야 사용이 가능하다.

 

3. Fetch

• JavaScript 내장 라이브러리이므로 별도의 import 필요 X

•  Promise 기반으로 제작된 라이브러리

•  최신문법으로 제작되었으며, Timeout 기능이 없는 등, 상대적으로 Axios에 비해 기능 부족

•  response 에는 Promise를 기반으로 하는 다양한 메서드(함수) 존재. 이 메서드들을 사용하면 다양한 형태의 응답 처리 가능

• response.text() : 응답을 읽고 택스트로 반환

• response.json() : 응답을 읽고 JSON 형태로 파싱(실제 확인해보면 javascript 객체 형태로 반환)

 

 

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다