AJAX (웹 비동기 기법)

AJAX 

AJAX란? 웹 페이지에서 서버와 비동기식으로 데이터를 교환하거나 가져오기 위해 사용되는 클라이언트 측 웹 개발 기술이다.  AJAX를 사용하면 페이지 전체를 새로고침하지 않아도 서버로부터 데이터를 받아와 웹페이지의 일부를 업데이트 할 수 있다.

 

특징

• AJAX 요청은 비동기식으로 처리되며, 서버로부터 응답을 기다리는 동안 다른 작업을 진행할 수 있다.
• 전체 페이지를 새로고침 하지 않고도 필요한 데이터만 서버와 교환할 수 있어 트래픽을 줄이고 성능을 향상 시킨다.

 

AJAX 종류

1. XMLHttpRequest

• 가장 기본적인 HTTP 요청 방식
• 브라우저에서 제공하는 원시적인 API로, 다소 번거롭고 코드가 길어질 수 있음
• 과거에 사용하던 방식.

2. ajax jQeury

• jQuery 라이브러리를 사용한 HTTP 요청 방법
• XMLHttpRequest 보다 간결하고 가독성 좋은 코드를 만들 수 있음

3. Fetch API

모던 브라우저에서 제공하는 내장 API

• 모던 브라우저란? 최신 웹 표준과 기술을 지원하는 웹 브라우저
  • 크롬, 파이어폭스, 사파리, 엣지 둥

• 가본적으로 비동기 요청만 지원
• Promise 기반으로 동작하며, 가독성이 좋고 비동기 처리가 간결

4. Axios

• 외부 라이브러리로, Promise 기반
• 가독성이 좋고 다양한 추가 기능을 제공
• 서버와 클라이언트 모두에 사용할 수 있어 SSR(서버 사이드 렌더링(jsp, thymleaf 등))에도 유용

Promise란? JavaScript에서 비동기 작업을 표현하는 객체. 비동기 작업이란 파일 읽기, 네트워크 요청, 타이머 등과 같이 직시 완료되지 않고 시간이 걸리는 작업을 의미한다.

 

그렇다면 AJAX는 어떤 종류를 사용해야할까?

• 1. XMLHttpRequest(권장하지 않음)
  • 장점: 가방 기본적인 AJAX방법으로 모든 브라우저에서 지원됨
  • 단점: 코드가 복잡하고 가독성이 떨어진다.
  • 사용이 필요한 경우: 레거시(구 브라우저(익스폴로러 등)) 브라우저 지원이 필요한 경우, 또는 라이브러리나 프레임워크 없이 순수 JS를 사용하고 싶은 경우,
• 2. jQuery AJAX(권장하지 않음)
  • 장점: 사용이 간편하며, 크로스 브라우저 이슈를 자동으로 처리(크로스 브라우저란? 웹페이지나 웹 애플리케이션이 다양한 브라우저에서 동일하게 동작하지 않는 문제를 의미(브라우저 별 js엔진, css 지원 차이 등))
  • 단점: jQuery 라이브러리가 필요하고, 현대 프론트엔드 프레임워크(React 등)는 잘 어울리지 않음
  • 사용이 필요한 경우: jQuery를 사용하는 프로젝트
• 3. Fetch API (최신)
  • 장점: Promise 기반으로 간결하고 가독성이 좋음. 모던 브라우저에서 네이티브로 지원된다.
  • 단점: 레거시 브라우저(익스플로러 등)에는 지원되지 않는다.
  • 사용이 필요한 경우: 모던 브라우저에 최적화된 웹 앱을 개발하는 경우
• 4. Axios(최신)
  • 장점: Promise 기반으로 요청과 응답을 JSON 형태로 자동 변환, 요청 취소, HTTP요청을 중복 제거 등 고급 기능을 제공
  • 단점: 외부 라이브러리이므로 추가적인 의존성이 생김
  • 사용 케이스: 복잡한 HTTP 요청을 다루거나, 고급기능이 필요한 경우
• 정리
  • 간단한 프로젝트: Fetch API 또는 jQuery AJAX
  • 모던 웹 앱: Fetch API 또는 Axios
  • 서버와 클라이언트 모두에서 사용: Axios
  • 레거시 브라우저 지원: XMLHttpRequest 또는 jQuery AJAX