Ajax
Ajax는 비동기적으로 서버와 데이터를 주고받는 기술로, 웹 페이지를 새로고침하지 않고도 데이터를 업데이트할 수 있게 해주는 기술입니다.
새로고침하지 않고도 데이터를 업데이트 한다구요?
일반적인 웹 페이지는 사용자가 어떤 동작을 요청하면 클라이언트가 서버에 데이터를 요청하고 서버는 해당 데이터를 응답하여 클라이언트에 보내줍니다. 이 때 전체 웹페이지가 로드되면서 화면이 깜빡이고 일시적으로 느려집니다. 이것을 이 포스팅에서는 간단히 새로고침이라고 표현하겠습니다.
Ajax는 페이지를 새로고침하지 않고도 데이터를 업데이트 한다는데요..?
이를 가능하게 하는 것이 Ajax의 XMLHttpRequest객체혹은 fetch 메소드(비동기 메소드)입니다. XMLHttpRequest객체는 웹 페이지에서 JS를 이용하여 서버와 데이터를 비동기적으로 주고받을 수 있도록 해주는 API인데요. 진행은 아래와 같이 이루어집니다.
- XMLHttpRequest API를 이용하여 서버에게 HTTP요청을 보내 필요한 데이터를 요청합니다.
- 서버는 해당 요청에 대한 응답으로 JSON 혹은 XML 형태로 데이터를 보냅니다.
(이름은 XML요청이라고 써놓고 응답은 JSON형식으로도 할 수 있는 녀석이었습니다.) - 서버에서 데이터를 전송하면, Ajax는 전송받은 JSON/XML 데이터를 가지고 JS코드로 변환하고 실행하여 웹 페이지에서 변경이 필요한 부분만을 업데이트합니다.
전체 페이지(HTML)로드가 아닌 일정 부분만 업데이트 하니 새로고침이 일어나지 않는것이죠.
Ajax 요청방법
1) XMLHttpRequest 객체 생성
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 요청 완료 시 실행될 콜백 함수 지정
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 성공적으로 요청이 완료되었을 때 실행될 코드
console.log(xhr.responseText);
}
};
// 요청 설정
xhr.open('GET', '/api/data', true);
// 요청 헤더 설정
xhr.setRequestHeader('Content-type', 'application/json');
// 요청 전송
xhr.send();2) fetch 메소드 사용
fetch('/api/data')
.then(response => response.json())
.then(data => {
// 가져온 데이터를 사용하여 DOM을 업데이트합니다.
})
.catch(error => console.error(error));fetch() 메소드를 사용하면 XMLHttpRequest 객체를 사용한 방법보다 코드가 간단해지고, Promise 객체를 사용하므로 비동기적인 코드를 작성하기에도 더 용이합니다.
Axios
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
Axios는 브라우저와 Node.js 모두에서 사용할 수 있고, 간단하게 HTTP 요청을 보내고 응답을 받을 수 있습니다. 뿐만 아니라 요청 취소, 요청/응답 인터셉트, XSRF 보호, 파일 업로드 등 다양한 기능을 제공합니다.
Axios 요청방법
- Axios 라이브러리를 다운로드 받거나 CDN을 사용하여 불러옵니다.
- Axios를 사용하여 HTTP 요청(get, post, put,delete 등)과 필요한 파라미터, url을 지정해 서버로 보냅니다.
- Axios는 Promise 객체를 반환하므로, Promise의 then() 메서드나 async/await를 사용하여 응답을 처리합니다.
Axios는 데이터를 자동으로 JSON으로 자동 변환해주므로, 따로 변환해주는 메소드를 사용할 필요없이 응답 데이터를 처리하면 됩니다.
- 요청에 실패할 경우 Axios가 자동으로 에러를 발생시키니, catch나 async/await를 사용해 에러처리를 합니다.
Axios 요청방법
// Axios 라이브러리 임포트
import axios from 'axios';
// GET 요청 보내기
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// POST 요청 보내기
axios.post('/api/users', {
name: 'John Doe',
email: 'johndoe@example.com'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});음 우선 Ajax의 XMLHttpRequest 보다 훨씬 코드가 간결해 진 것이 눈에 띕니다. 하지만 Ajax도 fetch를 사용하면 promise 객체 사용이 가능하고 비동기 통신도 가능하단 말이죠.
출처: https://chihoya.tistory.com/28
Ajax fetch 단점
- Fetch API는 오래된 브라우저에서는 지원되지 않습니다.
- Fetch API는 기본적으로 Request나 Response 객체를 반환하며, 데이터를 가져오기 위해서는 일련의 메소드를 사용해야 합니다.
- Fetch API는 요청을 취소하거나 타임아웃을 설정하는 등의 기능을 제공하지 않습니다.
그런 fetch의 단점을 포함한 Ajax의 단점을 Axios가 커버해줍니다.
Axios의 장점
- 브라우저와 Node.js 모두에서 사용할 수 있습니다.
- XMLHttpRequest나 Fetch API와 달리 요청과 응답을 간편하게 처리할 수 있습니다.
- 요청 취소, 요청/응답 인터셉트, XSRF 보호, 파일 업로드 등 다양한 기능을 제공합니다.
Axios는 임포트만 하면 브라우저와 Node.js에서 다양한 기능들을 맘껏 사용할 수 있으니 왜 요즘 추세가 Axios인지 이해가 갑니다.
마무리
Axios vs Ajax. 프로젝트에 따라 라이브러리를 선택하면 될 것 같습니다. 복잡한 기능이 필요하거나, 브라우저와 Node.js 모두에서 사용해야 하는 경우에는 Axios를 사용하고, 하지만 Ajax는 가볍고 따로 import가 필요없으니, 간단한 요청을 처리할 때는 Ajax를 사용하면 되겠습니다.
참고사이트
https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0
https://chihoya.tistory.com/28
